写真から色を抽出してカラーコードを取る

資料に貼った写真と見出しの色がそろわず、なんとなく浮いて見えることがあります。 画像から色を抽出に写真を入れると、使われている色がカラーコードで並びます。

画面を拡大して色を目で読み取る必要はありません。 ここでは読み込みからコピーまで、画面を見ながらたどります。

「この色、何色？」でつまずく場面3つ

1. 写真に合わせた文字色が決まらない。 スライドに写真を貼ったあと、見出しの色を勘で選ぶと浮きます。写真の中の色をそのまま使えば、少なくとも喧嘩はしません。

2. ロゴの指定書が見当たらない。 手元にあるのは画像だけ、という状況はよくあります。画面を拡大して目で読むと、隣の画素と1段ずれた色を拾ってしまいます。

3. 自動で出た色が全部グレーだった。 写真は空や白い壁が広い面積を占めます。面積の多い順に色を選ぶ道具にかけると、上位が無彩色で埋まって使い道がありません。

画像から色を抽出の使い方

1. 画像を読み込む

枠をクリックするか、画像をドラッグして落とします。 JPEG・PNG・WebPに対応していて、上限は50MBです。

2. 並んだ色を確かめる

読み込むとすぐ、主要な色が多い順に並びます。 それぞれに占有率とRGB、そして「この色の上に白と黒どちらの文字が読めるか」が付きます。

先頭に「無彩色（白・黒・グレー）は1色にまとめています。」と出ています。 空や雲でカードが埋まらないよう、白っぽい色をひとまとめにした結果です。

3. 小さな差し色はスポイトで拾う

面積の小さい色は一覧に入りません。 そういう色は、プレビューのその位置を押して直接取り出します。

日差しのオレンジは全体の1%ほどしかないので、一覧には現れません。 それでも見た目の印象を作っているなら、こちらで拾えば済みます。

マウスが使いにくいときは、プレビューにフォーカスして矢印キーで動かせます。 Shiftを押しながらなら1画素ずつ、押さなければ大きめに動きます。

4. 必要なら色数や並び順を変える

「詳細設定」を開くと、抽出する色数を3〜10色の範囲で決められます。 並び順も、多い順・暗い順・色相順から選べます。

「画像にある色に合わせる」は既定で入っています。 これを入れておくと、一覧の色とスポイトで拾った色が食い違いません。

5. カラーコードを写す

各カードの「コピー」で1色ずつ、下の「一括コピー」で全色をまとめて写せます。 形式はHEX・RGB・CSS変数の3つです。

CSS変数を選ぶと、そのまま貼れる宣言の並びになります。 「パレット画像を保存」を押せば、色帯とHEXを焼いた1枚のPNGが手元に残ります。

使用例

たとえば、社内向けの報告資料を作っている担当者。 表紙に使う写真は決まったのに、タイトル文字と帯の色が決まりません。

写真を読み込むと、海の濃い青が20%、砂浜のベージュが21%と出ます。 濃い青を帯に使い、その上の文字は「白文字が読めます」と出ているので白にします。

タイトルの下に細い線を引きたくなったら、ベージュを使います。 写真の中にある色だけで組み立てるので、後から見ても違和感が出ません。

スマートフォンでも同じように使えます

画面が狭いときはカードが1列に並びます。 写真を押してスポイトを使う操作も、指でそのまま行えます。

読み込んだ画像は端末の中だけで処理します。 撮ったばかりの写真や、公開前のデザインカンプでも手元から出ません。

取り出したあとに使うツール

• カラーコード変換 — HEXをRGBやHSLに直したいとき
• コントラスト比チェック — 文字色と背景色の組み合わせを数値で確かめたいとき
• CSSグラデーション生成 — 取り出した色でグラデーションを作りたいとき

配色の決め方そのもので迷っているなら、プレゼン資料の配色の決め方も合わせてどうぞ。

まとめ

画像から色を抽出は、写真やイラストの色をカラーコードとして取り出すツールです。 白やグレーを1色にまとめるので、写真でも色みのある色が残ります。

一覧に出るのは画像に実在する色なので、スポイトで拾った色と食い違いません。 面積の小さい差し色だけは、プレビューを押して直接取り出してください。