第一步：选出一组色
从一个基色按和谐规则推出五色，明度已经分好层，不是五个一样深的色相。
色导网，把选色、校验和落地连成一条线
选色、校验、落地成代码，这三件事通常散在好几个工具里，口径还各说各话。这里把它们放在一起，并且每个数字都写明是怎么算出来的。
三步，各有对应的工具
六件工具
六套现成方案
每套都写了设计意图、适用场景与禁忌，色卡旁边标好对比度，底部给可直接粘贴的 CSS 变量。
把原理讲清的五篇
色相环与和谐规则的来历和局限
色相环是颜料时代的产物，和谐规则是它的几何推论。它们解决什么、不解决什么。
色彩空间各管什么
sRGB、HSL、Lab、OKLCH 各自回答的是不同的问题，混用才是大部分配色问题的来源。
明度与感知亮度的差别
同一个 HSL 明度值下，不同色相的实测亮度能差近六倍。这解释了很多「看起来不对」。
对比度标准的口径与盲区
4.5:1 这个数字是怎么来的，它管什么，以及它明确管不到的几件事。
屏幕与印刷的色彩差别
色域、加色与减色、网点与专色：为什么屏幕上那个颜色印不出来。
传统色谱
四个色系共四十个中文色名，每个给出屏幕近似值、简短说明与现代配色里的用法。索引页还带一个按色差就近查色名的查询框。
#D6E0E8
#4A7E9B
#1B3B6F
#C7352B
#E2B84F
#6E8B6A
#9C5B33
#211F26
落地方法
从品牌色推出完整 UI 色板
把一个十六进制值扩成十级色阶加四个语义色的六个步骤，每步都有可校验的产出。
暗色模式的正确做法
为什么不能反色，表面序列怎么建，彩色与阴影在深底上要怎么重新取值。
无障碍配色落地清单
交付前照着过一遍的十二条，每条都写了怎么验、不过怎么改。
CSS 颜色函数的取舍与兜底
新的颜色语法该不该现在用、怎么写兜底，以及用自定义属性组织色板的方式。
这个站的口径
- 所有计算都在 sRGB、D65 下进行，公式与假设写在各工具页上，不在站外另设标准。
- 颜色不离开你的浏览器：工具是纯前端的，色板保存在本机存储里，没有账号也没有上传。
- 传统色名是公有领域的通识，色值是本站给的屏幕近似，不冒充任何机构的定义。
- 文字、配色方案与图解都是本站原创，不收录也不链接任何第三方素材库。