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

Material Designカラーピッカーは、全プライマリカラーとシェードバリエーション（50〜900）を含む完全なMaterial Designカラーパレットを提供します。スウォッチをクリックするだけで正確なHEX値を取得でき、デザインシステムやコードにすぐ使えます。

使い方

1. Material Designのプライマリカラー（Red、Pink、Purple、Deep Purple、Indigo、Blueなど）がグリッド表示されるので、一覧を確認できます。
2. プライマリカラーをクリックすると、最も明るい50から最も暗い900まで、アクセントシェード（A100〜A700）を含むバリエーションが展開されます。
3. 任意のシェードをクリックしてHEXコードをコピーするか、プロジェクト用に複数の色を選んでパレットを構成できます。

結果

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

関連ツール