颜色转换器（HEX / RGB / HSL / HSB 互转）

这个颜色转换器能做什么

写网页、做图、调 UI 时最烦的是颜色记法对不上：设计稿里给的是十六进制「#FF00AA」，到了代码里要转成 rgb(255, 0, 170) 才能用；有的设计软件只认 HSL，有的又只认 HSB。这个工具把 HEX、RGB、HSL、HSB 四种最常见的颜色记法放在同一个页面里，你在任意一格填一个颜色，其余三格会实时算出来，上面的色块同步变成这个颜色——不用来回切换页面、不用记换算公式。全程在浏览器本地完成，颜色不会上传，网页配色可以直接粘贴。

• 四格式任意互转：HEX、RGB、HSL、HSB 四格随便从哪个开始填，其余三格自动更新。
• 实时色块预览：上方色块始终等于当前颜色，四种格式之间永远是同一块颜色。
• 宽容输入：HEX 支持 3 位或 6 位、带不带 # 都行；RGB 支持逗号或空格分隔，也认 rgb(...) 写法；HSL/HSB 的百分号可省可不省。
• 一键复制：四格各自带复制按钮，复制出来的字符串可直接粘进 CSS、设计软件或代码里。
• 中文报错：输入不合法时会明确指出是哪一格的哪一项越界，而不是静默不反应。

怎么用

1. 打开页面时已给出一个示例颜色「255, 0, 170」，四格与色块都是它。
2. 在你想改的那一格输入新颜色——比如在 HEX 一格输入 #4A90D9。当你输到第 3 位或第 6 位合法时，其余三格和色块立即跟着变。
3. 点某一格右侧的「复制」按钮，把该格式的字符串复制到剪贴板，粘进你的代码或设计稿。
4. 想从头来就点「清空」；想找回最初的例子，点「填个示例」。

四种颜色记法是什么关系

屏幕上的每一种颜色都可以写成多种形式，它们只是同一个像素的不同描述。RGB 是最底层的三通道（红、绿、蓝各 0-255）；HEX 是把三个通道的十进制数写成十六进制拼起来的简记；HSL 和 HSB 则换了一种更贴近人直觉的坐标系——用色相（0-360 的色环角度）、饱和度（颜色浓淡）再加一个明暗轴来描述同一个颜色。工具内置的标准公式能在这些记法之间精确互转，换算过程都在浏览器里完成。

关于数据安全

所有换算都由浏览器里的 JavaScript 完成，输入内容不会上传到任何服务器，页面也没有引入外部脚本。Web 色板、设计稿里的配色、代码里的颜色值都可以直接粘贴，关掉页面后不留任何记录。

常见问题

HEX 和 RGB 有什么区别？

RGB 用三个 0 到 255 的数字表示颜色的红、绿、蓝三个通道，比如 rgb(255, 0, 170)。HEX 是同一件事的十六进制写法，把每个通道的 0-255 转成两位十六进制数再拼起来，"FF00AA" 里的 FF 就是 255、00 是 0、AA 是 170。两者表达的像素颜色完全相同，只是给人看的记法不一样，所以可以无损互转。

HSL 和 HSB 又表示什么？

HSL 的 H 是色相（0-360 的色环角度）、S 是饱和度、L 是亮度；HSB 的 H、S 相同，第三个通道换成 B（明度 Brightness）。区别在于最亮的值怎么定义：HSL 里最亮的是白色（L=100%），HSB 里最亮的是纯色本身（B=100%）。所以同一组 H 和 S，L 与 B 的数值不会相等，但它们都能还原回同一个 RGB 颜色。

HSL、HSB 和 RGB 哪个是同一个颜色的等价写法吗？

是。本工具四种格式里，只要它们在屏幕上渲染出同一个像素，就互为等价写法：HEX 与 RGB 是同一份三通道数值的十进制/十六进制两种记法，HSL 与 HSB 是把同一份 RGB 数值换算到不同的极坐标模型。不管从那一个输入，其余三个都会算成同一块颜色，预览色块在四种格式下始终是同一种颜色。

为什么 HSL 里的 L=100% 和 HSB 里的 B=100% 长得不一样？

因为两个模型的轴定义不同。HSL 的 L 是「亮度」，100% 表示最亮即纯白，所以一根色在 L 接近 100% 时饱和度会被压没、看起来发白；HSB 的 B 是「明度」，100% 表示这个色相的纯色达到最大输出，给定 H、S 时 B=100% 一定是纯色本身。于是同样写着 100%，HSL 偏白、HSB 是纯色，这是模型设计使然，不是换算错了。

我输入的颜色会被上传吗？

不会。所有换算都由浏览器里的 JavaScript 完成，页面没有任何服务器请求，也没有外部脚本。你填的 HEX、RGB、HSL、HSB 只在你自己的设备上计算，关掉页面后不留任何记录，配色、网页色板可以直接粘贴。