UD5工具箱
什么是 HEX 颜色代码？
HEX 颜色代码是用十六进制数字表示颜色的格式，以 # 号开头，后面跟随六位十六进制数字（0-9 和 A-F），分别代表红（RR）、绿（GG）、蓝（BB）三个颜色通道的值。例如 #FF5733 表示红色通道值为 FF（255），绿色通道值为 57（87），蓝色通道值为 33（51）。HEX 还支持 3 位简写形式，如 #F00 等价于 #FF0000（纯红色）。HEX 是网页设计和 CSS 样式中最常用的颜色表示法，几乎所有设计软件和代码编辑器都支持 HEX 格式的颜色输入。
RGB 和 HEX 有什么区别？
RGB 和 HEX 本质上表示的是同一种颜色信息，只是书写格式不同。RGB 使用十进制数字表示每个通道的值（0-255），格式为 rgb(255,87,51)；HEX 使用十六进制数字表示（00-FF），格式为 #FF5733。两者之间可以完全互相转换，不丢失任何信息。HEX 格式更紧凑，常用于 CSS 颜色定义；RGB 格式更直观，每个通道的值直接对应亮度，便于理解。在实际使用中，选择哪种格式取决于个人习惯和具体使用场景，两者在浏览器中渲染效果完全相同。
什么是 HSL 颜色格式？
HSL 是 Hue（色相）、Saturation（饱和度）、Lightness（亮度）的缩写，是一种更符合人类直觉的颜色表示方式。色相用 0°-360° 的角度表示颜色种类（0° 红色、120° 绿色、240° 蓝色），饱和度用百分比表示颜色的鲜艳程度（0% 灰色、100% 纯色），亮度用百分比表示明暗（0% 黑色、50% 正常色、100% 白色）。HSL 的优势在于调整亮度和饱和度时非常直观，例如想让颜色变暗只需降低亮度值，想让颜色变灰只需降低饱和度值。CSS3 原生支持 hsl() 函数格式。
HSV 和 HSL 有什么不同？
HSV 和 HSL 虽然前两个参数相同（色相和饱和度），但第三个参数含义不同。HSL 的 Lightness（亮度）是颜色的明暗程度，50% 为正常纯色，0% 为黑色，100% 为白色。HSV 的 Value（明度）表示颜色中光的含量，100% 为最亮状态。简单来说，HSV 更接近颜料混合的思维方式，而 HSL 更适合网页设计中调整颜色深浅。在实际应用中，HSL 在 CSS 中有原生支持（hsl() 函数），使用更加方便；HSV 常见于图像处理软件和取色器中。
如何在 CSS 中使用转换后的颜色？
转换后的颜色可以直接用于 CSS 样式属性中。使用 HEX 格式：color: #FF5733; background-color: #3498DB;。使用 RGB 格式：color: rgb(255,87,51); background-color: rgb(52,152,219);。使用 HSL 格式：color: hsl(11,100%,60%); background-color: hsl(204,70%,53%);。CSS3 还支持带透明度的颜色格式：rgba(255,87,51,0.5) 表示半透明红色，hsla(11,100%,60%,0.5) 表示半透明 HSL 红色。在本工具中复制对应格式的代码后，直接粘贴到 CSS 样式中即可使用。
颜色转换有哪些实际用途？
颜色转换在多个场景中都有实际用途。前端开发中，设计稿提供的颜色格式可能与 CSS 要求的格式不同，需要转换；调试样式时需要微调颜色亮度，使用 HSL 格式调整最为方便；实现颜色主题切换时需要在不同格式间灵活转换。图像处理中，从截图或照片中取色后通常得到 RGB 值，需要转换为 HEX 供 CSS 使用。设计工作中，设计师在不同软件间传递颜色信息时可能遇到格式不兼容的问题，需要统一转换。教育学习中，理解不同颜色模型有助于深入掌握色彩理论和视觉设计原理。