HEX、RGB 与 HSL：选择网页颜色格式

这些表示法中的每个颜色，都是同一个 sRGB 颜色穿着不同外衣。HEX 是用十六进制书写的 RGB：#4F46E5 就是红、绿、蓝三个通道各两位十六进制数字。rgb(79, 70, 229) 用十进制陈述同样的三个通道，而 hsl() 把同一个像素描述为色轮上的一个位置。

在 sRGB 内三者之间的转换是无损的：#4F46E5、rgb(79, 70, 229) 与等价的 hsl() 值可以精确往返，因此切换表示法是呈现层面的选择，而不是颜色的改变。

• HEXHEX 紧凑且稳定，适合在设计工具与代码之间复制粘贴，这就是为什么色板和设计规范通常以 hex 发布。
• RGBRGB 读作三条 0 到 255 的通道强度，与屏幕和图像格式实际存储像素的方式一致。
• HSLHSL 读作色相、饱和度与亮度——更接近人描述颜色的方式，按意图调整也容易得多。

透明度可以接到每种表示法上。rgb() 与 hsl() 接受第四个参数——rgba(79, 70, 229, 0.5)——而 HEX 扩展出了八位形式 #4F46E580，其中最后一对是从 00 到 FF 的透明度。

• 0–1 或 00–FF函数式写法中透明度从 0 到 1，hex 中从 00 到 FF；0.5 与 80 是同一个半透明值。
• 在表面上测试半透明叠加层会与其下的任何内容相乘，因此半透明令牌需要在它可能落到的每种表面上测试。
• 相关联的令牌当设计系统同时发布同一色相的实色与半透明版本时，一个八位 hex 能让它们的关系一目了然。

直接编辑 RGB 通道是算术；按意图编辑在 HSL 里更容易。浅色是同一色相提高亮度，深色是同一色相降低亮度，柔和变体是同一色相调低饱和度——三次单旋钮操作，而不是三条通道一起漂移。

色阶生成器把这条色阶机械化：给它一个 hex 颜色，它向黑色与白色方向混合，返回三到二十个等间距的 hex 色阶——悬停状态与边框色调都来自同一个源颜色，而不是手工挑选的猜测。

• 浅色与深色浅色与深色：固定色相与饱和度，把亮度从近白扫到近黑，就得到一条可用于背景、状态与文字的实用色阶。
• 饱和度状态柔和与鲜艳变体只来自饱和度旋钮，悬停与禁用状态正是这样留在同一色系里的。
• 色相旋转色相旋转产生相关颜色：类似色邻居相距约三十度，互补色相距一百八十度。

配色和谐是色相轮上的几何：互补对相对而坐，三色组把色轮三等分，类似色聚成一团。HSL 让这笔账清晰可见——改动一个数字，整套方案随之移动。

配色方案生成器应用的正是这个模型。从一个六位种子 hex 出发，它按六种经典方案——类似、互补、分裂互补、三色、四色与单色——生成五色色板，并按 3、4.5 或 7 的 WCAG 对比度目标检查每个色块与黑、白文字的对比。

结果可导出为 CSS 自定义属性与 JSON，色板可以直接进入样式表或令牌文件。因为引擎是确定性的，同样的种子与方案永远重现同样的五种颜色——分享种子，而不是截图。

现代 CSS 合并了旧的函数形式：空格分隔的通道加可选的斜杠透明度——rgb(79 70 229 / 0.5)——取代了逗号重重的 rgba()。第 4 级规范还加入了 hwb()、lab() 与 oklch() 等表示法，用于更广色域与感知均匀的色阶。

无论你标准化哪种表示法，混合两种颜色都是逐通道运算：混色器按选定权重混合两种颜色，并以 RGBA 与 hex 报告结果，让你算出两个品牌色之间的中点，而不是凭眼睛估。

同一个工具还兼任表示法桥梁：以一种形式输入颜色，以另一种形式读取结果；当规范表写 hex 而样式表用 rgb() 时，让算术保持诚实。

• 新语法空格分隔通道加斜杠透明度在所有现代浏览器中都有效；逗号形式作为旧式别名继续受支持。
• 为什么是 OKLCHoklch() 修正了 HSL 的真实缺陷：HSL 中相等的亮度步进在不同色相下看起来并不一样亮，而 OKLCH 保持感知亮度一致。
• 有意识地采用在解决问题的地方采用新表示法——一致的色阶、广色域屏幕——在工具链与习惯已顺畅的地方继续用 hex 或 rgb()。

色板很少从理论出发；它们从截图、Logo 或照片出发。从源文件读取精确像素值，胜过对着色轮目测色块。

图片拾色器在标签页中打开 PNG、JPEG 或 WebP，并报告你点击像素的精确 RGBA 值——无论是从旧素材中找回品牌色，还是检查抗锯齿边缘到底含什么，都很实用。

一切在本地运行：图片在你的浏览器中解码，从不上传——当素材是尚未发布的设计时这一点尤其重要。把取到的色值带入色阶或配色工具，从素材到色板的整条链路都留在你的设备上。