Material Design 配色表

Google 的 Material Design 配色诞生于 2014 年，至今仍随 Material UI 和 Angular Material 一起发布。它提供 19 种色相——红、粉、紫、深紫、靛蓝、蓝、浅蓝、青、蓝绿、绿、浅绿、酸橙、黄、琥珀、橙、深橙、棕、灰和蓝灰——每种色相从 50（最浅）到 900（最深）共十级，其中 16 种还有四个鲜艳的强调色级别 A100–A700。本页列出每个值的 HEX 和 RGB、每一级更易读的文字颜色，以及可直接复制的 CSS 变量、SCSS 或 JSON。

使用方法

1. 选择一种颜色，或保持“全部 19 种颜色”。
2. 查看主色（500）、深色变体（700）和强调色（A200）的值。
3. 看“文字颜色”一列：它按 WCAG 对比度在白色和黑色中选择。
4. 选择导出格式并复制代码。

计算公式

主色 = 500 · 深色变体 = 700 · 强调色 = A200（Material Design 2 指南）

级别按明度从 50 到 900 排列；A 级别是饱和度更高的版本，用于悬浮操作按钮、开关等强调元素。文字颜色取白色或黑色中 WCAG 对比度更高的一个（对比度截断到两位小数）。

示例

红色 500 是 #F44336 = rgb(244, 67, 54)，深色变体是 #D32F2F，强调色是 #FF5252。红色 500 上的黑色文字对比度达到 5.7:1，而白色只有 3.68:1，所以黑色更易读。靛蓝色 500 #3F51B5 则相反：白色文字可达 6.87:1。19 种色相加起来共有 254 种颜色。