画像の配色

画像からの配色抽出は、UIデザイン、ランディングページ、ブランドのムードボード、CSS変数、SNS用画像、プレゼンテーション、商品ページに便利です。主要色をそろえることで、デザインに統一感を出せます。

ロゴ、スクリーンショット、写真、商品画像、イラスト、参考デザインを読み込むと、生成されたHEX、RGB、HSL、CSSカスタムプロパティをコピーできます。サンプリングはブラウザ内で行われます。

色数とサンプリング精度を選択

簡潔なブランド配色やUI配色には少ない色数を、意味のある差し色が複数ある画像には多い色数を使います。高精度では画像を詳しく調べ、粗い設定では大きなファイルを速く処理できます。透明なピクセルは無視されるため、誤って配色へ加わりません。

抽出結果の使い方

抽出色は主要色の近似値であり、元のデザイントークンや印刷値を保証するものではありません。テキストや操作部品に使う前にコントラストを確認してください。CSSカスタムプロパティをコピーするか、編集用の .css ファイルをダウンロードできます。