画像カラーピッカー
写真や画像から正確な色を抽出。
ドミナントカラーの自動解析やキーボード微調整に対応。
画像をドラッグ＆ドロップ
またはクリックしてファイルを選択 / Ctrl+V でペースト
※ 画像はすべてブラウザ内で処理され、サーバーに送信されることはありません。
※画像をクリックして色を選択。キーボードの矢印キー（↑↓←→）で1px単位の微調整が可能です。
カラー情報
画像カラーピッカーの概要
画像カラーピッカーは、写真やイラストなどの画像データから特定の色情報を抽出し、HEX・RGB・HSL・CMYK・OKLCHなどのカラーコードとして取得できる無料のオンラインツールです。ブラウザのCanvas APIを利用した高度なクライアントサイド処理により、アップロードした画像が外部サーバーに送信されることは一切なく、安全かつ高速に動作します。
Webデザイナーやフロントエンドエンジニアが、参考デザインのキーカラーを調べたり、写真の雰囲気に合わせた配色パレットを作成したりする際に非常に役立ちます。また、ピクセル単位での正確な色抽出（スポイト機能）に加え、画像全体の主要な色（ドミナントカラー）を自動解析する機能も備えています。
使い方
画像をアップロードする
画面上部のエリアに、色を抽出したい画像をドラッグ＆ドロップするか、クリックしてファイルを選択します。クリップボードからのペースト（Ctrl+V / Cmd+V）にも対応しています。読み込みは即座に完了し、ブラウザ上で処理されます。
スポイトで特定の色を取得する
「スポイト」タブを選択し、画像上の調べたい部分をクリックします。拡大ルーペが表示されるため、細かいピクセルも正確に狙うことができます。クリック後、キーボードの矢印キー（↑↓←→）を使って、1ピクセル単位での微調整を行うことも可能です。
ドミナントカラーを自動抽出する
「自動抽出」タブに切り替えると、画像内で最も多く使われている代表的な8色（ドミナントカラー）が自動的に解析・パレット化されます。このパレットから「CSS変数コピー」をクリックすれば、プロジェクトのスタイルシートにそのまま貼り付けて利用することができます。
画像カラーピッカーに関する用語集
- HEX（16進数カラーコード）
- Webデザインで最も一般的に使用される色の表現方法です。赤・緑・青の各色を00からFFまでの16進数で表し、
#FF5733のように6桁の文字列で表現されます。HTMLやCSSでの色指定に不可欠です。 - OKLCH
- 知覚的に均一な色空間を用いた最新のCSSカラー定義メソッドです。Lightness（明度）、Chroma（彩度）、Hue（色相）の3要素で構成され、従来のHSLよりも人間の視覚特性に近いため、一貫したコントラスト比を持つカラーパレットを簡単に作成できる利点があります。
- ドミナントカラー
- 画像やデザインの中で最も支配的で、全体的な印象を決定づける主要な色のことです。このツールでは、Median Cut（中央値分割）アルゴリズムを用いて画像を解析し、視覚的に最も影響力のある上位8色を自動抽出します。
- Median Cutアルゴリズム
- 画像の減色処理によく用いられるアルゴリズムの一種です。画像内の全ピクセルを3次元のRGB色空間に配置し、最も広がり（分散）のある色の軸で空間を分割していくことで、代表的なカラーパレットを効率的に生成します。
- カラーパレット
- デザインで使用する色の組み合わせ。主調色（ベースカラー）、強調色（アクセントカラー）などを定義し、統一感のあるデザインを実現するための色のセットです。
よくある質問
- Q.アップロードした画像がサーバーに保存されることはありますか？
- いいえ、保存されません。すべての画像処理と色抽出アルゴリズムは、お使いのブラウザ（ローカル環境）のCanvas APIを使用して実行されます。画像データがインターネット経由で外部サーバーに送信されることは一切ないため、機密性の高い画像でも安心してご利用いただけます。
- Q.どの画像フォーマットに対応していますか？
- 一般的なWeb画像形式であるJPG、PNG、GIF、WebP、およびSVGフォーマットに対応しています。ファイルサイズの上限は10MBまでとなっており、ほとんどの用途に十分な容量を確保しています。
- Q.抽出した色の正確性はどの程度ですか？
- Canvas上のピクセルデータを直接読み取るため、1ピクセル単位で100%正確な色（sRGB空間）を取得できます。さらに、クリック後にキーボードの矢印キーを使用することで、隣接するピクセルの微妙な色の違いも正確に選択・抽出することが可能です。
- Q.CMYKカラーは印刷用としてそのまま使えますか？
- 本ツールが提示するCMYK値は、RGB値からの近似計算に基づく理論上の数値です。プロフェッショナルな印刷（DTP）においては、カラープロファイル（Japan Color等）に依存するため、あくまで参考値として利用し、最終確認はIllustratorなどの専用ソフトで行うことを推奨します。
活用シーン
Webデザインとコーディング
参考サイトのスクリーンショットや、クライアントから提供されたロゴ画像から、正確なブランドカラー（HEX/RGB）を抽出してCSSに適用します。自動抽出機能を使えば、ベースカラー・メインカラー・アクセントカラーの候補を瞬時に特定できます。
写真に合わせたUI配色
記事のサムネイル画像や、ヒーローヘッダーに配置する写真からドミナントカラーを抽出。その色をテキストやボタンの背景色に設定することで、画像とUIが調和した美しいページデザインを実現します。
イラストのカラーパレット作成
好きなイラストレーターの作品や美しい風景写真から、印象的な色の組み合わせ（カラーパレット）を抽出。抽出した複数の色をCSS変数として一括コピーし、自分のオリジナル作品の配色アイデアとして活用します。
写真補正・レタッチの基準色取得
写真編集の際、肌の色や空の色など、特定の部分の色情報をピクセル単位で正確に取得。ホワイトバランスの調整やカラーグレーディングの基準として活用します。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。