マテリアルデザイン カラーパレット

Googleのマテリアルデザインのカラーパレットは2014年に登場し、今もMaterial UIやAngular Materialに含まれています。レッド、ピンク、パープル、ディープパープル、インディゴ、ブルー、ライトブルー、シアン、ティール、グリーン、ライトグリーン、ライム、イエロー、アンバー、オレンジ、ディープオレンジ、ブラウン、グレー、ブルーグレーの19色を、50（最も明るい）から900（最も暗い）までの10段階で提供し、そのうち16色には鮮やかなアクセントのA100〜A700が加わります。このページはすべての値をHEXとRGBで一覧にし、各段階で読みやすい文字色と、そのままコピーできるCSS変数、SCSS、JSONを表示します。

使い方

1. 色を1つ選ぶか、「全19色」のままにします。
2. プライマリ（500）、ダークバリアント（700）、アクセント（A200）の値を確認します。
3. 文字色の列を見ます。WCAGのコントラスト比で白か黒を選んでいます。
4. 出力形式を選んでコードをコピーします。

計算式

プライマリ = 500 · ダークバリアント = 700 · アクセント = A200（マテリアルデザイン2のガイドライン）

段階は50から900まで明るさの順で、A段階はフローティングアクションボタンやスイッチなど、強調のための彩度が高い色です。文字色は白と黒のうちWCAGのコントラスト比が高いほうで、小数第2位まで切り捨てて表示します。

計算例

レッド500は #F44336 = rgb(244, 67, 54)で、ダークバリアントは #D32F2F、アクセントは #FF5252 です。レッド500の上では黒い文字のコントラスト比は 5.7:1 ですが、白は3.68:1にとどまるため、黒が読みやすい選択です。インディゴ500 #3F51B5 は逆で、白い文字が 6.87:1 になります。19色すべてを合わせると 254 色になります。