画像パレット抽出

画像に使われている主な色を取り出し、割合とカラーコードを一覧にします。画像は端末の外に出ません。

ここへドロップ、または Ctrl/Cmd+V で貼り付けもできます。

コントラスト比を測る背景色

CSS変数


        
JSON配列

      

      
k-means法で画素をまとめた平均色です。OKLab色空間で近さを測り、初期値は決定的に選ぶので、同じ画像と色数なら毎回同じ結果になります。半透明より薄い画素（不透明度50%未満）は数えません。コントラスト比はWCAG 2の式で、AAは本文4.5以上、大きな文字3以上が目安です。

    

  

  




画像パレット抽出でできること
写真やイラストから主な色を3〜12色取り出し、各色の割合とHEX・RGB・HSLを一覧にします。デザインの配色づくりや、画像に合わせたテーマ色選びに使えます。
使い方
  1. 「画像を選ぶ」でファイルを選びます。画像の枠へのドロップや、Ctrl/Cmd+Vの貼り付けでも読み込めます。開いた時点ではサンプル画像の結果が出ています。
  2. 「色数」のスライダーで3〜12色に調整します。割合の多い順に色が並びます。
  3. 各色のHEX・RGB・HSLのボタンを押すと、その値をコピーできます。
  4. 「コントラスト比を測る背景色」で白、黒、最多の色、または任意の色を選び、各色のコントラスト比を確認します。
  5. 「CSS変数をコピー」「JSON配列をコピー」で全色をまとめて持ち出せます。
計算の仕組みと注意点
よくある質問
画像はサーバーにアップロードされますか？
されません。読み込みも色の計算もブラウザの中だけで行います。通信を切った状態でも、ページを開いたあとなら使えます。
同じ画像なのに別のツールと色が違うのはなぜですか？
色のまとめ方と色空間によって結果が変わるためです。このツールは見た目の近さに合わせたOKLabで計算します。「色数」を増やすと、小さな面積の色も分かれて出やすくなります。
指定した色数より少なく表示されました。
画像の色の種類が指定した色数より少ないと、取り出せる数だけ表示し、その旨をメッセージで知らせます。単色のロゴなどで起こります。
抽出した色を文字色に使えるか確認できますか？
「コントラスト比を測る背景色」で背景を選ぶと、各色の比と AA・AAA などの目安、Aa の見本が出ます。4.5:1以上なら本文に使える目安です。