做设计的时候，总有一步没人替你做
配色工具挑完色不校对比度，检查工具校完不给你色阶，两边都不管深色模式那一套要重来一遍。 中间那几步，一直是复制粘贴在几个标签页之间来回倒腾。 这个站就是来接那几步的。
工具
能直接用，不用注册，不上传任何东西全部在你的浏览器里算完，关掉页面就什么都不剩。
№ 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 生成的中文里几乎必现
- 参数和标点合成一份报告，切着看，顶上一句话就说清这一版一共几处要改
№ 004
质感
配色工作台管颜色本身，这一站管颜色落到一层东西上之后的事。
- 七个专题：透明度、毛玻璃、渐变、阴影、分割线、圆角、令牌体检。左栏导航，一题一页，加专题不用动别的页
- α 不是令牌，成色才是：半透明压在底上算成实色，浅色深色各一个，对比度才是定的
- 毛玻璃后面滚过什么控制不了，就按最坏情况算：蒙层至少多不透明，字才在任何内容上都读得出来
- 阴影按 CSS 规范的高斯定义算边缘实际浓度，rgba 里的 α 不是眼睛看到的数；深色底上阴影失效，换明度
- 令牌体检：粘一段 CSS，数出圆角、阴影、颜色各有几种。一个站有十一种圆角，问题不在哪一种，在十一
- 能算的做成工具，口味的老实说是口味：圆角的气质只摆对照，不打分
专栏
讲清楚为什么，而不只是怎么做能算的地方给数，不能算的地方讲清楚是外推还是规范。每篇里的演示都跑在跟工具同一套引擎上。
接下来
按这个顺序做，做完一个上一个写在这儿是给自己立个字据，省得又跑去开新坑。
版式
卡片网格、瀑布流、分屏、顶部导航、文档三栏、单页滚动、左侧栏、居中窄栏这几种，作为一个分组挂进质感站的左栏。布局本身是选择题，断点不是：侧栏加正文字数加间距，加起来就是塌成两栏的那个宽度，每个断点都要能说清怎么来的。质感站自己的三栏就是这么算的。
中文排版的文章
工具已经上线，方法还没写成文章。想讲同一件事的另一面：为什么英文设计天生更容易出效果。拉丁字母有升部降部、有大小写、有连字，本身就是一堆现成的层次；中文全是同样大小的方块，层次得靠别的东西做出来。
营销品牌色
淘宝橙、B 站粉这类。网上流传的那串 hex 大多找不到可核对的官方出处，所以现在一条没收。等翻到官方的 VI 手册或开放平台设计指南再补，同样标出处。
给 AI 用的 skill
整套引擎打包成一个能离线跑的命令行，扔进 .claude/skills/ 就能让 AI 自己算配色。测试盯着它跟网页算出的结果逐字节相同。仓库里的 skill/az-design-color/。
这个站的立场
先给数，再给话。能算出来的事不靠感觉。哪一格不达标就标红，包括这个站自己用的颜色。
两把尺子一起用。WCAG 2.1 是现行规范，验收和法规认它；APCA 是 WCAG 3 的草案，深色模式下更贴近实际观感。谁也不替谁，打架的地方直说。
不替中文将就。可读性研究几乎都是拿拉丁字母做的，结论直接套到汉字上并不成立。这个站会把这类差别单独拎出来讲。
工具不留痕。不注册、不上传、不埋点，全在浏览器里算完，关掉页面就什么都不剩。