颜色设计与颜色空间转换工具
在一个专题里比较颜色转换器、调色板生成器、和谐色工具、无障碍检查器和颜色调整工具,适合设计师和开发者。
这个专题汇集了设计师和前端开发者最常用的颜色工具:格式转换、调色板与和谐色生成、对比度检查、色盲模拟,以及变亮、变暗、饱和度调整和色相偏移等交互式颜色调整。
专题信息
- 任务类型
- theme
- Families
- color, design
- 工具数
- 20
- 子簇
- 4
为什么会有这个专题
UI 设计中的颜色工作很少只停留在一个任务上——你转换了一个十六进制值,然后检查对比度,再探索互补色或类似色变体。把这些工具放在一起,可以在构建或优化调色板时节省时间。
它让无障碍评估成为创意流程的一部分。无需切换到单独的审计工具,就可以在生成器旁边验证 WCAG 对比度并模拟色觉缺陷。
它帮助新手和资深设计师比较不同的颜色调整方法——暗色与淡色、色相偏移与饱和度调整——并为每个设计决策选择正确的方法。
精选工具
颜色转换器
在不同颜色格式之间转换
颜色渐变生成器
在多个颜色之间生成平滑的颜色渐变,支持自定义步数和格式
颜色混合器
使用不同的混合模式和比例混合多种颜色
配色方案生成器
为设计项目生成专业的配色方案和调色板
互补色查找器
查找互补色并使用三色、四色和类似色关系创建和谐的配色方案
三色配色
在色轮上生成三个等距颜色的三色配色方案,创建生动且平衡的颜色组合
四色配色
在色轮上生成矩形排列的四色配色方案,创建丰富且复杂的颜色关系
类似色配色
在色轮上使用相邻颜色生成和谐的类似色配色方案,创建统一且平和的组合
分裂互补色
使用基色和两个相邻的互补色生成具有和谐对比的分裂互补配色方案
颜色对比度检查器
检查颜色对比度和 WCAG 无障碍合规性
颜色无障碍检查器
检查颜色对比度是否符合 WCAG 标准
色盲模拟器
模拟不同类型色盲人群看到的颜色效果
无障碍调色板对比度检查器
根据 WCAG 2.1 AA 和 AAA 对比度阈值审计调色板中的每对颜色组合,并提供调整建议
颜色明暗调整
调整颜色亮度并使用变亮/变暗控件创建变体
颜色饱和度调整
调整颜色饱和度并使用增加/减少饱和度控件创建变体
色相偏移器
使用顺时针/逆时针色相旋转控件偏移色相并创建变体
暗色生成器
通过添加黑色生成颜色的暗色变体,为设计创建具有深度和对比度的丰富暗色
淡色生成器
通过添加白色生成颜色的淡色变体,创建明亮轻盈的淡色效果,适合清新的设计风格
颜色反转器
使用 RGB、HSL 和亮度反转方法反转颜色并创建负片版本
色温调整
通过在暖色(红/黄)和冷色(蓝)之间偏移来调整色温,非常适合情绪灯光和氛围效果
用 Samples 测试
color, design相关专题
常见问题
在这个专题里我能做什么?
在 hex、RGB、HSL 等格式之间转换颜色,生成调色板和色彩和谐方案,检查 WCAG 对比度,模拟色盲效果,以及交互式调整亮度、饱和度或色相。
这个专题适合谁?
适合 UI/UX 设计师、前端开发者、品牌设计师,以及所有使用颜色系统并需要在保持无障碍的同时快速迭代调色板的人。
我应该从哪里开始?
从颜色转换器或配色方案生成器开始建立基础调色板,然后使用对比度检查器和无障碍工具验证,最后再确定设计令牌。