材质设计颜色选择器
MaterialDesign色板定义了19个颜色系列，从红色、粉色、紫色到灰色及蓝灰色，每个系列均包含从50号（浅色）至900号（近黑色）的渐变色阶，并提供可选的点缀色A100至A700。该色板将所有色卡以网格形式呈现，并支持将任意颜色值复制为HEX、RGB、 HSL 或Material标记名称，以便在Tailwind、CSS变量、iOSUIColor或Android颜色资源中使用。
如何使用调色板
-
1
扫描网格
颜色系列沿左侧纵向排列，色号从50到900横向排列于顶部。
-
2
点击样品图片
请参见HEX、RGB、 HSL 以及标准材质标记名称（例如Indigo 500）。
-
3
复制所需格式
单击即可复制以下精确字符串：`#3F51B5`、`rgb(63 81 181)`、`hsl(231 48% 48%)`。
-
4
检查对比度
该面板显示 WCAG 与黑白背景的对比度，以便选择合适的文本颜色。
色号梯度
| 色号 | 用途 |
|---|---|
| 50 | 浮动背景、浅色表面 |
| 100 | 芯片背景，低强调填充 |
| 200 | 失效状态，次要表面 |
| 300 | 边界、分隔符 |
| 400 | 浅色背景上的辅助文本 |
| 500 | 默认/主色，基准色 |
| 600 | 交互状态（悬停、点击） |
| 700 | 标题，重点强调 |
| 800 | 浅色背景上的深色文字 |
| 900 | 对比度最高的元素（接近黑色） |
| A100 | 轻度点缀 |
| A200 | 比默认更浅的点缀色 |
| A400 | 点缀色（通常作为该品牌的鲜亮主打色） |
| A700 | 深色点缀 |
Material 调色板中的颜色系列
红色、粉色、紫色、深紫色、靛蓝色、蓝色、浅蓝色、青色、蓝绿色、绿色、浅绿色、青柠色、黄色、琥珀色、橙色、深橙色、棕色、灰色、蓝灰色。
棕色、灰色和蓝灰色没有点缀色，它们属于中性色系。
选择主色
规格建议将500号色作为主色调，700号色用于深色版本（应用于Android系统的状态栏），A200或A400号色则作为次要操作的辅助色。这仅是一种惯例而非硬性规定，现代Material 3（动态色彩系统）的配色方案均源自单一种子色，而非从固定渐变色中选取。
可访问性检查点
- **正文内容：**与背景色的对比度≥4.5:1（WCAG AA标准）。
- 大字体（18磅加粗或24磅常规字型）： 对比度≥3:1。
- 用户界面组件与图形对象： 对比度≥3:1。
该色板默认不支持高对比度显示。白色背景上的黄色500色会严重出现 WCAG 失真。在使用任何配色组合前，请务必核对色相比值，调色器会实时显示该比例。
支持的格式
- HEX代码：
#3F51B5（靛蓝500）。 - RGB：
rgb(63 81 181)（现代格式）或rgb(63, 81, 181)（旧版格式）。 - HSL:
hsl(231 48% 48%). - 材质图元：
Indigo 500，适用于设计文档及 Figma 平台。 - Tailwind：
indigo-500，若您的 Tailwind 主题采用 Material 色阶系统，则可直接应用于类属性中。 - Android颜色XML文件：
<color name="indigo_500">#FF3F51B5</color>，采用 ARGB 格式。 - iOSUIColor：
UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0)。
常见问题
本工具复现 Google 于 2014 年发布、后来收录在 Material Design 2 网站中的固定调色板。它不会根据源颜色生成 Material 3 色调调色板。需要查阅经典编号色阶和强调色时可使用本工具。
棕色、灰色和蓝灰色属于中性色，不参与点缀色配对。相关规范中已直接省略其对应的A100至A700色号范围。
Tailwind的默认色板虽受Material色板启发，但并不完全相同。如需使用Material的精确颜色，请在theme.extend.colors基础上添加相应的Material颜色值，并在类名中将其引用为material-indigo-500。
默认设置为“是”，但您完全可以将700色或特定色号作为主色调。500色方案则提供一个稳定的基色，可向两个方向各调整8个色阶以实现变化效果。
相关工具
GIF 制作器
将一组图片或短视频转换为动画 GIF。导出前可调整帧率、循环次数和尺寸。
图片尺寸调整器
将图片调整到精确的像素尺寸或百分比，同时保持宽高比。适合批量准备图片，无需上传。
图像放大器
使用 AI 超分辨率或经典插值，将低分辨率图像放大 2×、3× 或 4×，同时保留重要细节。
BMP 转 PNG
在浏览器中将 BMP 文件转换为 PNG。无损，保留色深，并可从原始 BMP 的 alpha 通道添加可选透明度。
SVG 转 PNG
在浏览器中将 SVG 文件或 SVG 标记转换为 PNG，选择缩放因子，并保持透明边缘清晰。
邀请函制作工具
制作婚宴、满月酒、生日会或商务活动的精美邀请函。自定义文字与配色，实时预览效果，下载可按 7 寸（5 × 7 英寸）冲印的 PNG。