カラーピッカー
画像から好きな色を選んで、HEX・RGB・HSL・HSV・CMYKコードを瞬時に取得できます。
画像をアップロードして色を選択
ドラッグ＆ドロップ、貼り付け、または参照 — PNG・JPG・WEBP・GIF
ヒント：Ctrl/Cmd + V で画像を貼り付けることもできます
カラーコード
最も近い色名: Royal Blue
カラーハーモニー
コントラストチェッカー（WCAG）
サンプルテキスト
保存した色
保存した色はまだありません — 色を選んで「色を保存」をタップしてください。
カラーピッカーは、画面上や画像の中から目的の色を選び取り、その色を表す正確なカラーコードを取得するためのツールです。デザイナーやエンジニアは、ロゴやUIで使われている色を調べたり、写真の雰囲気に合った配色を組み立てたりと、日々さまざまな場面で色の値を必要とします。Webデザインやフロントエンド開発ではHEXやRGBが、印刷物のデザインではCMYKが、そしてアクセシビリティの検証では色同士のコントラスト比が欠かせません。カラーピッカーがあれば、こうした用途で必要になる色情報をすべて一箇所で確認できます。
本ツールは完全無料で、すべての処理がお使いのブラウザ内で完結します。アップロードした画像がサーバーに送信されることはないため、プライバシーを気にせず安心してご利用いただけます。HEX・RGB・HSL・HSV・CMYKの各フォーマットに対応し、画像からのカラーパレット抽出、配色（カラーハーモニー）の自動生成、WCAG基準に沿ったコントラスト比の確認まで、色まわりの作業をまとめてこなせます。
画像から色を取得する方法
- 1
画像をアップロードする
色を取得したい画像を、アップロードボタンから選択するか、そのままドラッグ＆ドロップします。Ctrl / Cmd + V での貼り付けや、画像URLの読み込みにも対応しています。
- 2
スポイトでピクセルをクリックする
表示された画像の上で、色を取得したい部分をクリックします。スポイト（カラーピッカー）が、クリックしたピクセルの正確な色を読み取ります。細かい部分は拡大表示で確認しながら選べます。
- 3
カラーコードを確認してコピーする
選んだ色のHEX・RGB・HSL・HSV・CMYKの値が一覧で表示されます。使いたいフォーマットの横にあるコピーボタンを押せば、そのままCSSやデザインツールに貼り付けられます。
- 4
画像からパレットを抽出する
「パレットを抽出」を選ぶと、画像全体を解析して主要な色を自動で抜き出します。写真やイラストの雰囲気を活かした配色をすばやく作成できます。
- 5
カラーハーモニーを生成する
選択中の色をもとに、補色・類似色・トライアドなどのカラーハーモニーを自動生成します。色彩理論に基づいた、まとまりのある配色を簡単に組み立てられます。
- 6
コントラストを確認して書き出す
テキスト色と背景色のWCAGコントラスト比を確認し、可読性が基準を満たしているかチェックします。気に入った色は保存し、CSS・JSON・PNGとして書き出せます。
HEX・RGB・HSL・HSV・CMYKの違い
同じ色でも、用途によって適した表現方法（カラーモデル）は異なります。Webサイトでは主にHEXやRGBが使われ、色を直感的に調整したいときはHSLやHSVが便利です。一方、印刷物ではインクの配合を表すCMYKが標準になります。以下の表で、それぞれの特徴と使いどころを比較してみましょう。
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Webサイト・CSSでの色指定に最適 |
| RGB | rgb(59,130,246) | ディスプレイなど画面表示向け |
| HSL | hsl(217,91%,60%) | 明度・彩度の直感的な調整に便利 |
| HSV | hsv(217,76%,96%) | デザインツールでの色選択に多い |
| CMYK | cmyk(76%,47%,0%,4%) | 印刷物のデザイン・入稿向け |
Web・UIデザイン
WebサイトやアプリのUIをデザインする際、ブランドカラーやアクセントカラーを正確なHEX・HSL値で管理できます。参考にしたいサイトやモックアップから色を拾い、配色パレットを組み立てれば、一貫性のあるデザインシステムを効率よく構築できます。
フロントエンド開発（CSS変数）
取得したカラーコードは、そのままCSSカスタムプロパティ（CSS変数）やデザイントークンとして活用できます。HEXやRGBをコピーして --color-primary: #3B82F6; のように定義すれば、デザインと実装の色ずれを防ぎ、テーマ管理もしやすくなります。
印刷・ブランディング（CMYK）
チラシや名刺、パッケージなどの印刷物では、画面用のRGBではなくCMYKでの色指定が求められます。本ツールなら画面上の色を即座にCMYK値へ変換できるため、ブランドカラーを印刷入稿用のデータに落とし込む作業がスムーズになります。
アクセシビリティ（WCAGコントラスト）
文字が読みやすいかどうかは、テキストと背景のコントラスト比で決まります。内蔵のコントラストチェッカーでWCAGのAA・AAA基準を満たしているかを確認すれば、色覚特性や視力に配慮した、誰にとっても使いやすい配色を実現できます。
比較
imagecolorpicker.com のような一般的な画像カラーピッカーと比べて、本ツールがどのような点で優れているかを整理しました。単に色を取得するだけでなく、実務で必要になる機能をまとめて備えている点が大きな違いです。
| 対応カラーモデル | HEX・RGB・HSL・HSV・CMYKをすべて表示 | HEX・RGB中心で限定的 |
| 印刷向けCMYK | CMYK値に対応し、印刷入稿にも使える | 非対応、または不正確なことが多い |
| WCAGコントラストチェック | AA・AAA基準の判定を内蔵 | 非対応 |
| カラーハーモニー生成 | 補色・類似色・トライアドなどを自動生成 | 非対応、または簡易的 |
| 広告 | 広告なしで快適に利用可能 | 広告が多く操作を妨げやすい |
よくある質問
画像から色を取得するにはどうすればいいですか？
画像をアップロードまたはドラッグ＆ドロップし、表示された画像の上で色を取得したい部分をクリックするだけです。スポイトがそのピクセルの色を読み取り、HEX・RGB・HSL・HSV・CMYKの各コードを自動で表示します。あとは必要なフォーマットをコピーして使うだけです。
HEXカラーコードとは何ですか？
HEXカラーコードは、色を16進数で表す記法で、# に続く6桁で表現されます。最初の2桁が赤（R）、次の2桁が緑（G）、最後の2桁が青（B）の強さを表します。たとえば #3B82F6 は明るい青色です。WebサイトやCSSで色を指定する際に最も一般的に使われる形式です。
RGBをHEXに変換するにはどうすればいいですか？
本ツールで色を選ぶと、RGB値とHEX値が同時に表示されるため、変換の手間はかかりません。手動で計算する場合は、R・G・Bの各値（0〜255）をそれぞれ2桁の16進数に変換し、# に続けて並べます。たとえば rgb(59,130,246) は #3B82F6 になります。
写真からカラーパレットを作るにはどうすればいいですか？
写真をアップロードしたあと「パレットを抽出」を選ぶと、画像全体を解析して代表的な色を自動で抜き出します。抽出された色は保存したり、CSSやJSONとして書き出したりできるので、写真の雰囲気に合わせた配色をすばやく作成できます。
アクセシビリティのために色のコントラストを確認するには？
内蔵のコントラストチェッカーにテキスト色と背景色を設定すると、両者のコントラスト比が計算され、WCAGのAA・AAA基準を満たしているかどうかが判定されます。比率が基準に達していれば、視認性の高い読みやすい配色だと確認できます。
無料で使えますか？プライバシーは守られますか？
はい、本ツールは完全無料で、登録も不要です。色の取得やパレット抽出などの処理はすべてお使いのブラウザ内で行われ、アップロードした画像がサーバーに送信・保存されることはありません。そのため、機密性の高い画像でも安心してご利用いただけます。
