🌈 カラーパレット抽出

使い方の手順

1. 画像を選ぶ 写真、イラスト、スクリーンショット、デザイン案など何でも構いません。読み込むとすぐに色が一覧表示され、実行ボタンを押す必要はありません。
2. 抽出する色数を決める 実用的なのは5〜6 色です。主色・補助色・アクセント・背景・文字と一式そろい、選びきれないほど多くもなりません。ムードボード用途なら 10〜12 まで増やせます。
3. 抽出方法を選ぶ 主要色は面積順で、画像の見た目の印象に忠実です。鮮やかは彩度の高い色を前に出します。風景写真のなかの赤い花 1 輪は、主要色では無視され、鮮やかでは拾われます。
4. 色見本をクリックしてコピー 色見本をクリックすると HEX がクリップボードにコピーされます。その下にはスタイルシートへそのまま貼れる CSS 変数のブロックもあります。
5. カラーカードを書き出す（任意） 実行すると、元画像のサムネイルと各色の HEX・RGB を載せた PNG が生成されます。案件の配色資料として保存したり、そのままクライアントに送ったりできます。

こんなときに使えます

自分で選ぶより抽出したほうがよい理由

ゼロから配色を組むのは難しい作業です。色は単体の良し悪しではなく、組み合わせたときにどう見えるかで決まるからです。気に入った写真から色を取れば、すでに共存が実証された組み合わせをそのまま受け継げます。それらの色は、もともと 1 つの画面のなかで調和して存在していたものだからです。

デザイナーが写真・映画のワンシーン・パッケージから配色を取るのはこのためです。手抜きではなく、現実の光と素材そのものが整合の取れた色関係を生み出しているからです。

何色取るのが実用的か

5〜6 色がちょうどよく、インターフェースの配色を一式そろえるのに十分です。

• 主色 1 つ（ボタン、リンク、強調）
• 補助色 1〜2 つ（サブ要素）
• アクセント 1 つ（警告、タグ、小さな差し色）
• 暗色 1 つ（文字）と明色 1 つ（背景）

8 色を超えると、互いに近すぎて役割を割り当てにくい色が出てきます。10 色以上にするのは、ムードボードや全体の色分布を見たいときだけで十分です。

抽出したあとにやること

そのまま使うにはもう一歩足りないのが普通です。写真から取った色は彩度や明度がインターフェース向きでないことが多く、暗すぎて読みにくい文字色や、目が疲れるほど鮮やかな背景になりがちです。実務では抽出結果を色相の出発点と捉え、用途ごとに明度と彩度を調整して階調を作ります。

コントラストの確認も忘れずに。文字と背景のコントラスト不足はアクセシビリティでもっとも多い問題であり、同じ写真から取った 2 色が偶然基準を満たす確率はさほど高くありません。

よくある質問

次に使いそうなツール

画像の作業は一度で終わらないことがほとんどです。「カラーパレット抽出」とよく一緒に使われるのはこちら：

• 🔗 画像を Base64 に — Data URI・CSS・HTML を生成
• 💧 透かしを追加 — 位置と透明度を調整できる文字透かし
• 🗜️ 画像を圧縮 — 画質を保ったままファイルを縮小

仕上げたものをそのまま共有しますか？アップロードなら画像・写真・動画を短縮リンクにでき、パスワード・有効期限・閲覧回数の上限も設定できます。ツール一覧もどうぞ。