Color Harmonies Generator
Base Color
Analogous
#3cf6af-60°
#3ce0f6-30°
#3B82F6Base
#523cf6+30°
#af3cf6+60°
Monochrome
#ffffffLighter +40%
#9ec1faLighter +20%
#3B82F6Base
#0950c3Darker -20%
#052861Darker -40%
Triad (120\u00b0)
#3B82F6Base
#f63c83+120°
#83f63c-120°
Tetrad (90\u00b0)
#3B82F6Base
#f63ce0+90°
#f6af3c+180°
#3cf652-90°
Split Complement (\u00b1150\u00b0)
#3B82F6Base
#f6523cSplit +150°
#e0f63cSplit -150°
技术详情
颜色和谐生成器的工作原理
工具功能
颜色和谐生成器根据色彩理论自动生成与基色搭配的颜色组合。支持多种和谐规则:互补色(Complementary)、分裂互补色(Split Complementary)、三角色(Triadic)、四角色(Tetradic)、类似色(Analogous)和单色(Monochromatic)。设计师选择一种基色和谐规则后,工具自动在色轮上计算出相应的配色方案。
常见开发者使用场景
技术原理/相关概念
颜色和谐基于 HSL/HSB 色轮理论:互补色在色轮上相隔 180°,产生最大对比度;分裂互补色在基色对面的两侧 30° 处,对比度稍柔和;三角色相隔 120°(三种颜色均匀分布),是鲜艳的平衡方案;类似色在色轮上相邻(通常 ±30°),产生和谐一致的效果。工具内部将基色转换为 HSL 色彩空间,按规则调整色相(H)并保持饱和度和亮度可调,再将结果转换回 RGB/HEX。
常见陷阱与注意事项
- 和谐≠可访问:和谐的配色不一定满足 WCAG 对比度要求,需要单独检查对比度。
- 饱和度控制:高饱和度的互补色在屏幕上可能过于刺眼,适当降低饱和度可使配色更舒适。
- 品牌一致性:和谐规则是指导而非强制,应根据品牌调性进行微调而非盲目遵循。
- 色彩功能:UI 中不同颜色承担不同功能(信息传达、操作引导、状态标识),和谐配色不应影响色彩的语义功能。
何时使用此工具而非代码
在 UI 设计初期探索配色方案、创建设计系统或快速生成可选的配色方案组合时使用此工具。非常适合前端开发者和设计师在项目起步阶段进行视觉探索。对于需要代码化管理的配色方案,推荐使用 CSS 自定义属性或 Tailwind 的 theme 配置,并借助 Figma Tokens 或 Style Dictionary 等工具进行设计令牌管理。