画像からカラーピッカー：HEX、RGB、HSL、パレット

デジタル画像の各画素は、赤、緑、青の3つの数値で色を記録しています。カラーピッカーは選んだ場所のその数値を読み取り、デザイナーや開発者が使う形式で表示します。写真、ロゴ、スクリーンショットの正確な色合いを、目分量ではなくそのまま再利用できます。

人の目は周りの色や画面の明るさに簡単にだまされるので、同じに見える2つの色がコードではかなり違うことがあります。ファイル自体から取得すれば推測は不要です。

色の3つの書き方

HEX、RGB、HSLの違いを考えるときは、どれも同じ色を表していることを覚えておきましょう。HEXはWebデザインやほとんどのデザインツールで使われる6文字のコンパクトなコードです。RGBは赤、緑、青の値を0〜255で並べたものです。HSLは色相、彩度、明度で表し、CSSで色の雰囲気を保ったまま明るくしたり暗くしたりするのにいちばん扱いやすい形式です。

画像をボックスにドラッグする、参照する、またはスクリーンショットを貼り付けて追加します。カーソルを画像の上で動かすと、その下の色が下にリアルタイムで表示されます。クリックすると取得できます。取得した色は大きな色見本とHEX、RGB、HSLのコードで表示され、それぞれにコピーボタンがあります。

取得した色はすべて短い履歴に追加されるので、1枚の画像から複数の色を集めて後でコピーできます。履歴の色見本をクリックすると、そのコードが再び表示されます。

コードのコピー

画像からHEXコードをすばやく取得するには、範囲が小さければブラウザを拡大し、正確な画素をクリックして「HEXをコピー」を押します。コードは#で始まり、CSS、Figma、Canvaなどほとんどのツールでそのまま使えます。

画像を追加するとすぐに、ツールが縮小コピーを分析し、クラスタリングで主要な色を見つけます。画像に占める面積の順に最大8色が表示されます。どれかをクリックするとすべてのコードを確認でき、セット全体をHEX値のリストか、スタイルシートにそのまま貼り付けられるCSSカスタムプロパティとしてコピーできます。

写真から作るパレットは、すでに調和の取れた配色をすばやく作る方法です。夕焼け、森、すてきにデザインされた部屋など、実際の風景から色を取っているからです。

ロゴから取得する

ロゴからブランドカラーを調べるには、スクリーンショットや圧縮されたコピーではなく元のファイルを使ってください。色が少しずれることがあるためです。色が背景と混ざる縁ではなく、ロゴの平らな部分から取得しましょう。

パソコンのChrome、Edgeなど、Chromium系のブラウザは画面スポイトに対応しています。「画面上のどこからでも色を取得」を押すと、カーソルが拡大鏡になり、ほかのアプリを含むどのウィンドウの上でも動かせます。クリックで取得、Escキーでキャンセルです。必要な色が動画、デザインアプリ、Webサイトにあるときに便利な、画面用のカラーピッカーです。

FirefoxとSafariはまだこの機能に対応していないため、ボタンは表示されず、代わりにアップロードした画像から取得できます。スマホでは、スクリーンショットを撮ってここに貼り付けるか選んでください。

写真と平面的なグラフィック

写真にはノイズやグラデーションがあるので、隣り合う画素でも少し違うことがあります。写真を代表する色を知りたいなら、似た画素を平均するパレットのほうが1つの画素より適していることがよくあります。ロゴや平面的なグラフィックなら、1回のクリックで正確です。

カラープロファイルと画面

コードは、ブラウザがデコードした画像データから取得しています。とても広い色域の画像は画面によって少し違って見えることがありますが、Webやデザインツールで色を再現するのに必要なのはこのコードです。

圧縮された画像

強く圧縮されたJPEGは、縁の周りにブロック状のノイズが出ます。平らな部分の中央から取得するか、あれば高画質版の画像を使ってください。

画像はブラウザのメモリ内にとどまり、アップロード、記録、保存されることはありません。JPG、PNG、WebP、GIF、BMPファイルに対応し、パレットを作るときは透過部分を無視します。

このツールは無料・回数無制限で、透かしも入らず、EnhancerPro のクレジットも使いません。取得したパレットをロゴやアイコンにしたいなら、ファビコン作成ツールや画像からSVGへの変換ツールが次のステップにおすすめです。

CSSで色を使う

HEXコードはそのまま色のプロパティに貼り付けるか、パレットをCSS変数としてコピーして var(--color-1) で参照します。HSLの値なら、明度のパーセントを上げるだけで淡い色を簡単に作れます。

強い1色から始める

良い配色のほとんどは、ロゴや主要な写真から取ったメインカラー1色から始まります。ここで取得したら、背景と文字用に明るい無彩色と暗い無彩色を決めましょう。HSLならこれが簡単です。色相と彩度はそのままに、明度を上げれば背景用の淡い色、下げれば深いアクセントカラーになります。

パレットから補助色を

抽出したパレットには、たいてい鮮やかな色が1〜2色と、落ち着いた色がいくつか含まれます。落ち着いた色は背景、枠線、サブのボタンに、鮮やかな色は行動を促すボタンや強調に向いています。同じ写真から取った色なので、自然になじみます。

コントラストを確認

文字は誰にとっても読みやすくなければなりません。淡い色に暗い文字、深い色に白い文字ならたいてい大丈夫です。公開前に、特にボタンや小さな文字は、大事な組み合わせをコントラストチェッカーで確認しましょう。写真では力強く見える色も、白いページの文字には薄すぎることがあります。

記録を残す

最終的なコードはスタイルガイドかCSS変数として保存しましょう。パレットをCSSカスタムプロパティとしてコピーすれば、primary、accent、surface のように名前を付け替えられる出発点になり、サイトのどのページでもまったく同じ色合いを使えます。

印刷用の色

画面の色はRGB、プリンターはCMYKのインクを使います。ここのコードは画面には最適ですが、印刷物の場合は印刷会社に変換を頼むか、印刷した色見本に合わせてもらってください。画面の鮮やかな色の中には、正確に印刷できないものもあります。

チームで色を共有

デザイナー、開発者、クライアントは、色をそれぞれ違う形で伝えがちです。デザインファイルではHEXコード、スライドではRGB値、スタイルシートではHSL値。同じ取得結果から3つすべてをコピーすれば、手作業で値を変換するときに紛れ込む小さなずれを防げます。コードを元の画像と一緒にプロジェクトのメモに貼っておけば、誰でも各色の出どころがわかり、パレットを調整するときにもう一度取得できます。

季節や雰囲気のパレット

写真は雰囲気の宝庫です。秋の紅葉ならオレンジや深い赤、海辺の風景なら砂のような中間色とターコイズ、夜の街ならネオンをアクセントにした深い青。表現したい雰囲気に合う写真を何枚か選んでパレットを抽出し、何度も現れる色を残しましょう。その繰り返し現れる組み合わせが、たいてい力強く統一感のある配色になります。