CSS 效果、配色板与设计 Token 生成工具
围绕CSS 视觉效果、配色构建与设计 Token 生成整理的一组工具。
这个专题聚合了CSS 视觉效果、配色构建与设计 Token 生成相关工具，帮助用户生成阴影、裁剪路径、滤镜、变换、配色板、Token 色阶，以及兼顾无障碍的色彩系统。
专题信息
- 任务类型
- generate
- Families
- design, css, palette
- 工具数
- 25
- 子簇
- 3
为什么需要这个专题
CSS 视觉效果、配色构建与设计 Token 生成通常不是一步完成，用户经常需要把转换、预览、校验或导出工具串起来使用。
把CSS 视觉效果、配色构建与设计 Token 生成放在同一个页面里，更容易对比哪条路径更适合当前真实任务，而不是在无关页面之间来回跳。
配套样例可以先测试真实输入，再迁移到自己的文件、参数或数据负载。
精选工具
CSS 背景滤镜生成器
生成 CSS 背景滤镜属性，实现毛玻璃效果
CSS 圆角生成器
生成 CSS 圆角属性
CSS 盒阴影生成器
生成 CSS 盒阴影属性
CSS 裁剪路径生成器
生成自定义形状的 CSS 裁剪路径属性
CSS 滤镜生成器
生成 CSS 滤镜属性
CSS 文字阴影生成器
生成 CSS 文字阴影属性
CSS 变换生成器
生成 CSS 变换属性
颜色生成器
生成随机颜色和颜色调色板
配色方案生成器
为设计项目生成专业的配色方案和调色板
类似色工具
生成和谐的类似色配色方案，使用色轮上相邻的颜色创造统一平静的组合
互补色工具
查找互补色并创建和谐的颜色方案，支持三元色、四色和类似色关系
分离互补色工具
生成分离互补色配色方案，使用基础色和其互补色两侧的相邻颜色创造和谐的对比效果
四色组工具
生成四色组配色方案，四个颜色在色轮上形成矩形分布，创造丰富复杂的色彩关系
三色组工具
生成三色组配色方案，三个颜色在色轮上等距分布，创造活力平衡的色彩组合
色调生成器
通过添加白色生成颜色的浅色变化，为设计创造明亮清新的色调
阴影色生成器
通过添加黑色生成颜色的深色变化，为设计提供深度和对比度
色相偏移器
调整颜色色相并创建色相变化版本
颜色明暗调节器
调整颜色亮度并创建明暗变化版本
颜色饱和度调节器
调整颜色饱和度并创建饱和度变化版本
霓虹色生成器
生成充满活力、发光的霓虹色，具有高饱和度和亮度，创造引人注目的电光效果，非常适合数字显示和现代设计
粉彩色生成器
生成柔和的粉彩色调，通过降低饱和度和提高亮度来创造精致舒缓的调色板
图片配色提取器
上传图片后提取主色调，导出代码可用的色板片段，并检查对比度
无障碍色彩对比度检查器
按 WCAG 2.1 AA/AAA 审查整套调色板的颜色组合，并给出调整建议
色彩视觉无障碍检查器
计算 WCAG 对比度，模拟主要色觉缺陷，并可对 UI 截图中的低对比区域做标记。
颜色 Token 级联生成器
输入一个主色 Hex，自动生成主色、辅助色、中性色和语义化设计 token，并输出 CSS 变量与 Style Dictionary JSON
用 Samples 测试
design, css, palette相关专题
常见问题
这个专题能做什么？
你可以生成阴影、裁剪路径、滤镜、变换、配色板、Token 色阶，以及兼顾无障碍的色彩系统。
这个专题适合谁？
适合设计师、前端开发者，以及构建设计系统的团队。
应该从哪里开始？
先从最接近你设计方向的素材或品牌色，再从配色进入 CSS 效果或 Token 输出开始。