色彩系统与 CSS 效果设计工作流

目标与适用范围

从色板提取、配色关系、可访问性校验到 token 生成，再把 CSS 效果落到真实组件状态中。
本指南将当前任务范围转化为可复核的交付结果。请保留源文件、中间产物和关键判断，让后续协作者能够理解检查了什么以及为什么这样处理。

准备证据并作出选择

• 准备参考图、品牌主色或现有组件，作为视觉方向的起点。

• 列出会消费这套配色与效果的组件、状态和界面层级。

• 先写清无障碍目标、浏览器支持范围，以及装饰效果是否需要回退。

• 决策点: 颜色事实来源是什么？. 先决定从图片提取色板、品牌种子色，还是现有配色方案开始。

• 决策点: 这套配色要多强烈？. 根据产品语气和可读性要求选择克制、柔和、霓虹或更高对比的关系。

• 决策点: 哪些效果是结构性的，哪些只是装饰？. 滤镜、阴影、裁切和变换应服务层级与反馈，而不是给每个表面都加特效。

按步骤完成工作流

1. 获取起始色板

从真实图片提取颜色，或先生成受控的种子色，让工作流建立在可观察的视觉来源上。 使用 image-color-palette-extractor, color-generator.

2. 扩展配色关系

围绕种子色生成互补、类似、三角色、分裂互补和四角色，再比较柔和或霓虹方向是否符合产品语气。 使用 color-scheme-generator, color-analogous, color-complement, color-split-complement, color-triad, color-tetrad, neon-colors, pastel-colors.

3. 细化可用变体

生成 tint、shade、色相偏移、明暗和饱和度变化，为背景、边框、文字和交互状态准备可落地的层级值。 使用 color-tint, color-shade, color-hue-shifter, color-lighten-darken, color-saturate-desaturate.

4. 校验可访问性并固化 token

对真实配对执行对比度与色觉检查，再把通过审查的角色整理成可复用的 token 层级。 使用 accessible-color-palette-contrast-checker, color-vision-accessibility-checker, color-token-cascade-generator.

5. 把 CSS 效果落到组件

仅在需要强调层级或交互反馈的地方，基于批准 token 生成滤镜、背景模糊、阴影、圆角、裁切和变换。 使用 css-filter-generator, backdrop-filter-generator, box-shadow-generator, text-shadow-generator, border-radius-generator, clip-path-generator, transform-generator.

交付前验收结果

• 色板已经映射到明确语义角色，而不是零散色块。
• 计划中的文本与界面配对通过对比度和色觉可访问性检查。
• 生成的 token 能一致覆盖组件不同状态。
• 视觉效果增强层级或反馈，同时不破坏可读性、焦点表现和回退行为。

常见问题

• 要先做特效还是先做 token？ 通常先做 token。效果继承经过审查的语义色，稳定性会比临时配色更高。
• 什么时候应该拆成多套主题？ 只有当品牌、成功、危险、深色模式等语义系统确实不能共享同一套 token 时才拆。
• 通过对比度检查后，装饰效果就一定安全吗？ 不一定。模糊、透明、发光和位移仍要在真实背景、状态和焦点样式中复核。
• 一套 token 需要多少颜色才够？ 以覆盖语义角色和状态为准；通常少而清晰的集合比大量接近色更易维护。