配色工作台

色阶 滑杆调的是 OKLCH。固定明度换色相，看上去才是同一档深浅

带小圆点的那一级就是你给的色本身：色阶会整体挪一点去迁就它，免得导出的变量换了个颜色你不敢用。点色块复制。

配套中性阶 同色相，色度压到 6%

文字和边框别用纯灰。留一点主色的色相，跟品牌色摆在一起才像一套；纯 #888 配任何有色相的主色都会显脏。

浅色深色一起校

九个语义角色、两套主题，十八个组合一屏之内判完。改任何一格，两边同时重算。

WCAG 2.1 是现行规范，验收和法规认它。APCA 是 WCAG 3 的草案算法，把深底浅字和浅底深字分开算。 同样一个 4.5:1，浅底黑字清清楚楚，深底浅字其实糊得多，老公式看不出这件事。 两把尺子打架的地方会标出来，那种组合最该亲眼看一下。

真实界面里长这样 数字过了不代表好看，得看一眼

正文特意中英各摆一行。汉字笔画密、竖笔细，抗锯齿一糊就连成一团， 同样的对比度读起来比拉丁字母吃力。所以中文单独判一档：拉丁 Lc 75 能过的，中文要到 90。

状态色 悬停 / 按下 / 禁用 / 焦点环

悬停和按下在同一条色阶上挪档，浅色往深里走，深色往浅里走，两边都朝对比更强的方向。 禁用不是调淡，是先砍掉色度再拉向背景。调淡只会变成另一个浅色按钮， 砍掉色度才读得出这东西现在不能点。

焦点环那一格给的是它跟页面底的比值，不是跟按钮底。 WCAG 2.2 的焦点外观要求环跟相邻颜色有 3:1，而环画在按钮外面、中间留一圈页面底色的缝， 相邻的就是页面底。导出的 CSS 里那句 outline-offset 不能删，缝没了就不合规。

语义色 成功 / 警告 / 危险 / 信息

这四个色的色相不能动。红就得是红，绿就得是绿，用户是靠色相认语义的， 跟着主色转一圈就废了。跟主色和谐靠的是把明度和色度向主色看齐： 同样的深浅、同样的鲜艳程度，摆在一起就是一套。

别撞衫 问题不是蓝紫，是跟三十万个页面用同一个色号

Tailwind 和 shadcn/ui 的默认主色在 OKLCH 里挤在一条很窄的色相带里，AI 生成的界面绝大多数就是这个色。 但蓝紫本身没有错，Stripe、Linear、Discord 都在这一带，用得很漂亮。 这里判的是你离那几个默认色号有多远。留在这一带、把色调成自己的，一样算过。

拿走用 token 名都从各家官方源文件核过

名字错一个字母，整块粘进去就是不生效，比不给还糟。每种格式的 token 名都对着官方仓库核过， 出处写在代码块的注释里。