再利用したい色が目に留まる。写真、気に入ったサイトのスクリーンショット、元ファイルがとうに消えた古いロゴの中に。そして必要なのは推測ではなく実際のHEXコードです。目測は決してうまくいきません。モニターは嘘をつき、「あの青」は実は少しずつ違う6つの青です。ピクセルから直接パレットを引けば、CSS、デザインツール、ブランド資料に貼れるコードが手に入ります。
そのやり方と、ピクセルの適当な寄せ集めではなく実際に使えるパレットを得る方法を紹介します。
「パレットを抽出する」とは実際何をするのか
ツールは画像を走査し、それを最もよく代表する色、つまり支配的な色調と目立つアクセントを見つけ、それぞれをコピーできるHEXコードとして渡します。100万個の個別のピクセル色ではなく、画像を要約した整ったセット（たとえば5個か8個）が得られます。
これはいくつかのよくある仕事に本当に役立ちます。
- 元の仕様がないとき、ロゴや古い素材からブランドカラーを復元する。
- 雰囲気を合わせたい写真、風景、商品写真、アート作品からデザインパレットを組む。
- スクリーンショットしか持っていない既存のサイトやグラフィックに色を合わせる。
- すでに使っている画像と調和する背景やアクセントを選ぶ。
画像を放り込んでコードを読み取りましょう。
数のコントロールで使えるパレットにする
最も重要な設定は、いくつ色を引くかです。それが答えをまるごと変えます。
- 少なめの色（3〜5）は、本質的なパレット、つまり画像を定義する一握りの色調をくれます。ブランディングやデザインシステムにたいてい欲しいのはこれで、詰まったセットは制約ではなく利点です。
- 多めの色（8〜12）は微妙なアクセントやグラデーションを捉えます。画像が豊かで多彩で二次的な色調も欲しいとき、あるいは写真がどう構成されているか正確に研究したいときに便利です。
最初の結果がしっくりこないなら、1つの色調が支配している、欲しかったアクセントが統合されて消えた、というときは、数を調整して読み直しましょう。80%が空の写真は、数が少ないと大量の青を渡します。数を上げれば、より小さな色の弾けが浮かび上がります。
クリックでコピー — 肝心な手順
HEXコードを読んで打ち込むところに誤りが忍び込みます（#3A7BD5対#3A7BD6で、なぜおかしく見えるのか10分悩む）。カラーパレットツールでは、各色見本がクリックでそのHEXコードをコピーするので、キーボードに触れずに画像からクリップボード、そしてスタイルシートへ直行できます。
実用的な流れ。
- 画像を読み込む。
- 仕事に合わせて数を設定する。ブランドパレットには低く、アクセントを捉えるには高く。
- 欲しい色見本をそれぞれクリックし、行き先に貼る。
- 範囲が足りない？数を少し動かして追加を取る。
デザイナーの目で結果を読む
パレットがうまく着地するよう、知っておく価値のあること。
- 支配的な色が常に役立つとは限らない。 白背景の商品写真は、大量の白か白に近い色を報告します。正確ですが、本当に気にかける色は商品です。数を上げて引き出すか、まず被写体に切り抜きましょう。
- 写真は見た目より多くの色を持つ。 肌、影、反射が、意識しなかった色調を足します。数が高いとそれらが現れ、低いと平均の後ろに隠れます。
- HEXは持ち運べる。 コピーするどのコードも、CSS、Figma、Photoshop、Canva、ブランド資料で直接使えます。変換不要です。
なぜブラウザに留まるのか
抽出全体がローカルで動きます。画像はCanvasを使ってブラウザ内で読まれて分析され、決してサーバーにアップロードされません。「画像」が未公開のモックアップ、クライアントの非公開ブランド素材、適当なウェブツールに投稿すべきでない社内スクリーンショットのときに大事です。無料で、登録不要で、初回アクセスのあとオフラインで動きます。
色を取り、クリックしてコピーし、あるべき場所に貼りましょう。