カラーコード抽出(画像から色を調べる)

カラーコード抽出ツールは、画像の中の好きな点をタップして、その色のカラーコード(HEX・RGB・HSL)を調べる無料ツールです。 写真全体からよく使われている色を自動で選び出す「代表色パレット」と、コードを打ち込んで別の形式に直す変換機能もあります。

調べた色は、PowerPoint や Excel の「その他の色」、Canva などのデザインツール、Web ページの CSS にそのまま入力できます。 ネイルサロンや手芸店に「この色」と伝えたいとき、ブランドロゴの色を資料に合わせたいときにも使えます。

画像から色を調べるには?

カラーコード抽出ツールに画像を読み込み、調べたい場所をタップします。その点の色が HEX・RGB・HSL の 3 形式で表示され、ボタンでコピーできます。

1. 「画像をアップロード」を押して写真やスクリーンショットを選びます。パソコンなら画像をドロップしても読み込めます。
2. 読み込んだ直後は画像の中央の色が選ばれています。調べたい場所をタップ(クリック)すると、その点の色に切り替わります。
3. パソコンでは、マウスを動かすと左の拡大表示(ルーペ)に周囲 11 × 11 画素が映ります。中央の枠で囲まれた 1 画素が、クリックしたときに取得される色です。
4. HEX・RGB・HSL の横にある「コピー」で、使いたい形式の文字列をコピーします。
5. 画面下の「画像の代表色」には、写真の中で面積の大きい色が多い順に並びます。色数は 4・6・8・12 色から選べ、色をタップすると上の欄に読み込まれます。
6. 手元のコードを別の形式に直したいときは、画像を読み込まずに「コードを入力して変換」へ #2563EB や rgb(37, 99, 235) を入力します。

カラーコード(HEX)の読み方は?

HEX のカラーコードは、赤・緑・青の明るさをそれぞれ 0〜255 の 256 段階で表し、16 進数 2 桁ずつ並べたものです。 先頭の # の後ろの 6 桁を 2 桁ずつ区切ると、左から赤(R)・緑(G)・青(B)の値になります。

16 進数の 2 桁は「上の桁 × 16 + 下の桁」で 10 進数に直せます。A〜F は 10〜15 を表します。 たとえば #2563EB を分解すると次のとおりで、RGB で書くと rgb(37, 99, 235) です。

HEX のカラーコードには 3 桁の短縮形もあります。#F80 は各桁を 2 回ずつ繰り返した #FF8800 と同じ色です。 このツールの変換欄は短縮形も、# を付けない 6 桁も、全角で打った数字も受け付けます。

RGB と HSL はどう違う?

RGB は「赤・緑・青の光をどれだけ混ぜるか」、HSL は「色相(H)・彩度(S)・明度(L)」で色を表す形式です。 同じ色を別の座標で書いているだけなので、どの形式からでも同じ色に戻せます。

HSL が便利なのは、色を少しだけ明るくしたいときや、同じ色味で薄い版を作りたいときです。 色相は色の輪の角度で、0 が赤、120 が緑、240 が青です。 彩度は鮮やかさで、0% にすると灰色になります。 明度は明るさで、0% が黒、100% が白、50% のとき最も鮮やかです。 明度の数字だけを変えれば、色味はそのままです。

RGB から HSL への換算は、R・G・B を 255 で割って 0〜1 にしたうえで、最大値と最小値から求めます。 明度は「(最大値 + 最小値) ÷ 2」、彩度は「(最大値 − 最小値) ÷ (1 − |2 × 明度 − 1|)」、色相は最大値になった成分に応じて 60 度刻みの位置を割り出します。#2563EB では最大値が青の 0.922、最小値が赤の 0.145 なので明度は約 53%、彩度は約 83%、色相は 221 度で、hsl(221, 83%, 53%) になります。

代表的な色を 3 形式で並べると次のとおりです。

Office で使うときは RGB の 3 つの数値を、PowerPoint や Word の「色の設定」→「ユーザー設定」に入力します。 Microsoft 365 の PowerPoint は、2020 年 3 月の更新から同じ画面で HEX のコードも受け付けるようになりました。

代表色はどうやって決めている?

代表色は「メディアンカット法」という減色の手法で選んでいます。 まず画像の全画素を 1 つの箱に入れます。次に、色の幅が最も広い箱を選び、赤・緑・青のうち差の最も大きい成分の中央値で 2 つに割ります。 これを指定の色数になるまで繰り返します。 最後に、それぞれの箱の平均色を代表色とし、箱に入った画素数の割合を面積として表示します。

たとえば、空・砂浜・赤い傘が写った 100 画素の写真で考えます。空は濃いところと薄いところの 2 色が混ざっているとします。

この写真から 3 色を取り出すと、結果は次のようになります。

空の 2 色は 1 つの箱にまとまり、平均の #74B6E4 が面積 50% の代表色になりました。 写真の空は場所ごとに少しずつ色が違いますが、代表色は面全体の平均なので、1 画素だけを拾うより「その面の色」に近い値になります。 色数を増やすと、まとめられていた空の濃淡も別々の色として出てきます。

大きな写真をそのまま数えると時間がかかるため、計算に使う画素は最大 10 万個まで等間隔に間引いています。 長辺 1,600 画素の 4:3 の写真(1,600 × 1,200 = 192 万画素)なら、20 画素に 1 個を数える計算です。 間引いても面積の大きい色ほど多く拾われるので、面積の割合はほぼ保たれます。拾われにくいのは、数画素の幅しかない細い線や小さな点の色です。 透明な部分(PNG の背景など)は数えません。

「近い色名」はどう決めている?

近い色名は、W3C の仕様書「CSS Color Module Level 4」で定められた名前付き色から、よく使う 56 色と比べて最も近いものを表示しています。#2563EB なら ロイヤルブルー(royalblue、#4169E1)が最も近い色です。

色名との近さは、RGB の差を人の目の感じ方に合わせて重み付けした距離で測っています。 人の目は緑の差に敏感で、青の差には鈍いためです。単純に R・G・B の差を足し合わせると、暗い青と黒を取り違えやすくなります。 色名は目安として使い、正確な色の指定には HEX や RGB の数値を使ってください。

写真から取った色が見た目と違うのはなぜ?

写真の色は、被写体そのものの色に照明の色とカメラの補正が重なったものだからです。 白い壁も、電球の下では黄色っぽく、日陰では青っぽく写ります。 このツールは画素の値をそのまま返します。写真の色と実物の色は、必ずしも一致しません。

• 1 画素ずつのぶれ: JPEG で保存した写真は圧縮のノイズで、隣の画素と数値が数ずつずれています。面の色を知りたいときは、代表色のパレットから選ぶと安定します。
• 境目の色: 文字やロゴの輪郭は、背景色となめらかに混ざった中間色になっています。ロゴの色を調べるときは、輪郭から離れた内側をタップしてください。
• 画面の表示との違い: 同じコードでも、スマートフォンとパソコンの画面では見え方が少し違います。印刷物の色(CMYK)とも一致しません。

Web ページやアプリの画面の色を調べるには?

画面のスクリーンショットを撮って、このツールに読み込みます。 iPhone と Windows・Mac の標準のスクリーンショットは PNG で保存されます。PNG は JPEG と違って圧縮で色が変わらない形式なので、ボタンや背景のように一色で塗られた部分なら、タップした 1 画素の値がそのままその部分の色です。

スマートフォンのスクリーンショットは長辺が 1,600 画素を超えることが多く、このツールは読み込むときに 1,600 画素まで縮小します。 たとえば iPhone 13 のように長辺 2,532 画素の画像は約 63% に縮むので、一色の面の値は変わりませんが、文字や細い枠線は周りの色と混ざります。 文字の色を知りたいときは、スクリーンショットを画像トリミングで文字の周りだけに切り抜いてから読み込むと、縮小されずに済みます。切り抜くときは出力形式を PNG に切り替えてから保存してください。既定の JPEG のままだと、保存時の圧縮で文字の縁の色が変わります。

読み込めない・色がずれることがあるのはどんなとき?

• 長辺が 1,600 画素を超える画像は、端末のメモリ上限に当たらないよう 1,600 画素に縮小してから読み取ります。縮小で隣の画素と平均されるため、細い線の色は元画像と少し変わることがあります。
• iPhone で撮った HEIC 形式の写真は、ブラウザによって読み込めません。HEIC→JPG変換で JPG にしてから読み込んでください。
• 表示される値は画面表示用の sRGB の値です。印刷用の CMYK 値やペンキ・塗料の色番号には換算していません。

写真の一部だけの色を集めたいときは、先に画像トリミングで切り抜いてから読み込むと、代表色がその範囲だけの色になります。 色数を絞った図案を作りたいときはドット絵図案メーカーも使えます。