カラーピッカー
写真から色を取り出す・HEX RGB
写真から色を取り出す
ファイルをここにドラッグタップしてファイルを選ぶここに置いてください写真1枚、30MBまで。写真はサーバーにアップロードされません。写真1枚・30MB
写真をクリックして色を選びます。拡大後はドラッグで移動でき、矢印キーで1ピクセルずつ（Shiftで10ピクセルずつ）動かせます。
色を直接選ぶ
結果
- HEX
- RGB
- HSL
- HSV
- XYZ
写真と色の値はブラウザ内だけで処理され、サーバーへ送信・保存されません。
使い方
色を直接選ぶか、写真から1ピクセルを拾ってその色の値を読み取ります。HEX・RGB・HSL・HSV・XYZ をまとめて表示するので、デザインツールや CSS にそのまま使えます。写真はブラウザの中だけで処理され、アップロードされません。
こんなときに使います
- ロゴや商品写真で使われている色の HEX 値を調べるとき。
- スクリーンショットから背景色をそのまま取り出すとき。
- CSS やデザインツールに入れる色の値を形式ごとに確認するとき。
使い方
- 直接選ぶ場合は色を選ぶ欄を使うか、HEX 値を入力します。
- 写真から拾う場合は下の写真から色を拾うに写真を読み込みます（30MB まで）。
- 写真をクリックして色を選びます。拡大後はドラッグで移動できます。
- 矢印キーで1ピクセルずつ（Shift と一緒で10ピクセルずつ）動かし、正確な位置を決めます。
- HEX・RGB・HSL・HSV・XYZ の値をコピーしてお使いください。
知っておきたいこと
- 選んだ位置のピクセル座標 (x, y) も表示するので、同じ場所に戻りやすくなっています。
- JPG では圧縮の影響で隣のピクセルと色が少しずつ違います。 1点だけを信じず、何か所か比べてください。
- 画面の色はモニターや機種によって見え方が変わります。印刷用の色（CMYK）はこのツールでは扱いません。
- XYZ は人の目の反応を基準にした値で、色を精密に扱うときに使います。普段は HEX か RGB で十分です。
- 写真も色の値もブラウザの中だけで扱われ、どこにも保存されません。
よくある質問
画面のどこからでも色を拾えますか？
このサイトに読み込んだ写真からだけです。ブラウザの外の画面はウェブページからは見えません。画面の色が必要なときは、まずスクリーンショットを撮ってその画像を読み込んでください。
同じ色なのに値が少しずつ違います。
JPG は圧縮の際に隣のピクセルの色を混ぜるため、一見同じ面でもピクセルごとに値が少し異なります。数か所を拾って最も多い値を使うか、PNG の原本があればそちらから拾ってください。
拡大したあとの操作は？
拡大後は写真をドラッグして移動でき、一度クリックすれば矢印キーで1ピクセルずつ（Shift と一緒で10ピクセルずつ）動かせます。小さな文字やアイコンの色を拾うときに便利です。
HSL と HSV は何が違いますか？
どちらも色を「色相・鮮やかさ・明るさ」に分けますが、明るさの基準が違います。HSL は 50% が最も濃い色、HSV は 100% が最も濃い色です。CSS は HSL、お絵かきソフトは HSV をよく使います。