色の正確なコードを知りたい場面は、デザインの作業中に何度も訪れます。参考にしたロゴの色を再現したいとき、気に入った写真から配色を起こしたいとき、複数の制作物で色を揃えたいとき。ただ、元ファイルが手元にあるのか、ネット上の画像なのか、サイトの一部なのか、スマホで撮った写真なのかによって、いちばん効率のいいやり方は変わります。

色コードの形式を押さえる

具体的な方法に入る前に、デジタルで色を表すのに使われる主な形式を確認しておきましょう。

形式例使われる場面
HEX#3ecf8eCSS、HTML、ウェブ制作、多くのデザインツール
RGBrgb(62, 207, 142)CSS、画像編集、デジタル印刷
HSLhsl(152, 57%, 53%)CSS、デザインでの色調整、明度・彩度の微調整
CMYKC:70 M:0 Y:31 K:19商業印刷（チラシ、名刺、パッケージ）

HEXとRGBは同じ情報を別の書き方で表したもので、いつでも相互に変換できます。HSLは色相・彩度・明度で色を表すため、手で微調整するには直感的です。CMYKは印刷専用の形式です。

方法1：オンラインの色抽出ツール（最速）

画像全体の主要な色を知りたいとき、あるいは特定のピクセルを正確に拾いたいときは、オンラインの色抽出ツールがいちばん手っ取り早い選択肢です。画像をアップロードするだけで、よく使われている色が自動で洗い出され、HEXコードがコピーできる状態で並びます。

O 色を抽出 ツールは、どんな写真や画像でも解析して主要な色をHEXコードとともに返します。処理はすべてブラウザ内で完結するため、画像が手元の端末から出ることはありません。

  1. ImageToolsの 色を抽出 ツールを開きます。
  2. 画像をアップロードするか、指定の枠にファイルをドラッグします。
  3. 画像内でよく使われている色が自動で抽出されます。
  4. 気になる色をクリックすると、HEXコードがコピーされます。

🎨 もうひとつヒント： 主要な色を抜き出したら、 パレット でそのうちの1色から補色・類似色・モノクロマティックの調和を作り、配色を広げていけます。

画像から色を抜き出してみましょう

写真をアップロードすれば、主要な色のHEXコードが数秒で手に入ります。無料・登録不要、処理はブラウザ内で完結します。

画像から色を抽出

方法2：ブラウザのスポイト（Chrome開発者ツール）

調べたい色がサイト上にある場合——ページの背景、ボタン、ロゴなど——Chromeには標準でその手段が備わっています。

  1. 対象のサイトをGoogle Chromeで開きます。
  2. F12 を押します（右クリックして「検証」を選んでも同じです）。
  3. 開発者ツールの左上にあるカーソルのアイコンをクリックします（ Ctrl+Shift+C でも同じです）。
  4. ページ上の要素にマウスを重ねると、CSSのプロパティが表示されます。色もHEXかRGBで確認できます。
  5. CSSパネルで色の値の隣にある四角をクリックすると、視覚的なカラーピッカーが開きます。

Chromeの開発者ツールには カラーピッカー も内蔵されています。スタイルパネルの色の四角をクリックすると開き、色相環をたどりながらHEX、RGB、HSL、HSLAの値を同時に確認できます。

方法3：Canvaのスポイト

Canvaで作業中に、すでに配置してある画像から色を拾いたい場合の手順です。

  1. 色を変えたい要素（テキスト、図形、背景など）を選択します。
  2. サイドパネルでその要素の色をクリックし、カラーピッカーを開きます。
  3. ピッカー内のスポイトのアイコンをクリックします。
  4. キャンバス上の画像の任意の場所をクリックすると、そのピクセルの色がそのまま取れます。
  5. HEXコードはピッカーの入力欄に表示されます。

方法4：PhotoshopとIllustratorのスポイト

Photoshop

画像を開いた状態で スポイトツール （ショートカットは Iキー）を選びます。画像の任意の場所をクリックすると、拾った色がツールパネルのカラーボックスに表示されます。HEXコードを見るには、そのカラーボックスをダブルクリックしてカラーピッカーを開いてください。右下の欄にHEX値が出ます。

Illustrator

ファイルを開いてオブジェクトを選択し、ツールパネルの塗りか線の色をクリックします。開いたカラーピッカーの下の欄にHEXコードがあります。あるいは スポイトツール （ショートカットは Iキー）で、カンバス上のどこからでも色を拾えます。

方法5：ブラウザ拡張機能のColorZilla

ColorZilla （ChromeとFirefoxに対応）は、ブラウザに常設のスポイトを追加する拡張機能です。入れておくと次のことができます。

サイトから色を拾う機会が多い人には、毎回開発者ツールを開かずに済むこの方法がいちばん実用的です。

方法6：スマホの色取得アプリ

壁の色、商品の色、パッケージの色といった現物の色を調べたいときや、スマホの中の画像から拾いたいときには、専用のアプリがあります。

調べたコードの使い方

HEXコードが分かったあと、よくある使い道は次のとおりです。

CSS・ウェブ制作で

コードにそのまま書きます。 color: #3ecf8e; ou background-color: #3ecf8e;明るい版や暗い版を作りたいときはHSLが便利です。HEXの値を手で計算するより、明度を動かすほうがずっと直感的です。

Canva、Figma、Adobeで

要素の色の入力欄にHEXコードを貼り付けるだけです。主要なデザインツールはどれもHEXをそのまま受け付けます。

配色一式に広げる

基準の色が決まったら、 パレット が補色・類似色・トライアド・モノクロマティックの組み合わせを自動で作ります。HEX、RGB、HSLのコードがそのまま制作に持ち込める形で出てきます。

印刷で使う

入稿の前にHEXをCMYKへ変換してください。画面の色（RGB/HEX）と印刷の色（CMYK）では再現できる範囲が違うため、モニターで同じに見えても刷り上がりでは差が出ることがあります。Adobe IllustratorやAffinity Designerなら、印刷用に書き出す際に自動で変換してくれます。

拾った色が思っていた色と違うことがある理由

見落とされがちな点があります。写真では、ある面の色が完全に均一であることはまずありません。一見べた塗りの青に見えても、照明、JPGの圧縮、カメラのノイズによって、ピクセルごとに何十もの微妙な差が生じています。スポイトが拾うのは特定のピクセルの その色そのもの であって、あなたが掴もうとしている「全体としての青」とは少しずれていることがあるのです。

写真の面から色を取るなら、1ピクセルを拾うのではなく、領域の 代表的な色 を計算してくれる抽出ツール——たとえば 色を抽出 ——を使うのが確実です。より実態に近い色が得られ、そのままデザインに使えます。

よくある質問

コードを見ずにサイトの色を調べるには？
ChromeかFirefoxにColorZillaという拡張機能を入れてください。有効にした状態でサイトの任意の場所をクリックすれば、そのピクセルのHEXコードが取れます。開発者ツールを開く必要も、CSSの知識も要らない、いちばん速い方法です。
競合のロゴの色を正確に知るには？
相手のサイトに載っているなら、開発者ツール（ChromeならF12）のスポイトかColorZillaを使います。ロゴの画像しか手元にない場合は、ImageToolsの色を抽出ツール、あるいはCanvaやPhotoshopのスポイトが使えます。なお、きちんと作られたロゴには色の規定があるのが普通なので、公式な値が欲しいならその会社のブランドガイドラインを探すのが確実です。
HEXとRGBの違いは？両方必要ですか？
HEXとRGBはまったく同じ情報を、違う書き方で表しているだけです。HEXの #3ecf8e とRGBの 62, 207, 142 は同じ色を指します。ウェブ制作やCSSではHEX（短く、もっとも一般的）を、3つのチャンネルを別々に求められる場面——一部の印刷サービスや編集アプリなど——ではRGBを使います。相互の変換はどのツールでも一瞬で済みます。
スマホで撮った写真の色を調べるには？
手軽なのはImageToolsの色を抽出ツールです。スマホのブラウザでサイトを開き、写真をアップロードすれば、主要な色のHEXコードが並びます。ほかにも、写真をCanvaに読み込んで編集画面のスポイトを使う方法があります。
有名ブランドの色を自分のデザインに使ってもいいですか？
色コードそのものに著作権はなく、色を独占できる人はいません（エルメスのオレンジやルブタンの赤のように、色が商標登録されている稀な例外はあります）。保護されるのはロゴや、まとまりとしてのブランドの見た目のほうです。有名ブランドと似た色を使うかどうかは法律の話ではなく戦略の話ですが、混同を招いたり、意図しない連想を持たれたりする危険はあります。
写真から配色を組み立てるには？
色を抽出 で写真の主要な色を割り出し、そこから主役の1色を選んで パレット にかけると、調和のとれた組み合わせが作れます。参考にした写真からブランドの見た目を起こすときによく使われる手法です。