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

从色板提取、配色关系、可访问性校验到 token 生成，再把 CSS 效果落到真实组件状态中。

> 标准页面: https://elysiatools.com/zh/hubs/design-generate

- **关键词:** 设计 token, 色板工作流, CSS 效果, 可访问配色

## 常见问题

### 要先做特效还是先做 token？

通常先做 token。效果继承经过审查的语义色，稳定性会比临时配色更高。

### 什么时候应该拆成多套主题？

只有当品牌、成功、危险、深色模式等语义系统确实不能共享同一套 token 时才拆。

### 通过对比度检查后，装饰效果就一定安全吗？

不一定。模糊、透明、发光和位移仍要在真实背景、状态和焦点样式中复核。

### 一套 token 需要多少颜色才够？

以覆盖语义角色和状态为准；通常少而清晰的集合比大量接近色更易维护。

## 相关内容

- [无障碍颜色系统设计工具](https://elysiatools.com/zh/hubs/color-design-tools): 通过颜色转换、配色生成、对比度与色觉检查，建立可复用的颜色系统并记录设计令牌。
- [CSS 编写、布局与层叠工作流](https://elysiatools.com/zh/hubs/css-authoring-layout-and-cascade-workflows): 通过可读格式化、选择器诊断、响应式片段和视觉状态检查来编写与审查 CSS。