マテリアルデザインカラーパレット すべてのシェードやアクセントを含む、マテリアルデザインの完全なカラーパレットを閲覧します。
マテリアルデザインカラー
すべてのシェードやアクセントを含む、マテリアルデザインの完全なカラーパレットを閲覧します。
ファミリーの選択
Red、Blue、Tealなどのカラーファミリーを選択します。
シェードの閲覧
50(最も明るい)から900(最も暗い)までのすべてのシェードとアクセントバリアントを表示します。
カラーのコピー
任意のシェードのHEXコードを1クリックでコピーできます。
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は各ファミリーの「プライマリ」シェードです - 基本として使用します
-
250-200のシェードは背景やサーフェスに適しています
-
3600-900のシェードは、明るい背景におけるテキストに適しています
-
4アクセントシェード(A100-A700)は、FABやリンクなどの強調要素に使用します
-
5Material Design 3では、ユーザーの壁紙からダイナミックカラーを生成する - Material Youの更新情報を確認してください
Related Tools
HEXからRGBコンバーター
HEXカラーコードを瞬時にRGB値に変換。プレビューパネルでライブ表示。
🎨 Color Tools
カラーピッカー
HEX、RGB、HSL、CMYK形式の出力に対応したインタラクティブなカラーピッカー。
🎨 Color Tools
ブランドカラーパレット
50以上の人気ブランドやテクノロジー企業の公式カラーパレットを閲覧できます。
🎨 Color Tools
Tailwind カラーファインダー
任意のHEXコードに最も近いTailwind CSSカラークラスを見つける。
🎨 Color Tools
iOS & Android システムカラー
iOS Human Interface と Android Material Design のシステムカラーを参照します。
🎨 Color ToolsFrequently Asked Questions
Q これは最新のMaterial Designパレットですか?
Q なぜブラウン、グレー、ブルーグレイにはアクセントシェードがないのですか?
Q プライマリボタンにどのシェードを使用するべきですか?
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.