颜色格式转换器

Hex、RGB 与 HSL 是同一个 sRGB 三元组的三种写法

屏幕上的颜色是三个通道——红、绿、蓝——每个通道是一个 0 到 255 的字节。hex 把每个字节写成两位十六进制数字；`rgb()` 用十进制写出来；`hsl()` 则把同一组三元组重新描述为色相、饱和度和亮度，其中色相是色轮上的一个角度。三位的 `#rgb` 简写只是把每一位重复一次，`rgba()` 的百分比写法也只是同一组字节的另一种表达。

在 sRGB 范围内，这三者之间的转换是精确的，页面“同一个像素”的说法正建立在此。更广的色域或印刷需要设备配置文件，那是另一个颜色空间，页面刻意不去伪造这类转换。

Alpha 会一路带着走，而不是被丢掉

八位 hex，或者 `rgba()`/`hsla()` 值，前三个通道完全不透明，第四个通道表示透明度。页面在每种输出里都保留这个 alpha：`#ff000080` 变成 `rgba(255, 0, 0, 0.5)`，透明度经过 HSL 往返之后依然存在。alpha 不参与预乘，它只是与三通道并列的第四个分量；写回 hex 时，0 到 1 的透明度映射到 00 到 ff 的一个字节，因此打印时的取舍只影响显示精度，不影响颜色本身。四位的 `#rgba` 简写也适用：一位 alpha 会被重复成两位，再按同样规则处理。

HSL 往返之后仍然是同一个字节

转换到 HSL 时，内部保留完整精度，所以一个颜色转到 HSL 再转回来，会落在原来的字节上；页面只在打印小数时四舍五入。正是这个性质，让页面能用来挑选和比较颜色，而不只是把值读出来。

需要留意的是，HSL 并不是感知均匀的颜色空间：它的亮度不是人眼感知的明度，饱和度在不同色相下也不等价。sRGB 的三通道本身带有 gamma 编码，HSL 是在这组编码值上做线性换算，所以 `hsl(60 100% 50%)` 和 `hsl(240 100% 50%)` 看起来并不会同样亮。调色时把它当作操作坐标，而不是感知度量。

名字和对不上的颜色空间会被拒绝，而不是猜一个

像“red”这样的颜色名会被拒绝，因为名字经过本地化，在不同系统里有歧义，而三种数值格式没有这个问题；把名字猜成一个字节，也等于悄悄选定某一份调色板。CMYK、Lab 以及超过八位的 hex 出于同样的理由被拒绝：页面只在 sRGB 内转换并明说这一点，而不是假装印刷值或广色域值有一个 sRGB 答案。CSS 里的具名颜色有一百多个，不同工具对它们的取舍也不完全一致，拒绝比猜错更诚实。

打印出来的 HSL 丢掉了什么，以及 alpha 为什么是粗粒度的

HSL 那行只印一位小数，因为那是人能读的分辨率；而 0.1 个百分点的亮度大约相当于 8 位色阶的四分之一。把打印出来的 hsl() 字符串再粘回页面，可能落回相差一个字节的位置。页面内部的换算用的是精确值，所以 Hex 与 RGB 永远严格一致；只有在经过「打印字符串」这一趟往返时才可能漂一个色阶。

alpha 同样是 8 位通道。#80 是 128/255 = 50.2%，页面印成 0.5；#01 是 0.4%，#fe 是 99.6%。设计师想要「50%」，在字节里拿到的是 50.2%；把 alpha 存成小数的设计系统，也不该指望经过 hex 一次往返还能保住超过一个字节的精度。

这两点都不是靠多印几位小数就能修掉的缺陷：屏幕的像素本来就是 8 位，八位小数的 HSL 只是噪声。这是 hex 能携带的边界，页面写明它，而不是用一个更漂亮的数字把它藏起来。