画像カラーピッカー
変換画像をアップロードしてクリックするだけで色を取得。HEX・RGB・HSL 形式でコピーできます。
画像をドラッグ＆ドロップ
またはクリックして選択 | PNG・JPG・WebP 対応
- 上のエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択します。
- 画像が表示されたら、色を取得したい場所をクリックします。
- クリックした場所の色が HEX・RGB・HSL の 3 形式で表示されます。
- 各行右端の「コピー」ボタンでその形式の値をクリップボードにコピーできます。
HEX（16進数）は #RRGGBB の形式で、赤・緑・青の各成分を 00〜FF の 16 進数 2 桁で表します。CSS や HTML で広く使われる最も一般的な形式です。
RGBは rgb(R, G, B) の形式で、赤・緑・青の各成分を 0〜255 の整数で表します。プログラミングや画像編集ソフトでよく使われます。
HSLは hsl(H, S%, L%) の形式で、色相（Hue）・彩度（Saturation）・明度（Lightness）で色を表します。人間の直感に近い指定方法で、CSS でも使用できます。
このツールでは、画像をアップロードしてクリックするだけで、任意のピクセルの色コードをHEX・RGB・HSLの3形式で即座に取得できます。写真の色、ロゴの色、スクリーンショットの特定の色など、目視では判断しにくい色も正確に数値で取得できます。すべての処理はブラウザ内で完結し、画像がサーバーに送信されることはないため、社外秘の資料や個人的な写真にも安心して利用できます。
よくある質問
Q. どんな画像形式に対応していますか？
A. JPEG・PNG・GIF・WebPなど、ブラウザで表示できる一般的な画像形式に対応しています。
Q. 取得した色はどの形式で表示されますか？
A. HEX・RGB・HSLの3形式で表示されます。各形式の右にあるコピーボタンでクリップボードにコピーできます。
Q. 画像がサーバーに送信されることはありますか？
A. ありません。画像の読み込みと色の取得はすべてブラウザ内で処理されます。プライベートな画像も安心してご利用いただけます。
Q. どうやって色を取得しますか？
A. 画像をアップロードした後、画像上の任意の場所をクリック（またはタップ）すると、その位置のピクセルの色をHEX・RGB・HSLで表示します。
Q. スマートフォンでも使えますか？
A. はい。スマートフォン・タブレット・PCのブラウザで利用できます。カメラロールの画像をアップロードして色を取得することも可能です。
Q. クリックした場所以外の色も取れますか？
A. 画像上の任意の場所をクリック（またはタップ）すれば、その位置のピクセルの色を何度でも取得できます。クリックするたびに色が更新されるので、複数箇所の色を確認する場合は順番にクリックしてください。
Q. 色コードをコピーするには？
A. 取得した色はHEX・RGB・HSLの3形式で表示され、それぞれ横のコピーボタンを押すとクリップボードにコピーできます。CSSやデザインツールに直接貼り付けて使えます。
Q. 画像をドラッグ＆ドロップで読み込めますか？
A. はい。ファイルを選択ダイアログのほか、画像ファイルをドラッグ＆ドロップしてアップロードできます。Webページの画像URLを直接入力する方法にも対応しています。
活用シーン
Webサイトのブランドカラー抽出
ロゴや参考サイトのスクリーンショットから正確な色コードを取得したいとき。目視では分からない細かい色の違いも数値で確認できます。
デザインの配色参考
気に入った写真や画像の色合いをデザインに取り入れたいとき。クリックするだけでHEX・RGB・HSLの形式で色が取得できます。
印刷物・資料の色合わせ
手元の画像素材と同じ色をCSSやデザインデータで再現したいとき。目分量ではなく数値で正確に色を合わせられます。
商品画像の色分類・タグ付け
ECサイトの商品写真から正確な色コードを取得して、色フィルターやタグに活用したいとき。目視判定よりも一貫性のある色管理ができます。
SNSのアイコン・サムネイルの配色確認
参考にしたいSNSのプロフィール画像やバナーから使われている色を分析したいとき。ブランドカラーを調べてデザインの参考にできます。