マテリアルデザインカラーピッカーとは？

Material Designカラーピッカーは、全プライマリカラーとシェードバリエーション（50〜900）を含む完全なMaterial Designカラーパレットを提供します。スウォッチをクリックするとHEX、RGB、HSLの好きな形式でコピーでき、内蔵のWCAGコントラストチェッカーでアクセシビリティも確認できます。

Red から Brown まで 19 色の主色をカバーし、それぞれに 50、100、200、300、400、500、600、700、800、900 の 10 段階があります。Google が定義している色にはアクセント A100、A200、A400、A700 も含まれます。各色チップには正確な HEX 値が表示され、選択カラーパネルでプロジェクト用パレットを組み立てて、コピーやダウンロードができます。

使い方

1. Material Designのプライマリカラー（Red、Pink、Purple、Deep Purple、Indigo、Blueなど）がグリッド表示されるので、一覧を確認できます。
2. プライマリカラーをクリックすると、最も明るい50から最も暗い900まで、アクセントシェード（A100〜A700）を含むバリエーションが展開されます。
3. 任意のシェードをクリックして選んだ形式（HEX・RGB・HSL）でコピーし、選択色パネルに追加してから、パレットをCSS・SCSS・Tailwind設定・JSONのいずれかでダウンロードできます。

使用するタイミング

• 同じ色相からメインカラー、明るめのコンテナ、濃いめのホバー色を選ぶとき。
• Android や Flutter の UI を Google 公式パレットに正確に合わせ、HEX を推測しないで済ませたいとき。
• スライドやマーケティング素材の配色を統一したいとき。

結果

ダッシュボードを構築する際に、プライマリボタンにMaterial Designの「Indigo 500」(#3F51B5)を、ホバー背景に「Indigo 50」(#E8EAF6)を使いたい場合に活用できます。

よくある質問

主色階(50〜900)とアクセント階(A 系)の違いは?

50〜900 は同じ色相の明暗バリエーションで、背景・面・文字向けです。A100〜A700 は彩度が高く、Google はボタンやバッジなど注意を引く要素に使うことを推奨しています。

なぜアクセントがない色があるのですか?

Brown と Grey はもともと彩度を抑えた色で、Google はこれらにアクセント変種を定義していません。本ツールは原仕様に忠実で、Google が公開していない値は追加しません。

本文テキストに使うべき色階は?

Material のガイドラインは明るい背景には Grey 900、暗い背景には Grey 50 または白を推奨します。中間階(500〜600)は副次的なテキストや、低めのコントラストでよいアイコンに向いています。

Material 3(Material You)の色と同じですか?

違います。本ツールは Google が 2014 年に発表した初代 Material Design のカラーシステムです。Material 3 は 1 つのシード色から動的にトーンを生成する別アルゴリズムです。

2 つの色階のコントラスト比はどう確認しますか?

両方のシェードを選択色パネルに追加し、コントラストチェッカーまでスクロールしてください。一方を前景、もう一方を背景に選ぶと、通常テキストと大きいテキストのAA・AAA合否バッジ付きでWCAG比が即座に表示されます。

関連ツール