颜色名对照与配色

CSS 里能直接写名字的那 148 个颜色、日本传统色，以及由一个基色推出一整套配色方案——这三件事在一页里。点任意色块即可复制色值。

CSS 颜色名能直接用吗

能，color: tomato 和 color: #FF6347 完全等价，所有浏览器都支持这 148 个名字（140 个 X11 颜色 + 8 个基础色，外加一个为纪念 Rebecca Meyer 而加入的 rebeccapurple）。不过团队协作时更推荐写色值或 CSS 变量——darkgray 其实比 gray 还浅，这类历史遗留的命名很容易引起误会。

有几组名字指向同一个颜色

aqua 和 cyan 都是 #00FFFF，fuchsia 和 magenta 都是 #FF00FF，grey 和 gray 系列全部互为别名。这是 X11 传统和 HTML 标准合流留下的产物。

配色方案的几种关系

互补色：色环上相差 180°，对比最强，适合做强调色但大面积使用会打架。类似色：相差 30° 以内，天然和谐，适合做同一组界面的层次。三角配色：等分成三份（相差 120°），活泼且平衡，是海报常用的路子。分裂互补：取互补色两侧各 30°，保留对比又比纯互补柔和，新手最容易用好的一种。单色阶：同一色相改明度饱和度，最稳妥，做数据图表的序列色常用。

60-30-10 法则

配色落地时的经验比例：主色占 60%（大面积背景）、辅色占 30%（次要区块）、强调色占 10%（按钮、链接、关键数据）。强调色通常取主色的互补色或分裂互补色。一上来就三种颜色平均分配，画面会显得吵。

别忘了对比度

好看和能看清是两回事。正文文字与背景的对比度应达到 4.5:1（WCAG AA 级），大号文字至少 3:1。浅灰字配白底是最常见的可访问性问题。本页的配色结果里标出了每个色与黑、白文字的对比度，可以直接照着挑前景色。

日本传统色的名字

这些名称大多来自平安时代以来的染织与文学传统，比如「浅葱色」取自葱叶初生的淡青、「山吹色」是棣棠花的明黄、「鸨色」来自朱鹮羽毛的粉。收录的色值以日本工业标准 JIS Z 8102 的常见转录为准，不同资料来源可能略有出入。

相关工具

颜色值转换、CSS 渐变生成、中国传统色、中间色计算、相反色计算、CMYK 对照表。