做前端、写 PPT、画 UI 的时候你是不是也这么干过看到别人作品里一个好看的蓝截图打开取色器吸一下——完事。吸颜色本身没问题但只靠吸你的配色永远差那么一点。今天说清色板Color Palette相关的 5 个坑每一个都踩过的人不在少数。坑 1只吸一个颜色就以为能用了从一个logo里吸出来的那个蓝单独看很好看但直接拿去做整页设计就会翻车按钮用它、背景用它、文字也用它整个页面糊成一团。专业做法是从一个主色生成完整色板一个主色Primary、一深一浅的辅助色Dark/Light、若干中性灰阶再配一个语义化的状态色。主色定调其余颜色各司其职页面才有层次。坑 2色板没有色阶写交互状态就抓瞎按钮有默认态、hover 态、按下态、禁用态。如果你只有一个颜色hover 该用什么很多团队的答案是透明度调一调——结果在不同背景上效果完全不可控。正确的做法是给主色生成一套色阶比如 50 到 900 共 10 档hover 用浅一档按下用深一档禁用用 100 档。主流组件库Element UI、Ant Design的色板全是这个结构。你要做的只是先把色阶生成好而不是每次临场编。坑 3HSL 生成的色阶深浅档亮度不均匀很多人知道用 HSL 调亮度生成色阶但 HSL 有个经典问题感知亮度不均匀。把蓝色和黄色都从 L50 开始调出来的两个颜色看起来黄色的亮得多——因为人眼对绿色波段最敏感HSL 根本不感知这个。所以用 HSL 生成的多色色板经常出现这几个颜色放一起有的抢眼有的发闷。想要均匀可以参考基于感知亮度WCAG 相对亮度的插值思路或者至少生成后肉眼校一遍。坑 4生成的颜色对比度根本过不了无障碍标准颜色好看是一回事能不能看清是另一回事。WCAG 对正文文字的对比度要求是 4.5:1大字号 3:1。很多自动生成的浅色底白字组合对比度只有 2 点几低视力用户和强光环境下的用户直接看不清。生成色板之后别急着用先测关键组合的对比度主色上放白字够不够 4.5:1浅灰底上的灰字是不是形同虚设这一步省掉上线之后就是投诉。坑 5HEX 复制了一圈最后发现格式不对从设计稿复制 HEX 色值到代码里最常见的翻车是格式有的工具输出带#有的不带有的大写有的小写有的给的是rgb()你要的是 8 位带透明度的#RRGGBBAA。一堆颜色手动抄抄错一个字符颜色就静默地变成了另一种蓝。最好把常用格式一次生成、一键复制HEX、RGB、HSL需要透明度的时候直接给 alpha 通道避免手抄。色板怎么快速生成如果你不想自己算 HSL 色阶也不想临时翻各种生成器可以试试 vaultool 的色板生成器Color Palette Generator输入一个主色自动生成带色阶的完整色板每个颜色给出 HEX/RGB/HSL 三种格式一键复制并对关键组合标注 WCAG 对比度是否达标。全程在浏览器本地完成不上传任何数据中文版vaultool.com/zh/tools/color-palette小结别只吸一个颜色生成主色辅助中性灰的完整色板色板要有色阶交互状态才不抓瞎HSL 亮度不等于感知亮度多色色板要肉眼校对比度过不了 WCAG 4.5:1 的组合别拿去做正文色值格式一次生成一键复制别手动抄配色这件事工具能帮你解决 80% 的机械劳动剩下的 20% 审美还是得自己练。但至少那 80%别再靠截图取色器了。