Material Designのカラーパレット
GoogleのMaterial Designの考え方に沿ったパレットです。主役のプライマリーカラー、アクセント用のセカンダリーカラー、中間色の面、文字や高さの表現に使うグレースケールで構成します。
パレットの例
プライマリー#1976D2
明るいプライマリー#42A5F5
サーフェス#FAFAFA
セカンダリー#FFA000
サーフェス上の文字#212121
16進数コードをすぐにコピー
画面のための配色
伝統的な配色が色相を中心に考えるのに対し、Materialはプライマリー、セカンダリー、サーフェス、サーフェス上の色、エラーといった役割で考えます。各色に役割があるため、そのままデザインシステムのトークンに落とし込めます。
コントラストと高さ
Materialでは文字と背景のコントラスト比を4.5:1以上にします。高さの違いは、影を重ねるだけでなく、面を段階的に明るくして表現します。影が見えにくいダークテーマでも役立つ方法です。
material designのパレットを生成
無料・登録不要