UD5工具箱
步骤一：了解界面布局
打开工具页面后，你会看到一个清晰的双面板布局。左侧面板用于HSL色彩空间的调整，右侧面板用于HSV色彩空间的调整。每个面板顶部都有一个大的颜色预览区域，下方是三个参数滑块：色相（H）、饱和度（S）和亮度/明度（L/V）。在预览区域下方，会实时显示当前颜色的完整代码（如HSL: hsl(210, 55%, 57%)）。页面顶部还有一个HEX输入框，用于反向转换。熟悉这个布局是高效使用工具的第一步。
步骤二：使用HSL面板调整颜色
在左侧HSL面板中，你可以通过三种方式调整颜色：拖动滑块、直接输入数值，或使用微调按钮。色相（H）滑块控制颜色的种类，范围是0度到360度，对应色相环上的不同位置。饱和度（S）滑块控制颜色的鲜艳程度，0%为灰色，100%为最鲜艳。亮度（L）滑块控制颜色的明暗，0%为黑色，100%为白色，50%为正常亮度。每调整一个参数，颜色预览会立即更新，同时右侧面板的HSV值也会同步显示。建议先调整色相找到大致的颜色方向，然后微调饱和度和亮度达到理想效果。
步骤三：使用HSV面板调整颜色
右侧面板的HSV调整方式与HSL类似，但要注意明度（V）的含义不同。HSV的明度表示颜色的最大分量值，0%为黑色，100%为最亮状态。在HSV中，当饱和度（S）为100%且明度（V）为100%时，颜色处于最鲜艳状态。如果你更习惯画家的调色思维（从纯色开始，添加白色或黑色），HSV面板会更适合你。同样，调整HSV参数时，左侧的HSL值会实时同步更新，方便你比较两种色彩空间的差异。
步骤四：使用HEX反向转换
如果你已经有了一个HEX颜色码，想要了解它在HSL和HSV中的表示，可以使用顶部的HEX输入框。直接输入3位或6位十六进制码（如F00或#FF0000），按回车或点击应用按钮，工具会立即显示该颜色在HSL和HSV中的完整参数。这个功能在分析现有颜色、理解颜色构成，或者需要将HEX转换为更易编辑的格式时非常有用。注意：输入时可以省略#前缀，工具会自动处理。
步骤五：使用预设颜色快速选择
页面顶部的预设颜色区域提供了一系列常用颜色。点击任何预设颜色，工具会立即加载该颜色，并在HSL和HSV面板中显示其完整参数。这是一个快速开始的好方法，特别适合需要选择一个基础颜色然后进行微调的场景。预设颜色涵盖了常见的UI颜色、基础色和一些特殊用途的颜色，如警告色、成功色等。你可以将预设颜色作为起点，然后在任一面板中调整到满意的效果。
步骤六：复制和应用颜色值
当调整到满意的颜色后，你可以复制所需的格式直接使用。工具会显示四种格式：HEX、RGB、HSL和HSV。对于CSS开发，HEX和HSL是最常用的。点击对应的值即可复制到剪贴板。在CSS中使用时，HEX可以直接用于color属性（如color: #4A90D9），HSL也可以直接使用（如color: hsl(210, 55%, 57%)）。如果需要在JavaScript中使用，RGB格式可能更方便。复制后，直接粘贴到你的代码中即可。
步骤七：高级技巧 - 创建和谐配色
利用HSL的特性可以轻松创建和谐的配色方案。在HSL面板中，保持色相（H）不变，只调整饱和度和亮度，可以生成同色系的颜色变体，非常适合创建渐变或阴影效果。保持饱和度和亮度不变，只调整色相，可以生成互补色或类似色，用于创建对比或和谐的配色。例如，如果你的主题色是蓝色（H=210），将H调整到30会得到橙色（互补色），调整到180会得到青色（类似色）。这种基于HSL的配色方法比随机选择颜色更加科学和系统。