颜色代码转换工具 - RGB,HEX,HSL,HSV互转

1输入颜色值开始转换打开颜色代码转换工具页面，您会在界面中看到四个输入区域，分别对应 HEX、RGB、HSL 和 HSV 四种颜色格式。您可以从任意一种格式开始输入颜色值。例如，如果您手中有一个 HEX 颜色代码 #3498DB，在 HEX 输入框中输入 3498DB（无需输入 # 前缀），工具会自动将这个颜色转换为 RGB(52,152,219)、HSL(204°,70%,53%) 和 HSV(204°,76%,86%) 三种格式，并同步显示对应的预览色块。

2使用取色器拾取颜色如果您需要从屏幕上的某个位置获取颜色，可以点击界面上的取色器按钮（通常显示为吸管图标）。点击后，鼠标会变成取色器样式，您可以在屏幕上任意位置点击拾取颜色。拾取到的颜色会自动填充到所有四种格式的输入框中，并显示对应的预览色块。这个功能在需要从参考图片、截图或其他网页中提取颜色时非常方便。取色器使用浏览器原生的 EyeDropper API，兼容 Chrome、Edge、Opera 等基于 Chromium 的浏览器。

3生成随机颜色寻找灵感当您需要寻找设计灵感或测试颜色效果时，可以点击随机颜色按钮。工具会自动生成一个随机颜色，并同时填充到 HEX、RGB、HSL、HSV 四种格式中。每次点击都会产生不同的颜色，您可以通过反复点击来探索各种颜色组合。随机颜色覆盖了完整的颜色空间，从高饱和度的鲜艳色彩到低饱和度的柔和色调都有可能出现。

4复制所需的格式代码转换完成后，每种格式旁边都有一个独立的复制按钮。根据您的使用场景，点击对应格式的复制按钮即可将颜色代码复制到剪贴板。例如，如果您需要将颜色用于 CSS 样式，可以复制 HEX 格式；如果需要用于 JavaScript Canvas 绘图，可以复制 RGB 格式；如果需要调整颜色的亮度或饱和度，可以复制 HSL 格式进行参数修改。复制成功后工具会显示提示信息，确认操作已完成。

5实时预览色块效果在整个操作过程中，界面上的色块预览区域会实时显示当前颜色的实际效果。无论您是在 HEX、RGB、HSL 还是 HSV 中修改数值，色块都会即时更新。这种实时反馈机制让您无需依赖想象力去猜测颜色数值对应的实际效果，真正做到所见即所得。您还可以将色块区域的预览颜色与设计稿中的颜色进行对比，确认转换结果是否准确。

63位与6位HEX格式说明本工具同时支持 3 位简写 HEX 和 6 位标准 HEX 两种格式。3 位简写 HEX 使用三位十六进制数表示颜色，例如 #F00 代表红色，等价于 #FF0000。在 3 位简写中，每一位会被自动扩展为两位相同的字符：#ABC 等价于 #AABBCC。6 位标准 HEX 使用六位十六进制数，前两位表示红色通道（00-FF），中间两位表示绿色通道（00-FF），最后两位表示蓝色通道（00-FF）。工具会自动识别输入的 HEX 长度并进行正确处理。