Color Converter

颜色转换器支持 HEX、RGB 和 HSL 三种颜色格式之间的实时转换。工具提供可视化的颜色预览区域，直观展示当前颜色。你可以在任意一种格式中输入颜色值，其他两种格式会自动同步更新。支持标准 HEX 格式（#RRGGBB），RGB 分量范围 0-255，HSL 的色相、饱和度和亮度分别以度数和百分数表示。

颜色转换在 Web 开发和设计中使用频繁。在 CSS 编写中，不同属性要求不同的颜色格式（如 background-color 可用任意格式，box-shadow 的 rgba 需要 RGB 分量）；在 JavaScript 中操作颜色时需要转换为可计算的格式；在设计稿中 Color Picker 通常输出 HEX，但 CSS 变量可能使用 HSL 以便于动态调整。该工具帮助开发者和设计师在不同格式间自由切换。

颜色中的十六进制值可以使用 进制转换器 单独查看每个颜色通道的十进制值，或使用 哈希生成器 理解十六进制与哈希值的关系。

不同颜色模型适用不同的场景：

• HEX（十六进制）：Web 中最常用的颜色表示方式，如 #3B82F6。紧凑、易于复制粘贴，但不直观。前两位=红，中间两位=绿，后两位=蓝。
• RGB（红绿蓝）：基于三原色叠加模型，范围 0-255。适合程序化颜色计算（如过渡动画），JavaScript Canvas API 使用此格式。
• HSL（色相/饱和度/亮度）：更符合人类直观感知的颜色模型。色相决定是什么颜色（0-360°），饱和度决定鲜艳程度，亮度决定明暗。适合创建颜色主题和微调颜色。

• HEX 简写：#ABC 是 #AABBCC 的简写形式，该工具使用完整 6 位格式。3 位简写需先展开为 6 位。
• 颜色空间限制：当前工具仅支持 sRGB 颜色空间，不支持 P3 广色域或其他色彩空间。在 P3 显示器上，sRGB 颜色可能显得饱和度不足。
• RGB 范围限制：RGB 各分量限制在 0-255 范围内，超出会被裁剪。HEX 格式自动限制在有效范围内。
• HSL 精度：HSL 的饱和度超过 100% 或亮度超过 100% 的表示在 CSS 中有效但该工具限制在标准范围内。

在设计选色、CSS 颜色值转换、或快速获取某种颜色的其他格式表示时使用此工具。对于代码中的颜色处理，推荐使用 color 库（如 chroma.js、TinyColor），它们提供完整的颜色操作、混合、变亮/变暗等高级功能。