画像カラーピッカーについて
画像カラーピッカーは、画像の中の好きな場所の色を正確に調べられるツールです。写真、スクリーンショット、ロゴを開いて目的の場所をクリックすると、HEXコード、RGB値、HSL値で色が表示され、CSSやデザインツール、文書にそのままコピーできます。
ルーペにポインターの周りのピクセルが拡大表示されるので、細い線や小さな文字でも狙ったピクセルを選べます。矢印キーなら選択位置を1ピクセルずつ動かせます。画像の下には、画像全体の主な色（4～10色）が、画像に占める割合とともに一覧表示されます。
すべての処理はブラウザ内で行われ、画像がアップロードされることはありません。色は画像のピクセルから直接読み取られます。非常に大きな画像は長辺4,096ピクセルで読み取りますが、指し示せる細部はそのまま保たれます。
使い方
- 画像を選ぶか、ページにドロップします。
- 画像をクリックまたはドラッグします。ポインターの下のピクセルがルーペに表示されます。
- 「選んだ色」で色を確認し、コピーボタンでHEX、RGB、HSLのコードをコピーします。
- 細かく調整したいときは、画像をクリックしてから矢印キーで選択位置を動かします（Shiftキーで10ピクセルずつ）。
- 「主な色」で画像の主な色を確認します。数字のボタンで色数を選び、1色ずつ、またはすべてコピーできます。
主な機能
- ピクセルの正確な色: 色はぼやけた平均ではなくピクセルそのものから取得し、HEX、RGB、HSLで表示します。
- ルーペ: 11 × 11ピクセルのルーペがポインターに合わせて動き、選ばれるピクセルが中央に示されます。
- 主な色: 4色・6色・8色・10色の主な色を、占める割合の大きい順に、画像に占める割合とともに表示します。
- カラーコード変換へ: 選んだ色をカラーコード変換で開き、文字とのコントラストを確認できます。
- プライバシー重視: 画像はブラウザ内で読み取られ、アップロードされることはありません。
使用例
ブランドカラーを合わせる
ロゴを開いてクリックし、Webサイトで使うHEXコードを取得します。
写真からパレットを作る
旅行の写真を開き、スライドのデザイン用に主な6色をコピーします。
スクリーンショットの確認
スクリーンショットのボタンをルーペで拡大して、正確な色を読み取ります。
制限事項と注意点
- 長辺が4,096ピクセルを超える画像はそのサイズで読み取るため、元の画像の1ピクセルが隣のピクセルと混ざることがあります。
- コードは透明度を除いた色を表します。透けているピクセルでは、不透明度が別に表示されます。
- 色はブラウザが画像をデコードした結果として読み取られます。広い色域のカラープロファイルを持つ画像では、画像編集ソフトと少し違う値になることがあります。
- HEIC写真はここでは開けません。先に「HEIC JPG変換」で変換してください。
よくある質問
画像の中の色のHEXコードを調べるには？
画像を開いて色をクリックし、「選んだ色」の下に表示されるHEXコードをコピーします。
1ピクセルを正確に選べますか？
はい。ルーペで狙いを定めてから、矢印キーで選択位置を1ピクセルずつ動かせます。
主な色はどのように選ばれますか？
画像を縮小し、そのピクセルを似た色のグループに分けます（メディアンカット法）。各グループの平均が主な色となり、画像に占める割合の大きい順に並びます。
透けているピクセルに注意書きが出るのはなぜですか？
HEX、RGB、HSLのコードは透明度を含まない色を表すため、不透明度は別に表示しています。
画像はアップロードされますか？
いいえ。画像はブラウザ内でのみ開いて読み取られます。