代表的な色を含む鮮明な画像を使うと、より役立つパレットを作成できます。

画像からカラーパレットを抽出

JPG、PNG、または WebP 画像を選択し、その主要な色を抽出します。

抽出方法

類似したピクセルがグループ化され、頻度によってランク付けされ、実用的な支配的なパレットが作成されます。

抽出方法

抽出されたパレットにはどの色が含まれますか?

このパレットは、すべてのピクセル値をリストするのではなく、目に見える主要な色を強調します。類似したピクセルがグループ化され、代表的な色が頻度によってランク付けされるため、出力はテーマ、参考資料、イラスト、デザインの探索に実用的になります。アクセントの方が人間の注意を引く場合でも、大きな背景は通常、小さなアクセントよりも優先されます。結果はイメージの概要であり、完全なカラー インベントリや完成したデザイン システムではありません。保持するスウォッチを選択するときは、プレビューとソース イメージを一緒に使用します。

透明度はパレット抽出にどのような影響を与えますか?

完全に透明なピクセルは、目に見えるソース カラーに寄与しないため無視されます。半透明のピクセルは、保存されている色と可視性に従って、代表的な結果に影響を与える可能性があります。したがって、暗い背景用にデザインされたロゴは、白でプレビューすると異なって見えるスウォッチを生成する可能性があります。最終パレットを特定の背景で使用する場合は、最初にそのコンテキストで画像を合成またはプレビューし、次にパレットの役割を割り当てる前にコントラストとエッジの色を確認します。

パレットが最初に気づいた色と異なるのはなぜですか?

抽出機能は、類似した色合いをグループ化した後、画像内で色が占める割合に基づいて色をランク付けします。人間の注意力は、コントラスト、彩度、主題の重要性、顔、コンテキストにも影響されるため、小さな明るいアクセントは、大きな落ち着いた壁よりも目立つように感じられる場合がありますが、それでもピクセル周波数ではランクが低くなります。グラデーション、影、照明、圧縮ノイズ、アンチエイリアス、および多くのほぼ同一の色合いによって、代表的なものが変化する可能性があります。出力を測定された開始点として扱い、設計目標に合わせて調整します。

画像パレットを使用可能なデザインパレットに変えるにはどうすればよいですか?

抽出されたすべてのスウォッチを均等に使用するのではなく、役割を割り当てることから始めます。背景、主なテキストの色、表面の色、主なアクセント、およびオプションの副アクセントを選択します。画像の分離が不十分な場合は、重複に近いものを削除し、明度または彩度を調整します。コントラスト チェッカーでテキストと重要なグラフィックをテストし、グレースケールでパレットをチェックし、孤立したカラー チップではなく実際のコンポーネントをプレビューします。魅力的な写真には、絵としては一緒に機能する色が含まれている場合がありますが、小さなテキストやコントロールに使用すると失敗します。

最も有用なパレットを提供するソース画像はどれですか?

パレットで表現したい雰囲気、照明、主題を代表する画像を選択してください。無関係な境界線、スクリーンショット、透かし、または大きな背景が目立つ必要がない場合は、それらを切り取ります。意図的なものでない限り、ひどい色かぶり、重いフィルター、圧縮アーティファクト、または混合照明のないソースを優先してください。同じ写真をさまざまに編集すると、異なるパレットが作成されることがあります。一貫したプロジェクトを実現するには、管理された参照画像から抽出し、選択した HEX 値を文書化し、画面全体でテストしてサンプルを印刷します。