画像から正確な色を取得する方法：HEX・RGB・HSL

画像の正確な色を知るには、目で見て推測するのではなく、1ピクセルの値を読み取ります。画像カラーピッカーで画像を開き、対象の位置にカーソルを合わせてクリックし、HEXコードをコピーします。読み取れる値はそのピクセルに保存されている値なので、同じファイルの同じ位置を選べば、何度取得しても同じ結果になります。

画像カラーピッカー正確なカラーコードを知りたい無料で使う

ピクセルが保存している情報

ピクセルは、色を持つ小さな正方形です。画面や画像ファイルでは、赤・緑・青のそれぞれを0から255までの3つの数値で保存しています。純粋な赤は255, 0, 0です。この3つの数値はどの形式でも同じ情報を表すため、同じ色を複数の書き方で表せます。

HEX・RGB・HSL

• HEX は、各数値を16進数の2桁で書きます。#FF0000が純粋な赤です。Webページ、CSS、多くのデザインツールで使われています。
• RGB は、同じ数値を10進数で書き、rgb(255, 0, 0)のように表します。HEXコードと同じ色です。
• HSL は、人が色を言葉で表現する方法に近い形式です。色相は色相環上の角度、彩度は色の鮮やかさ、輝度は明るさや暗さを表します。hsl(0, 100%, 50%)が純粋な赤です。

コードに色を貼り付けるときはHEX、ツールがRGBを求めるときはRGB、同じ色相で明るさや暗さだけを変えたいときはHSLを使いましょう。HSLで輝度だけを変えると色相は保たれますが、HEXで手作業するとこれは難しくなります。2色のコントラストを確認したい場合は、HEX・RGB・HSL・CMYKとコントラストをご覧ください。

スタイルシートで使われている色の例です。

.badge {
  background: #1F7A5C;
  color: #FFFFFF;
}

コードが画面の色と一致しない理由

• 画像が圧縮されている。 JPEGは細部をなめらかにしてデータ量を減らすため、エッジ付近のピクセルは、領域の中央で見える色とわずかに違うことがあります。
• 境界がにじんでいる。 2つの色が接している部分のピクセルは、両者の混ざった色であり、それ自体の色ではありません。
• カラープロファイルが異なる。 ピカーはブラウザがデコードした値を読み取ります。その値はsRGBです。広色域のプロファイルで保存された写真は、他のソフトで違って見えることがあります。
• 拡大縮小で画素が混ざる。 表示倍率を変えた状態で撮ったスクリーンショットは、ピクセルが混ざっていることがあります。可能であれば等倍で撮影してください。
• 大きな画像はコピーから読み取る。 長辺が6000ピクセルを超える画像は、6000ピクセルのコピーから読み取ります。そのため、1ピクセルの値が元のサイズのファイルとわずかに異なることがあります。

一色の領域の中央から取得する

まず1色で塗られた領域を探し、その中央にカーソルを移動します。拡大鏡には、ポインターの周囲11×11ピクセルが表示されるので、その位置が混ざっているか、均一かを確認できます。キーボードを使う場合は、矢印キーで十字線を1ピクセルずつ動かすか、Shiftを押しながら矢印キーで10ピクセルずつ動かし、Enterで取得します。コピーする前に読み取り結果を確認してください。

パレットで配色を作る

写真の中で注目したい色が1つだけということはめったにありません。パレットには、その写真の主な色が最大6つ並びます。各ピクセルを色ごとに16段階へ丸め、そのグループの数を数えて、互いに異なる頻度の高いグループを残す仕組みです。各色見本には、そのグループの平均色が表示されます。色見本をタップすると、そのHEXコードをコピーできます。パレットは平均値であり、実測したブランドカラーではないため、配色の出発点として使ってください。

形式を変換する

デザインツールで別の形式が求められた場合は、HEXコードをカラーコード変換に貼り付けてください。色を変えずにHEX・RGB・HSLの間で変換するので、取得した色と一致した結果が得られます。

最近の取得履歴とプライバシー

ツールは、比較できるように直近の取得結果をページ上に残します。その履歴は、このタブのメモリ上にのみ保持され、タブを閉じると消えます。画像自体はご利用のブラウザ内で読み取られ、サーバーに送信されることはありません。

fixmintでの手順

1. 画像カラーピッカーを開き、写真をドロップします。
2. 対象の位置にポインターを合わせます。または画像にフォーカスし、矢印キーで十字線を1ピクセルずつ動かします。Shiftを押したままにすると10ピクセル単位で動きます。
3. クリックするか、Enterを押して色を取得します。コピーする前に読み取り結果を確認してください。
4. HEX、RGB、HSLの横にあるコピーボタンで、必要な値をコピーします。
5. デザインツールで別の形式が求められた場合は、値をカラーコード変換に貼り付けます。

よくある質問

画面で見ると色が違って見えるのはなぜですか？ 画面には、カラーマネジメントされ、拡大縮小された状態のファイルが表示されているためです。一色の領域の中央から取得し、既知の色見本とHEXコードを比べてください。

どの形式をコピーすればよいですか？ Webページや多くのデザインツールではHEXを使います。ツールから指定された場合はRGBまたはHSLを使ってください。

ツールが画像をアップロードしますか？ いいえ。画像はご利用のブラウザ内でデコードされ、読み取られます。