UD5工具箱
六种经典配色方案生成
工具内置了六种基于色轮理论的经典配色方案类型，每种方案都遵循精确的角度关系和色彩和谐原则。互补色方案（Complementary）选择色轮上相对180°的两个颜色，形成最强烈的视觉对比，适合需要突出重点元素的设计场景。三角色方案（Triadic）选择色轮上均匀分布的三个颜色（各差120°），比互补色更丰富但同样保持平衡，适合需要活泼多彩但又不失和谐的设计。矩形色方案（Tetradic）由两组互补色组成共四个颜色，提供了最丰富的色彩选择，适合复杂的多模块界面设计。正方形方案（Square）四色均匀分布各差90°，在丰富性和平衡性之间取得良好平衡。分裂互补方案（Split-Complementary）以主色加互补色两侧各30°的颜色，比纯互补色更柔和但保留了对比感。类似色方案（Analogous）选择色轮上相邻的颜色（30°以内），营造和谐统一的视觉氛围，适合自然主题和柔和风格的设计。用户只需点击对应的方案标签即可切换，所有配色结果实时更新。
主色选择与色轮交互
工具提供了一个可视化的色轮界面，用户可以直接点击色轮上的任意位置来选择主色。色轮上清晰地标注了当前主色的位置以及所选配色方案中其他颜色的位置，帮助用户直观地理解色彩之间的关系。色轮下方设有主色HEX输入框，用户可以手动输入精确的十六进制颜色值。输入框支持#号前缀的六位HEX格式（如#4F46E5），也支持不带#号的格式（如4F46E5）。当用户输入颜色值后，色轮会自动更新显示对应的位置，同时配色方案也会重新计算。这种双向交互方式既满足了直觉操作的需求，也满足了精确控制的需求。
饱和度与亮度调节
工具提供了两个独立的调节滑块，分别控制配色方案的饱和度和亮度。饱和度滑块的范围为0%-100%，控制色彩的纯度——100%表示完全饱和的鲜艳色彩，0%表示完全去饱和的灰色调。亮度滑块同样为0%-100%，控制色彩的明暗程度——100%表示最亮的白色，0%表示最暗的黑色。调节饱和度和亮度不会改变色彩的色相关系，这意味着配色方案的和谐性得以保持。例如，用户可以选择一个互补色方案，然后降低整体饱和度来获得更柔和的配色效果，或者提高亮度来获得更明亮的配色效果。滑块支持实时拖动，配色方案和UI预览会随滑块位置的变化即时更新，让用户能够直观地看到参数变化对配色效果的影响。
UI预览组件
工具内置了一个精心设计的UI预览区域，展示了配色方案在实际界面中的应用效果。预览组件模拟了一个典型的网站界面，包含Website Header区域、三种不同样式的按钮（主要按钮、次要按钮、强调按钮）和三个标签组件。主要按钮使用配色方案中的主色，次要按钮使用辅助色，强调按钮使用对比色。标签组件则展示了三种不同颜色的标签样式。通过这个预览区域，用户可以在生成配色方案后立即看到它在真实UI场景中的效果，无需切换到其他设计工具进行验证。预览区域支持响应式布局，在桌面端和移动端都能获得良好的展示效果。这个功能极大地提升了配色决策的效率，让用户能够在几秒钟内评估一个配色方案的适用性。
快捷预设色相选择
工具提供了一组精心挑选的快捷预设色相值，帮助用户快速找到视觉效果出色的起始颜色。这些预设值覆盖了常见的品牌色和设计色系，包括科技蓝、活力橙、自然绿、优雅紫等多种风格。用户只需点击预设标签，主色会自动切换到对应的色相，同时配色方案也会重新生成。快捷预设功能特别适合以下场景：当用户没有明确的色彩偏好时，可以从预设中寻找灵感；当用户想要快速对比不同色相的配色效果时，可以通过切换预设来高效探索；当用户需要为特定行业或主题选择配色时，可以选择与行业气质匹配的预设色相。每个预设值都经过精心调校，确保在默认饱和度和亮度下呈现出最佳的视觉效果。
HEX颜色值一键复制
工具为每个生成的颜色提供了HEX颜色值的一键复制功能。用户只需点击颜色卡片上的复制按钮，对应的HEX值就会自动复制到系统剪贴板，并显示"已复制到剪贴板"的提示信息。HEX颜色值是网页设计中最常用的颜色表示格式（如#4F46E5），可以直接粘贴到CSS样式表、设计工具或任何支持HEX格式的应用程序中使用。此外，工具还提供了"复制全部HEX"按钮，一键复制当前配色方案中所有颜色的HEX值，方便用户一次性获取完整的配色方案。这种便捷的复制功能消除了手动输入颜色值的繁琐过程，让用户能够将更多时间投入到设计创意中。
配色方案关系说明
当用户选择某种配色方案后，工具会在UI预览区域下方显示当前方案的关系说明。说明内容包括方案名称、色相关系（如"互补色 · 色相差180°"）以及该方案的特点和使用建议。例如，选择互补色方案时会显示互补色在色轮上相对、形成强烈对比的特点，并建议通过调整饱和度或亮度来平衡视觉效果。这些说明信息帮助用户深入理解每种配色方案的原理和最佳实践，不仅是一个配色工具，更是一个色彩理论的学习平台。说明信息会随着方案类型的切换而动态更新，确保用户始终能够获得准确、有用的参考信息。
响应式设计与跨平台支持
工具采用Bootstrap 5.3响应式框架构建，确保在各种设备尺寸上都能获得流畅的使用体验。在桌面端，色轮、控制面板和UI预览区域并排显示，充分利用大屏幕空间。在平板和手机端，布局会自动调整为单列堆叠模式，所有控件都适配触摸操作。色轮支持鼠标拖动和触摸滑动，饱和度与亮度滑块支持拖拽操作，方案标签支持点击切换。工具还支持现代浏览器的所有主流功能，包括CSS变量、Flexbox布局、渐变背景等，确保在Chrome、Firefox、Safari、Edge等浏览器上都能获得一致的渲染效果。所有计算完全在浏览器端完成，无需安装任何插件或软件，打开浏览器即可使用。