色彩搭配方案生成器 - 互补/三角/矩形调色

互补色是色轮上相对180°的两个颜色（如蓝与橙、红与绿、黄与紫）。它们形成最强对比，能产生醒目、充满活力的视觉效果。在UI设计中，常用互补色作为CTA按钮与背景的搭配，或用于需要高亮突出的信息区域。但大面积使用高饱和度互补色容易产生视觉疲劳，建议通过调整饱和度或亮度来柔化对比。例如，蓝色主色配橙色强调色是经典的互补色搭配，常用于科技产品和金融应用中，既能传达信任感（蓝色），又能通过橙色按钮引导用户操作。使用本工具时，选择互补色方案后，可以通过降低饱和度到70%-80%来获得更柔和的对比效果。

三角配色由色轮上均匀分布的三个颜色组成（相差120°）。它比互补色更丰富，同时保持平衡感。典型例子如红-黄-蓝三原色组合。三角配色适合需要活泼、多彩但又不失和谐的设计，如品牌视觉系统、数据可视化图表等场景。建议选择一个颜色作为主色（约占60%面积），其余两个作为辅助色。三角配色在儿童教育产品、创意设计工作室、信息图表等需要活力和丰富性的场景中表现出色。需要注意的是，三种颜色都使用高饱和度时可能会显得过于花哨，建议将辅助色的饱和度降低到60%-70%，让主色更加突出。

矩形配色由两组互补色组成（共4色），色轮上形成矩形（角度间隔为60°-120°-60°-120°）。正方形配色则是四色均匀分布（各差90°）。矩形配色提供了丰富的色彩选择，但需要精心平衡以避免混乱。四色方案在复杂UI系统、多模块仪表盘等场景中表现出色。建议设定明确的主次关系，通常以一组互补色为主导。两者的主要区别在于：矩形配色的四色之间角度间隔不相等，因此视觉上有主次之分；正方形配色的四色之间角度间隔完全相等，视觉上更加均衡。在选择时，如果需要明确的主次关系，选择矩形配色；如果需要四种颜色的视觉权重更均衡，选择正方形配色。

类似色是色轮上相邻的颜色（通常相差30°以内），如蓝-蓝绿-绿。它们天然和谐，营造柔和、舒适、统一的视觉感受。类似色方案广泛用于品牌设计、自然主题页面、柔和UI界面等。由于缺乏强烈对比，建议通过亮度差异来建立层次感，或加入一个小面积的强调色来打破单调。类似色特别适合以下场景：需要营造宁静、舒适氛围的冥想或健康类应用；需要自然、有机感觉的食品或环保品牌；需要专业、沉稳形象的企业官网。在使用类似色时，可以通过在三种类似色之间创造明显的亮度差异（如一种深色、一种中等亮度、一种浅色）来增强视觉层次，避免画面过于平淡。

HEX（如#4F46E5）是网页最常用的16进制颜色码，简洁易复制，适合CSS样式编写。RGB（如rgb(79,70,229)）通过红绿蓝三通道描述颜色，适合编程场景和需要精确控制每个通道值的情况。HSL（色相、饱和度、亮度）最符合人类直觉：色相决定"什么颜色"（0-360°），饱和度决定"颜色纯度"，亮度决定"明暗程度"。设计师调整颜色时通常使用HSL模型，因为它更直观地反映了色彩关系。例如，要让一个颜色变暗，只需降低HSL的亮度值；要让颜色更柔和，只需降低饱和度。本工具内部使用HSL模型进行配色计算，输出HEX格式供用户直接使用。三种格式可以互相转换，选择哪种格式取决于具体的使用场景。

选择主色时考虑品牌定位和情感传达：蓝色代表信任与专业，绿色象征自然与增长，红色传递激情与紧迫感，橙色充满活力与亲和力。确定主色后，使用本工具探索不同配色方案。通常建议主色占设计面积的60%左右，辅助色占30%，强调色占10%（60-30-10法则）。您也可以点击色轮或使用随机按钮来发现意想不到的优秀配色。选择主色的实用建议：首先确定产品或品牌的行业属性和目标用户群体，然后选择与行业气质匹配的色系。例如，金融科技产品适合蓝色系，健康生活产品适合绿色系，儿童教育产品适合暖色系。选定色系后，可以在本工具的快捷预设中选择接近的色相作为起点，然后通过微调找到最满意的主色。

饱和度控制色彩的纯度：100%为最鲜艳，0%为灰色。亮度控制明暗：100%为白色，0%为黑色。调整建议：对于需要专业感的场景（如企业官网），饱和度建议60%-80%，亮度适中；对于需要活力感的场景（如电商促销），饱和度可以提高到80%-100%；对于深色主题，亮度整体降低；对于浅色主题，亮度整体提高。饱和度和亮度的调整不会改变配色方案的色相关系，因此和谐性始终得以保持。一个实用的技巧是：先确定色相关系（选择配色方案类型），然后通过饱和度和亮度滑块来调整"情绪"——高饱和度+高亮度=活泼明快，高饱和度+低亮度=浓郁深沉，低饱和度+高亮度=柔和清新，低饱和度+低亮度=沉稳内敛。

UI预览区域模拟了一个典型的网站界面，展示了当前配色方案在实际UI中的应用效果。它包含Website Header、三种按钮样式和三个标签组件。通过预览区域，您可以在不切换到设计工具的情况下，直观评估配色方案在真实界面中的表现。这大大提升了配色决策的效率。预览区域帮助您评估四个关键指标：可读性（文字与背景的对比度是否足够）、层次感（主要按钮和次要按钮是否有清晰的视觉层次）、协调性（所有颜色在一起是否和谐统一）、品牌感（配色是否传达了想要的品牌气质）。如果对预览效果不满意，可以立即调整参数或切换方案类型，直到找到满意的配色组合。

不同配色方案类型基于不同的角度关系来确定辅助颜色，因此同一主色在不同方案中会产生完全不同的色彩组合。互补色选择180°对面的颜色，形成最强对比；三角色选择120°间隔的颜色，提供丰富而平衡的组合；类似色选择30°以内的相邻颜色，营造和谐统一的氛围。这种差异正是色彩理论的魅力所在——同一颜色可以衍生出多种风格迥异的配色方案。建议您在同一主色下依次尝试所有六种方案类型，对比它们在UI预览中的效果。这种方法能够帮助您快速找到最适合特定项目需求的配色方案类型。例如，同一个蓝色主色，在互补色方案中会搭配橙色（对比强烈），在类似色方案中会搭配蓝绿色（和谐柔和），在三角色方案中会搭配黄色和品红色（丰富活泼）。

点击颜色卡片上的复制按钮或"复制全部HEX"按钮，将HEX值复制到剪贴板。在CSS中直接使用：background-color: #4F46E5;。建议将颜色定义为CSS变量便于管理：:root { --primary: #4F46E5; --secondary: #10B981; }。也可以导入到Figma、Sketch等设计工具中使用。在实际项目中应用配色方案时，建议遵循以下最佳实践：首先，建立CSS自定义属性（变量）来统一管理所有颜色值，方便后续维护和主题切换；其次，按照60-30-10法则分配颜色面积，确保视觉层次清晰；第三，测试配色在不同设备和光线条件下的显示效果，确保在各种环境下都能保持良好的视觉表现；第四，考虑无障碍标准，确保文字与背景的对比度满足WCAG要求。如果需要更高级的配色管理，可以使用CSS预处理器（如Sass）的变量功能，或设计系统工具（如Style Dictionary）来生成多平台的设计令牌。