Material Design カラーパレット

HEXコード、CSS変数、コントラストチェック付きの19カラーファミリー。クリックでコピー。

CSS をダウンロード

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
白文字 {{ whiteContrast.toFixed(1) }}:1
黒文字 {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

Material Design カラーシステムとは？

Google の Material Design カラーシステムは、19 のカラーファミリーを含み、それぞれ 10 の主要シェード（50、1〜900）と最大 4 つのアクセントシェード（A100〜A700）があります。ウェブサイトやアプリに一貫したカラー言語を提供します。

CSS で Material Design カラーを使うには？

すべての変数を含む CSS ファイルをダウンロードしてプロジェクトに含めます。その後、var(--color-md-teal-500) のような CSS カスタムプロパティで色を使用できます。

色選びのコツ

  • プライマリカラー（例: Teal 500）と別のファミリーからアクセントカラーを選びましょう。
  • 明るいシェード（50〜200）を背景に、暗いシェード（700〜900）をテキストに使いましょう。
  • アクセシビリティのために、テキストと背景の間に十分なコントラスト（最低 4.5:1）を確保しましょう。
  • 500 シェードは各カラーファミリーの標準表現で、プライマリカラーとして最適です。