画像カラーピッカーとは？

画像をクリックするだけで正確な色値を取り出せます。パレットには画像の主要色が即座に並び、ルーペで目的のピクセルを正確に狙え、各色は HEX、RGB、HSL、HSV、CMYK と最も近い色名で表示されます。サンプリングした色はパレットに保存し、エクスポートも可能です。

画像を読み込むと、ツールはその中で最も多い6色を取り出してそのままパレットに入れるので、クリックする前から手元に出発点となる色がそろいます。拡大ルーペがカーソル下のピクセルを表示するため、アンチエイリアスのかかった隣ではなく狙った色を正確に拾えます。クリックした色はそれぞれ HEX、RGB、HSL、HSV、CMYK の値と最も近い CSS 名前付き色を表示し、パレットに加わります。このパレットは HEX リストとしてコピーしたり、JSON や CSS 変数として書き出したりできます。さらに、一般的な色覚異常フィルターを通して画像を表示する見え方プレビューもあり、作業しながらアクセシビリティを確認できます。

使い方

1. ステップ1 — 任意の画像（PNG・JPEG・WebP・GIF）をアップロードします。画像はズームルーペ付きのインタラクティブキャンバスに読み込まれます。
2. ステップ2 — 画像上の任意の場所をクリックして色を取得します。カーソル下の領域がルーペで拡大表示されるので、正確な選択が可能です。
3. ステップ 3 — HEX、RGB、HSL、HSV、CMYK のいずれの値もコピーでき、色見本の下には最も近い色名も表示されます。クリックした色と自動検出された 6 色は両方ともパレットに残り、ワンクリックでエクスポート可能です。

使用するタイミング

• スクショやデザインカンプから企業ブランドカラーを正確に取り出す。
• 参考写真からパレットを組み立て、デザイン案件の配色設計に使う。
• 競合のロゴやヒーロー画像で使われている色の正確な値を特定する。

結果

あるデザイナーが自然の風景写真から山の湖の正確なティールカラーを抽出しました。水面をクリックして#2E8B8Cを取得し、同じ写真から採取した他の3色とともにパレットに追加しました。

よくある質問

取得した色がPhotoshopで見たものと微妙にズレるのはなぜ?

多くのブラウザは画像読み込み時にsRGBへ変換します。元画像がAdobe RGBやDisplay P3でタグ付けされていると、ここで取れる値はそのsRGB等価になります。完全一致を狙うなら、元画像をsRGBで書き出してから読み込ませてください。

ルーペが見せているのは1ピクセル?それとも周辺の平均値?

ルーペがサンプリングするのは十字の真下にある1ピクセルだけで、周りのピクセルは状況把握用に並べているだけです。ルーペ内をクリックするとそのピクセルの値を確定でき、エッジのアンチエイリアスに惑わされません。

透明部分のあるPNGからも色を取れる?

取れます。透明ピクセルは本来のRGB値を返し、アルファ値は別途表示されます。完全透明な箇所をクリックすると背景色(初期値は白)が出てしまうので、不透明な領域をクリックすると正確に読み取れます。

HEX、RGB、HSL、HSV、CMYK の違いは? どれを使うべきですか?

HEX(#2E8B8C)は CSS やデザインツールで使われる最短表記です。RGB は 0〜255 の 3 チャネルで、生の数値が必要なコードに向いています。HSL は色相・彩度・明度を扱い、色を少し明るくしたり鮮やかにしたい時に直感的です。HSV は HSL に似ていますが明度の代わりに value(知覚輝度)を使い、多くのデザインソフトのカラーピッカーはこちらを採用しています。CMYK は印刷の 4 チャネルをパーセントで示し、印刷会社や印刷物デザイナーに渡す際に必要な形式です。

一度に複数の色を取り出せる?

画像をアップロードするたびに、パレットにはその画像の主要な6色があらかじめ入り、その後クリックするたびに新しい色が追加されます。パレットパネルは抽出したすべての色を表示し、任意のスウォッチをコピーしたり、すべてのHEXコードを一度にコピーしたり、個別の項目を削除したり、セット全体をJSONファイルや貼り付けてすぐ使えるCSSカスタムプロパティとしてエクスポートできます。

関連ツール