1
画像をアップロード
画像をアップロード領域へドラッグするか、クリックして選択します。クリップボードから貼り付けることもでき、処理はブラウザ内で完結します。
DEVELOP.08 IMAGE COLOR PICKER
画像カラーピッカー
画像をアップロードして任意の場所をクリックすると HEX、RGB、HSL、CMYK を取得できます。パレットも自動生成され、画像はブラウザから外に出ません。
IMG
画像をここにドラッグ＆ドロップ
またはクリックして選択 · 画像の貼り付けにも対応
JPG、PNG、GIF、WebP、BMP に対応 CLR
HEX
#000000
HEX
#000000 RGB
rgb(0, 0, 0) HSL
hsl(0°, 0%, 0%) CMYK
cmyk(0%, 0%, 0%, 100%) § 01
画像からカラーコードを抽出する方法
2
色を取得
画像の上にマウスを移動して色をリアルタイムに確認し、クリックしてそのピクセルの正確な値を取得します。
3
カラーコードをコピー
HEX、RGB、HSL、CMYK の値を確認し、コピーをクリックしてクリップボードへ保存します。
§ 02
よくある質問
Q1どの画像形式に対応していますか？
JPG、PNG、GIF、WebP、BMP など主要な形式に対応しています。PNG は可逆圧縮なので精度が高く、JPG は圧縮によりわずかな色の差が出る場合があります。
Q2画像はサーバーへアップロードされますか？
いいえ。処理はすべてブラウザ内で行われ、画像がアップロード、保存、送信されることはありません。
Q3HEX カラーコードとは何ですか？
HEX は #FF5733 のような 6 桁の 16 進数で、赤・緑・青の各チャンネルを表します。ウェブ開発で最も一般的な色の表記です。
Q4RGB と HSL の違いは何ですか？
RGB は赤・緑・青の値（0–255）で表し、HSL は色相、彩度、明度で表します。HSL は色を直感的に調整しやすい形式です。
Q5CMYK はいつ使いますか？
CMYK（シアン、マゼンタ、イエロー、ブラック）は印刷用の色モデルです。画面の色を印刷物に使う際の目安になりますが、画面と印刷では差が生じることがあります。
§ 03
画像カラーピッカーの機能
✳
多彩な形式：HEX、RGB、HSL、CMYK を同時に確認でき、ウェブ、UI、印刷に対応。
✳
自動パレット：画像の主な色を分析して調和した配色を作成。
✳
リアルタイムプレビュー：画像にカーソルを重ねて確認し、クリックで取得。
✳
プライバシー重視：すべてブラウザ内で処理し、画像が端末から出ません。
§ 04