CodeToolProCodeToolProFree Online Developer Tools
GitHub

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)。设计师选择一种基色和谐规则后,工具自动在色轮上计算出相应的配色方案。


    常见开发者使用场景

    颜色和谐是 UI 设计的基础:前端开发者在创建组件库时使用它确定主色、辅色和强调色。数据可视化团队使用它生成和谐的信息图表配色。Web 设计师在建立品牌色体系时参考和谐规则以确保视觉统一性。此外,在创建 CSS 主题或 Tailwind 配色方案时,和谐生成器能快速产生专业级的色彩搭配。

    生成的配色可通过 调色板生成器 进一步调整和导出。颜色对比度检查器 可验证选色的可访问性。色调/色阶生成器 帮助创建颜色的深浅变体。色盲模拟器 可验证配色对所有用户的可区分性。


    技术原理/相关概念

    颜色和谐基于 HSL/HSB 色轮理论:互补色在色轮上相隔 180°,产生最大对比度;分裂互补色在基色对面的两侧 30° 处,对比度稍柔和;三角色相隔 120°(三种颜色均匀分布),是鲜艳的平衡方案;类似色在色轮上相邻(通常 ±30°),产生和谐一致的效果。工具内部将基色转换为 HSL 色彩空间,按规则调整色相(H)并保持饱和度和亮度可调,再将结果转换回 RGB/HEX。


    常见陷阱与注意事项

    • 和谐≠可访问:和谐的配色不一定满足 WCAG 对比度要求,需要单独检查对比度。
    • 饱和度控制:高饱和度的互补色在屏幕上可能过于刺眼,适当降低饱和度可使配色更舒适。
    • 品牌一致性:和谐规则是指导而非强制,应根据品牌调性进行微调而非盲目遵循。
    • 色彩功能:UI 中不同颜色承担不同功能(信息传达、操作引导、状态标识),和谐配色不应影响色彩的语义功能。

    何时使用此工具而非代码

    在 UI 设计初期探索配色方案、创建设计系统或快速生成可选的配色方案组合时使用此工具。非常适合前端开发者和设计师在项目起步阶段进行视觉探索。对于需要代码化管理的配色方案,推荐使用 CSS 自定义属性或 Tailwind 的 theme 配置,并借助 Figma Tokens 或 Style Dictionary 等工具进行设计令牌管理。