Material 和 HTML 色卡：设计与网页用色对照
设计与网页工作里，「这颗颜色有没有现成的名字/规范位」是个高频问题。两张卡就是为这个准备的。
Material Design (2014)：256 色
Google 2014 版 Material 规范的经典色板，每色 50~900 十三档明度阶梯（截图里 Red 系从 #FFEBEE 到 #B71C1C 一目了然）。
- 用途：给界面找规范色、跟设计师沟通「用 Red 500 别用纯红」、复刻 Material 风格的界面。
- 对法：活动色卡切到 Material 后取色，读数直接报最近的阶梯位（如「96% Cyan A200」）；或库里搜「Red 500」反查色值。
HTML (W3C)：148 色
网页标准里的英文色名（如 Tomato、Coral、MediumOrchid），148 个。
- 用途：写 CSS 时用色名（
color: tomato;）、给非技术同事描述颜色（「就 Coral 那个色」）、快速核对截图里的颜色有没有现成名字。 - 对法：切活动色卡到 HTML 取色，或选中网页里的色名文字用分享文字搜色反查。
两张卡怎么分工
| 场景 | 用哪张 |
|---|---|
| 界面要走 Material 规范、要明度阶梯 | Material (2014) |
| 写 CSS、要个能念出声的色名 | HTML |
| 只是要「标准橙」随便哪个体系 | 哪张匹配度高用哪张 |
设计流程里的位置
- 采集：截图或照片里取色，拿到底层 HEX，见截图取色。
- 归位：活动色卡切 Material/HTML，看取到的颜色落在哪个标准位上；匹配度与 ΔE 判断贴近程度，见色差匹配。
- 入档：项目色存成自定义色卡，下次取色直接对自家规范。
elementary（65 色）也在设计分组里，做 Linux 桌面相关设计或喜欢其配色体系时同理可用。