UD5工具箱
色轮（Color Wheel）
色轮是将可见光谱中的颜色按照色相关系排列成环形的图表，是色彩理论中最基础也最重要的工具。色轮最早由牛顿于1666年提出，后经歌德、伊顿等色彩理论家不断完善。现代色轮通常包含12个基本色相，从红色开始，依次经过橙色、黄色、黄绿色、绿色、青绿色、青色、蓝青色、蓝色、蓝紫色、紫色、品红色，最后回到红色。色轮上颜色之间的角度关系决定了它们的搭配效果：相邻颜色（约30°以内）自然和谐，相对颜色（180°）形成强烈对比，等距分布的颜色提供丰富而平衡的组合。本工具的色轮模型基于HSL色彩空间，色相从0°到360°均匀分布，是所有配色方案计算的基础。
互补色（Complementary）
互补色是指色轮上相对180°的两个颜色，如红与绿、蓝与橙、黄与紫。互补色组合形成最强烈的视觉对比，能够产生醒目、充满活力的视觉效果。在UI设计中，互补色常用作CTA按钮与背景的搭配，或用于需要高亮突出的信息区域。互补色方案的优势在于对比强烈、视觉冲击力大；缺点是大面积使用高饱和度互补色容易产生视觉疲劳，产生"震颤"效果。最佳实践是通过调整一方的饱和度或亮度来平衡对比，或将互补色控制在较小的面积内使用。本工具生成的互补色方案会自动计算与主色互补的颜色，并提供饱和度和亮度调节来优化对比效果。
三角色（Triadic）
三角色是指色轮上均匀分布的三个颜色（各差120°），如红-黄-蓝三原色组合。三角色方案比互补色更丰富，同时保持平衡感，是色彩搭配中最经典的方案之一。三角色适合需要活泼、多彩但又不失和谐的设计，如品牌视觉系统、数据可视化图表等场景。使用三角色方案时，建议选择一个颜色作为主色（约占60%面积），其余两个作为辅助色和强调色。这样既能发挥三角色丰富性的优势，又能避免多种颜色争夺注意力的问题。三角色方案在儿童教育产品、创意设计、信息图表等需要活力和丰富性的场景中表现出色。
矩形色（Tetradic / Rectangular）
矩形色是指由两组互补色组成的四色方案（共4色），在色轮上形成矩形（角度间隔为60°-120°-60°-120°）。矩形色方案提供了最丰富的色彩选择，适合需要多种颜色的复杂设计场景。然而，由于颜色数量较多，需要精心平衡以避免视觉混乱。使用矩形色方案时，建议设定明确的主次关系，通常以一组互补色为主导（占据大部分面积），另一组互补色作为辅助和点缀。矩形色方案在复杂的UI系统、多模块仪表盘、信息密集型界面等场景中能够发挥出色的效果，提供足够的色彩区分度来标识不同的功能模块。
正方形（Square）
正方形方案是指四个颜色在色轮上均匀分布（各差90°）的配色方案。与矩形色方案不同，正方形方案的四个颜色之间的角度间隔完全相等，因此在色彩丰富度和平衡性之间取得了更好的折中。正方形方案适合需要四种不同颜色但又要求视觉平衡的设计场景。使用正方形方案时，同样建议选择一个颜色作为主色，其他三个颜色作为辅助色和强调色。正方形方案在数据可视化、多标签界面、分类信息展示等需要多种颜色但又要求和谐统一的场景中表现出色。
分裂互补（Split-Complementary）
分裂互补是互补色方案的一种变体，选择主色加上互补色两侧各30°的颜色（共3色）。例如，如果主色是蓝色（240°），互补色是橙色（60°），那么分裂互补色就是橙色两侧的黄色（30°）和红色（90°）。分裂互补方案比纯互补色更柔和，保留了对比感但降低了视觉张力，是一种既安全又有效的配色方式。分裂互补特别适合以下场景：需要对比但又担心纯互补色过于刺激的设计；需要三种颜色但又觉得三角色过于丰富的场景；面向大众用户、需要广泛接受度的产品。本工具的分裂互补方案会自动计算两侧的偏移角度，确保生成的配色既具有对比感又不会过于突兀。
类似色（Analogous）
类似色是指色轮上相邻的颜色（通常相差30°以内），如蓝-蓝绿-绿、红-橙-黄等。类似色方案天然和谐，因为相邻颜色共享相近的色相成分，视觉上自然融合。类似色广泛用于品牌设计、自然主题页面、柔和UI界面等需要统一、和谐视觉感受的场景。类似色方案的优势在于和谐统一、视觉舒适；缺点是缺乏强烈对比，可能导致信息层次不够清晰。最佳实践是通过亮度差异来建立层次感，或加入一个小面积的互补色作为强调色来打破单调。例如，在蓝-蓝绿-绿的类似色方案中，可以加入少量橙色作为CTA按钮的颜色，既保持了整体的和谐感，又提供了必要的视觉焦点。
色相（Hue）
色相是色彩的首要属性，决定了"是什么颜色"——是红、橙、黄、绿、蓝还是紫。在HSL色彩模型中，色相用角度表示，范围为0°到360°，在色轮上均匀分布。红色位于0°（或360°），黄色位于60°，绿色位于120°，青色位于180°，蓝色位于240°，品红色位于300°。色相是配色方案的核心参数——本工具的所有配色方案类型（互补色、三角色等）都是基于色相之间的角度关系来确定的。改变主色的色相会从根本上改变整个配色方案的色调和氛围。色相的选择通常与品牌定位、情感传达和使用场景密切相关。
饱和度（Saturation）
饱和度是色彩的第二个属性，决定了"颜色有多纯"——是鲜艳还是灰暗。在HSL色彩模型中，饱和度用百分比表示，范围为0%到100%。100%饱和度表示完全纯正的颜色，0%饱和度表示完全去饱和的灰色。饱和度对配色效果有重要影响：高饱和度的配色鲜艳、活泼、引人注目，适合需要活力和冲击力的设计；低饱和度的配色柔和、沉稳、优雅，适合需要安静和专业感的设计。在实际应用中，设计师经常通过调整饱和度来控制配色的"情绪"——同一组色相搭配在不同饱和度下可以传达完全不同的情感。本工具的饱和度滑块允许用户在不改变色相关系的前提下自由调整色彩纯度。
亮度（Lightness / Brightness）
亮度是色彩的第三个属性，决定了"颜色有多亮"——是明亮还是暗沉。在HSL色彩模型中，亮度用百分比表示，范围为0%到100%。100%亮度为白色，0%亮度为黑色，50%为纯色。亮度在配色中起着关键作用，因为它直接影响可读性和视觉层次。在深色背景上使用高亮度的文字和按钮，或在浅色背景上使用低亮度的文字和元素，是确保足够对比度的基本原则。WCAG无障碍标准建议正文文字与背景的对比度至少达到4.5:1，大文字至少达到3:1。本工具的亮度滑块让用户能够轻松调整配色方案的整体明暗，确保在不同背景色上都能获得良好的可读性。
HEX颜色值
HEX颜色值是网页设计中最常用的颜色表示格式，使用十六进制数来表示RGB三个通道的值。格式为#RRGGBB，其中RR表示红色通道（00-FF），GG表示绿色通道（00-FF），BB表示蓝色通道（00-FF）。例如，#4F46E5表示红色值为79（0x4F）、绿色值为70（0x46）、蓝色值为229（0xE5）的颜色。HEX格式的优势在于简洁、易复制，可以直接粘贴到CSS代码中使用。本工具生成的所有配色方案颜色都以HEX格式输出，并提供一键复制功能，方便用户直接应用到项目中。HEX颜色值与CSS的color和background-color属性完全兼容，是前端开发中最常用的颜色表示方式。
60-30-10法则
60-30-10法则是室内设计和视觉设计中经典的色彩分配比例原则。该法则建议将配色方案中的颜色按照60%、30%、10%的比例分配到设计中：60%的面积使用主色（通常是背景色或大面积色块），30%的面积使用辅助色（用于次要元素和装饰），10%的面积使用强调色（用于按钮、链接等需要突出的元素）。这种比例分配能够创造视觉上平衡且有层次感的设计——主色奠定整体基调，辅助色丰富视觉层次，强调色吸引注意力。本工具生成的配色方案中，颜色卡片的排列顺序通常就遵循这个法则：第一个颜色为主色（60%），第二个颜色为辅助色（30%），其余颜色为强调色（10%）。