做设计的时候，总有一步没人替你做
配色工具挑完色不校对比度，检查工具校完不给你色阶，两边都不管深色模式那一套要重来一遍。 中间那几步，一直是复制粘贴在几个标签页之间来回倒腾。 这个站就是来接那几步的。
工具
能直接用，不用注册，不上传任何东西全部在你的浏览器里算完，关掉页面就什么都不剩。
№ 001
配色工作台
给一个主色，一路走到能粘进项目的 CSS 变量。
- 色阶按 OKLCH 生成，感知均匀；你给的那个色本身就在阶梯里，不是被换掉的近似色
- 状态色和语义色一并推出来，危险色不会跟着主色转成紫的
- 浅色深色两套同时校，WCAG 2.1 和 APCA 两个数一起给
- 顺手量一下你离 Tailwind / shadcn 那几个默认色号有多远。判的是撞不撞色号，不是你是不是蓝紫；留在这一带、把色调成自己的，一样算过
- 九种导出：CSS、Tailwind v3/v4、shadcn/ui、Element Plus、Ant、SCSS、Design Tokens，外加一段能直接粘给 AI 的约束
№ 002
中国设计体系色板
国内大厂公开的设计体系主色和官方色阶，收在一处。
- Ant Design、TDesign、WeUI、Arco、Semi、Element Plus、NutUI、Vant 共 8 套
- 色值不是抄的，是脚本从各家源文件里直接解析的，每条都能点到出处
- 顺手算好这个色上该放白字还是黑字，够不够正文级一目了然
- 八套里有五套，主色配白字达不到 WCAG AA。数字就在那儿，自己看
№ 003
中文排版体检
大部分中文网页的排版问题不是审美问题，是参数抄错了。
- 行高 1.5 是照着拉丁字母调的：小写字母只占 em 框的一半，剩下半格天然是行间留白
- 汉字要把格子填满，字面约占 0.86。同样 1.5 的行高，实际留白从 0.98em 掉到 0.64em
- 所以中文该给 1.84。这个数是算出来的，正好落在中文排版一贯的经验区间里
- 每行字数、字体栈顺序、字重、标点挤压一并查
- 顺带查标点：省略号写成三个句点、破折号写成一个短横，AI 生成的中文里几乎必现
文章
讲清楚为什么，而不只是怎么做能算的地方给数，不能算的地方讲清楚是外推还是规范。每篇里的演示都跑在跟工具同一套引擎上。
接下来
按这个顺序做，做完一个上一个写在这儿是给自己立个字据，省得又跑去开新坑。
中文排版的文章
工具已经上线，方法还没写成文章。想讲同一件事的另一面：为什么英文设计天生更容易出效果。拉丁字母有升部降部、有大小写、有连字，本身就是一堆现成的层次；中文全是同样大小的方块，层次得靠别的东西做出来。
营销品牌色
淘宝橙、B 站粉这类。网上流传的那串 hex 大多找不到可核对的官方出处，所以现在一条没收。等翻到官方的 VI 手册或开放平台设计指南再补，同样标出处。
给 AI 用的 skill
整套引擎打包成一个能离线跑的命令行，扔进 .claude/skills/ 就能让 AI 自己算配色。测试盯着它跟网页算出的结果逐字节相同。仓库里的 skill/az-design-color/。
这个站的立场
先给数，再给话。能算出来的事不靠感觉。哪一格不达标就标红，包括这个站自己用的颜色。
两把尺子一起用。WCAG 2.1 是现行规范，验收和法规认它；APCA 是 WCAG 3 的草案，深色模式下更贴近实际观感。谁也不替谁，打架的地方直说。
不替中文将就。可读性研究几乎都是拿拉丁字母做的，结论直接套到汉字上并不成立。这个站会把这类差别单独拎出来讲。
工具不留痕。不注册、不上传、不埋点，全在浏览器里算完，关掉页面就什么都不剩。