画像から配色抽出
画像からパレットを取り出す
ブラウザ内で処理
画像
結果
結果
まだ画像がありません
画像をドロップすると、ここにパレットが表示されます。
パーセンテージは、その色系統が画像面積のどれだけを占めるかを表します。
写真やロゴ、パッケージを軸にデザインを組むときは、実際の色を数値で見られると格段に楽になります。画像をドロップすれば、主要な色調が16進コードとともに手に入ります。
使い方
- 1 画像をドロップします。
- 2 パレットに含める色数を選びます。
- 3 色見本をクリックすると16進コードがコピーされます。
- 4 あるいは全体を CSS カスタムプロパティとしてコピーします。
よくある質問
色はどう選ばれていますか。
似た色のピクセルをクラスタにまとめ、各クラスタの平均色を代表として返します。もっとも多いピクセル値そのものではなく、代表的な色調がいくつか得られるのはそのためです。
色は何色抽出すべきですか。
5色が使いやすい初期値です。おおよそ背景・前景・アクセント・補助2色にあたります。8色を超えると、ほとんど同じ色が並んでパレットとして役に立たなくなりがちです。
パーセンテージは何を表していますか。
画像の面積のうち、その色のクラスタが占める割合です。40%の色は画像を支配し、3%の色は小さなアクセント。ボタンに使いたいのは、たいてい後者です。