Skip to main content

マテリアルデザインカラーパレット すべてのシェードやアクセントを含む、マテリアルデザインの完全なカラーパレットを閲覧します。

マテリアルデザインカラー illustration
🎨

マテリアルデザインカラー

すべてのシェードやアクセントを含む、マテリアルデザインの完全なカラーパレットを閲覧します。

1

ファミリーの選択

Red、Blue、Tealなどのカラーファミリーを選択します。

2

シェードの閲覧

50(最も明るい)から900(最も暗い)までのすべてのシェードとアクセントバリアントを表示します。

3

カラーのコピー

任意のシェードのHEXコードを1クリックでコピーできます。

Loading tool...

What Is マテリアルデザインカラー?

Material Design Colorsは、GoogleのMaterial Designカラーシステムを完全に網羅したリファレンスです。19の色ファミリーと50から900までのシェード、およびアクセントバリアント(A100〜A700)が含まれています。Material Designパレットは、ユーザーインターフェイス設計用にバランスの取れた包括的なカラーセットを提供するためにGoogleによって慎重に作成されました。各色ファミリーには、非常に明るい(50)から非常に暗い(900)までの範囲があり、アクセントシェードは強調要素用に活発で飽和したバリアントを提供します。このパレットはアクセシビリティを念頭に置いて設計されており、隣接するシェード間には明確なコントラストが存在します。Androidアプリ開発、Material UI(React)、Angular Material、Flutter、およびMaterial Designガイドラインに従ったWebアプリケーションで広く使用されています。このツールでは、ファミリー別に閲覧したり、視覚的なストリップですべてのシェードを表示したり、アクセントカラーのHEXコードをコピーしたりできます。

Why Use マテリアルデザインカラー?

  • すべての19ファミリーが含まれた完全なMaterial Designパレット
  • 50-900およびアクセントバリアント(A100-A700)
  • 視覚的なカラーファミリーセレクターと迅速なナビゲーション
  • すべてのバリアントを一目で確認できるシェードストリップ
  • すべてのカラーに対する1クリックコピー

Common Use Cases

Android開発

Googleの設計ガイドラインに従って、Material Designカラーを選択します。

Material UI(React)

MUIテーマのカスタマイズに必要な正確な色値を見つけます。

Flutter開発

自信を持って、Material Designカラーを選択します。

Webデザイン

公式のカラーパレットを使用して、Material Designにインスパイアされたウェブサイトを作成します。

Technical Guide

Material Designカラーシステムは構造化された命名規則を使用しています: ファミリー名 + シェード番号。各ファミリーには10個の標準シェード(50、100、200...900)と最大4つのアクセントシェード(A100、A200、A400、A700)があります。標準シェードは非常に明るい(50、背景用途向け)から非常に暗い(900、テキスト用途向け)まで進みます。アクセントシェードは浮動作用ボタン、インタラクティブ要素、および強調表示用の高彩度バリアントとして設計されています。不所有ファミリーにはアクセントが含まれていません。Brown、Grey、Blue Greyなどの中性色には、アクセントバリアントがないためです。カラーはMaterial Design 3(Material You)で使用されているHCT(Hue、Chroma、Tone)カラースペースを使用して設計されており、これによりHSLよりも認知的に一貫したカラーランプが提供されます。パレットでは、500シェードと白テキストの間、および明るいシェードと暗いテキストの間にWCAG AAコントラストが確保されています。

Tips & Best Practices

  • 1
    シェード500は各ファミリーの「プライマリ」シェードです - 基本として使用します
  • 2
    50-200のシェードは背景やサーフェスに適しています
  • 3
    600-900のシェードは、明るい背景におけるテキストに適しています
  • 4
    アクセントシェード(A100-A700)は、FABやリンクなどの強調要素に使用します
  • 5
    Material Design 3では、ユーザーの壁紙からダイナミックカラーを生成する - Material Youの更新情報を確認してください

Related Tools

Frequently Asked Questions

Q これは最新のMaterial Designパレットですか?
このツールにはMaterial Design 2パレットが含まれています。Material Design 3(Material You)は、ユーザーの壁紙から生成されたパレットを使用するダイナミックカラーテーミングを導入していますが、クラシックパレットは依然として標準的な参照です。
Q なぜブラウン、グレー、ブルーグレイにはアクセントシェードがないのですか?
これらは中性色ファミリーです。アクセントは高彩度で鮮やかなものとして設計されており、中性色の性質と矛盾しています。
Q プライマリボタンにどのシェードを使用するべきですか?
ライトモードでは、通常はシェード500または600が使用されます。ダークモードでは、暗いサーフェス上でシェード200または300を使用します。常にコントラスト比率を確認してください。

About This Tool

マテリアルデザインカラー is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.