画像の色を調べる（カラーピッカー）
画像をアップロードして知りたい場所をクリックすると、その色のHEX・RGB・HSLがわかります。画像は端末内だけで処理され、サーバーに送信されません。
出典・準拠（一次情報）
- WHATWG HTML Living Standard 4.12.5.1.16 Pixel manipulation（Canvas API getImageData の仕様）
- MDN Web Docs「CanvasRenderingContext2D: getImageData() method」（colorSpace: srgb/display-p3、pixelFormat: rgba-unorm8/rgba-float16）
- MDN Web Docs「<color> CSS data type」（HEX・RGB・HSL・HWB・Lab・LCH・Oklab・OkLCh の各記法）
- MDN「Color contrast - Understanding WCAG」（本文AA 4.5:1、AAA 7:1、大きな文字 3:1）
特徴
- ・クリック1回でHEX・RGB・HSL同時取得。デザインツール・CSS・Officeで使い分け可能
- ・端末内処理。Canvas APIで読み取り、画像はサーバーに送信されません
- ・履歴つき。直近に取った色をlocalStorageに保存。後で確認しやすい
- ・無料・登録不要。ロゴ画像や非公開写真でも安心
- ・JPEG/PNG/WebP/GIF対応。スマホ撮影写真でもそのまま読み込めます
使い方（30秒）
- 「画像を選ぶ」から画像をアップロード、またはドラッグ＆ドロップ
- プレビュー上で色を知りたい場所をクリック
- HEX・RGB・HSLが表示されるので、用途に合った形式をコピー
- 必要なら別の場所もクリックして履歴に追加
正確な色を取るコツ
JPEGは色の境界から離れた中心部をクリック。JPEGの圧縮では8×8ピクセルのブロックごとに色情報を間引いており、境界付近では実際とは違う色が混ざります。単色ロゴならロゴ内側の広い面の中心が正確です。
拡大して1ピクセル単位で確認。本ツールは表示倍率を変えても、内部的には元画像の同じピクセルを参照します。拡大して目的の場所をクリックすると、隣のピクセルに当たる事故を防げます。
PNGの透明部分はアルファ値も考慮。完全に透明（α=0）の場所はRGBがすべて0として返るケースがあるため、半透明や不透明の隣ピクセルをクリックし直してください。
スクリーンショットからの色取得も可能。Web画面・Slack・PDFの一部をスクショして読み込めば、画面の見た目通りの色が取れます。ブランドガイドラインのPDFから色を抜き出すケースで便利です。
こんなときに便利
- ロゴ画像から会社のブランドカラーを抜き出す
ロゴ画像をクリックしてHEXを取得→デザインガイドに登録
- 写真の中の気に入った色をデザインに使う
空・植物・服の色をピックして配色テーマを作る
- Webサイトの既存色を真似てバナーを作る
スクショから色を取って同じトーンのバナーを制作
- 会社のロゴをExcel・PowerPointで再現
HEXをRGBに変換しOfficeの「色の設定」に入力
- SNS投稿のテーマカラーを揃える
過去投稿から色を取って全体の統一感を出す
- 印刷物の見本から近いWeb色を作る
紙のパンフをスキャンしてHEX抽出（あくまで近似）
日本仕様のポイント
日本の伝統色とWeb色：桜色・浅葱・茜・藍などの伝統色をHEXで再現したい場合、日本工業規格JIS Z 8721の色名から近いHEXを探すのが定石です。本ツールで実物（着物・布見本・写真）から色を取り、JIS色名と照合する使い方ができます。
企業ロゴのコーポレートカラー：日本の上場企業の多くは決算説明資料の表紙に正確なHEXコードを記載しています。資料PDFをスクショして本ツールで色を取れば、IR部の規定色と一致します。
官公庁の配色：政府CIO補佐官が監修した「デジタル庁デザインシステム」では、政府サイトの推奨色を公開しています。本ツールで政府サイトのスクショから色を取ると、デザインシステムと照合できます。
使用上の注意
- 取得値はJPEG圧縮・ディスプレイ表示色・ブラウザの色空間変換の影響を受け、元画像と完全に同じとは限りません。
- 本ツールはCanvas APIの既定であるsRGB色空間で読み取ります。Display P3など広色域はsRGBへの近似値として表示されます。
- 商標登録ロゴをそのまま自社サービスで使うのは法的に問題があります。「同じ色を使う」のはOKでも「同じロゴを使う」のはNGです。
- 印刷用CMYKは印刷条件で大きく変わるため、本ツールのHEX・RGBを単純にCMYK換算しても期待した色になりません。
よくある質問
Q. HEX・RGB・HSLはどう使い分けますか？
A. HEX（#から始まる6桁）はWeb・デザインツールのほとんどで使える汎用記法。RGBはOfficeなど色を3つの数値で指定する場面、HSLは色相を少しずつずらしたい時に向いています。CSS Color Level 4ではOKLCHなど新しい色空間も使えます。
Q. クリックした場所と少し違う色が取れます
A. JPEGは圧縮の影響で見た目が同じ色でも1ピクセル単位では値が揺れます。単色ロゴの正確な色を取りたい時は、色の境界から離れた中心部をクリックしてください。
Q. 画像はサーバーに送信されますか？
A. 送信されません。Canvas APIのgetImageDataを使ってブラウザの端末内だけで色を読み取ります。会社のロゴや非公開画像でも安心して使えます。
Q. 透明な部分の色はどうなりますか？
A. PNG等の透明ピクセルはRGBに加えてアルファ値（透明度）も持ちます。完全に透明な場所をクリックするとRGBはすべて0として返ることがあるので、隣の不透明ピクセルをクリックし直してください。
Q. WCAGのコントラスト比をどう測れますか？
A. 本ツールで2色のHEXを順に取得し、コントラストチェッカーで4.5:1（本文AA基準）、7:1（AAA基準）、大きな文字なら3:1を満たすか確認してください。WCAG2.2 SC1.4.3に基づく基準です。
Q. Display P3など広色域の色も取れますか？
A. 本ツールはCanvas APIの既定であるsRGB色空間で色を読み取ります。Display P3で保存された写真でも、sRGBに変換した近似値として表示されます。Web表示で使う前提なら通常はsRGBで問題ありません。
Q. 印刷用のCMYK値は出せますか？
A. 印刷用CMYKは紙やインク・印刷条件で値が変わるため、Web用の色取得とは別問題です。本ツールはWeb用のHEX・RGB・HSLに特化し、CMYKは出力していません。印刷会社のプロファイルに合わせてください。
Q. 履歴は端末を変えると消えますか？
A. 履歴はブラウザのlocalStorageに保存されるため、別端末・別ブラウザでは引き継がれません。会社PCと自宅PCで同期したい場合は、HEXをメモアプリ等で別途記録してください。
Q. クリックではなく特定の領域の平均色は取れますか？
A. 現在のバージョンはクリック位置1ピクセルの色を取得します。グラデーション等の平均色が必要な時は、少しずつ位置を変えて複数回取り、目視で代表色を選んでください。
関連ツール
画像加工ツール群
色を取った後はそのまま画像の調整に進めます。よく使う組み合わせを6本まとめました。