画像配色抽出ツール

パレットのサンプリング方法

画像は小さなcanvasに描画され、ピクセルが読み取られ、色がグループ化されて支配的な色が上位に来ます。縮小コピーからサンプリングするのは意図的です。40メガピクセルの写真でも高速に分析でき、ノイズの多い1つの角が結果を支配するのを防ぎます。すべてローカルで実行されるため、ブランドアセットや未公開アートワークがアップロードされることはありません。

スタイルシートやデザイントークンファイルにそのまま貼り付けられる16進コードが得られます。

抽出したパレットの読み方

抽出された色は出発点であり、完成したシステムではありません。写真の支配的な色は写真的なものであり、その特定の画像の照明やムードを帯びています。これは多くの場合、使いやすいインターフェースパレットに必要なものとは正反対です。出力は画像に何が含まれているかの証拠として扱い、アクセシブルな組み合わせを意図的に選んでください。

出荷前にコントラストを確認してください。スウォッチ行では心地よく見える色の組み合わせでも、本文テキストの可読性しきい値を満たさないことがあり、抽出されたアクセントカラーをボタンラベルの色として使うと、背景とのコントラストがまったく足りないことがあります。

抽出が適さないツールである場合

目標が既存のブランドシステムに合わせることなら、ランダムな写真ではなくブランドファイルからサンプリングしてください。目標が完全なデザインシステムなら、抽出は色相を提供しますが、実際に必要なティント、シェード、スペーシング、セマンティックな役割は提供しません。決定を下すためではなく、決定に情報を与えるために使ってください。