マテリアルデザイン カラーパレットジェネレーター
Googleのマテリアルデザインガイドラインに基づいた美しいカラーパレットを作成できます。プライマリカラーとアクセントカラーを選ぶだけで、テーマ一式が生成されます。
パレットジェネレーター
生成されたパレット
マテリアルデザイン カラーパレット全体
マテリアルデザインのカラーをすべて閲覧できます。色をクリックするとHEXコードをコピーできます。
赤
ピンク
紫
青
緑
オレンジ
ティール
アンバー
使い方のヒント
- 500番の階調をプライマリカラーとして使用
- 700番の階調を、アプリバーなど濃い色が必要な箇所に使用
- アクセントカラー(A200、A400)をフローティングアクションボタンや強調表示に使用
- アクセシビリティのため、適切なコントラスト比を確保
プロ仕様のマテリアルデザイン カラージェネレーター
Google Material Design 3のカラーシステムをフル活用。Material Youパレット、公式カラートークン、プロ向けの書き出しオプションで、最新のUI開発やAndroidアプリデザインに対応します。
当サイトのマテリアルデザインジェネレーターが選ばれる理由
本ツールなら、Material Design 3のカラーシステム全体に加え、Material Youのダイナミックテーマ、Google公式のカラートークン、プロ向けの書き出し形式まで幅広く利用できます。
- Material Design 3 system
- Material You palettes
- Official color tokens
- Dynamic theming
- Multiple export formats
- Developer-ready code
Material Design 3 システムを網羅
プライマリ、セカンダリ、ターシャリカラー、サーフェスバリアント、セマンティックカラーロールを含む階調パレットまで、Material Design 3のカラーシステムを余すことなく利用できます。
Material You ダイナミックテーマ
シードカラーからMaterial Youのカラースキームを生成し、ライト/ダークテーマを自動作成。最新のAndroidアプリに合わせたパーソナライズカラー抽出にも対応します。
開発者向けの書き出しオプション
CSSカスタムプロパティ、SCSS変数、JSONトークン、Android用XMLリソース、Figmaトークン、Flutterテーマデータなど、命名規則に沿った形式で書き出せます。
最適な用途:
- Android app development
- Web applications
- Flutter projects
- Design systems
- UI component libraries
- Material UI theming
使い方:
カラーシステムを選択
Material Design 3のクラシックカラーから選ぶか、シードカラーからMaterial Youパレットを生成できます。
カスタマイズ&プレビュー
階調の値を調整し、ライト/ダークテーマをプレビューして、マテリアルデザインのコンポーネント内での見え方を確認できます。
書き出し&実装
お好みの形式でカラートークンをダウンロードし、開発ワークフローにそのまま組み込めます。
よくある質問
Material Design 3は、カラーロールとセマンティックトークンを強化したGoogleの最新デザインシステムです。Material Youはそのパーソナライズ機能で、ユーザーの壁紙やシードカラーからオリジナルのカラースキームを生成し、MD3の原則を保ちながら好みに合わせたダイナミックテーマを作り出します。
ブランドカラーやお好みの色相をシードカラーとして入力してください。アルゴリズムが、プライマリ・セカンダリ・ターシャリ・ニュートラル・ニュートラルバリアントの各カラーファミリーからなる階調パレットを生成します。各ファミリーには0(黒)から100(白)まで13段階の階調があり、GoogleのMaterial You仕様に準拠しています。
CSSカスタムプロパティ、SCSS/Sass変数、JSONデザイントークン、Android用XMLリソース、JavaScript/TypeScriptオブジェクト、Figmaデザイントークン、FlutterのColorSchemeテーマ、Swift(iOS)のカラーアセットに対応しています。いずれもセマンティックな命名規則に沿った形式で書き出されます。
はい。Material Design 3のカラーシステムは、アクセシビリティを考慮して設計されています。階調パレットシステムにより、サーフェスカラーとその上のテキストカラー間で適切なコントラスト比が確保されます。本ツールではWCAG準拠レベルを表示し、アクセシブルな配色の組み合わせを自動で提案します。
もちろんです。マテリアルデザインのカラーはオープンソースで、どんなプロジェクトにも使用できます。もともとはGoogle製品向けに設計されたシステムですが、その色彩理論とアクセシビリティの考え方は優れており、Web、モバイル、デスクトップを問わず、あらゆる最新UIに活用できます。
Material Design 3では、セマンティックカラーロールがライトテーマとダークテーマそれぞれに適した階調へ自動的に割り当てられます。例えば「プライマリ」は、ライトテーマでは階調40、ダークテーマでは階調80が使われます。本ジェネレーターは両テーマとも、適切なコントラストとアクセシビリティを保った状態で生成します。