HEX/RGB/HSL 在线互转：改一个值三种表示法同步更新

设计稿上标的是 #3498db，代码里用的是 rgb(52, 152, 219)，调色时你又想按"亮度再亮一点"来改——同一个颜色有三种常见写法，来回换算既费时间又容易抄错一位。

这篇用 NBTools 的颜色转换工具讲清楚：HEX、RGB、HSL 三种表示法怎么互转，各自适合什么场景，以及为什么调色时用 HSL 更顺手。工具在浏览器本地运行，颜色值不上传服务器。

三栏联动，改一个全跟着变

页面上有三组输入和一个预览色块，改动任意一栏，其余两栏和色块会立即同步，不需要点"转换"按钮：

• HEX：如 #3498db，一行搞定，最方便复制粘贴。
• RGB：红/绿/蓝三个 0–255 的数值。
• HSL：色相（0–360）/ 饱和度（0–100）/ 亮度（0–100）。

比如你在 HEX 栏粘贴 #3498db，RGB 会立刻显示 52, 152, 219，HSL 显示 204, 70, 53，顶部色块同步变色——所见即所得。

三种表示法各适合什么

为什么调色用 HSL 更顺手

HSL 把颜色拆成"是什么色 / 多浓 / 多亮"三个直观维度，所以微调只动一个数：

• 只改亮度 L：就能得到同一颜色的深/浅版本，非常适合做按钮的 hover 态、禁用态、卡片背景层级。
• 只改饱和度 S：得到更灰或更鲜的版本，适合弱化次要信息、做置灰效果。
• 只改色相 H：在保持明亮度一致的前提下换颜色，做多主题配色时整套色板不会忽明忽暗。

相比之下 RGB 要做"变亮 10%"，三个通道都得动，还容易整体偏色。实操流程建议：先用 HEX 定色 → 切到 HSL 微调 → 再复制结果 HEX。

HSL 的取值范围：色相 H 为 0–360（超出会自动折算回该范围），饱和度 S 与亮度 L 为 0–100，工具会自动把超出范围的输入收敛到边界值。

两个小功能：随机取色与一键复制

• 随机颜色：不确定用什么颜色时，点一下随机生成一个，三栏与预览同步刷新，适合做占位色、图表配色、灵感参考。
• 复制 HEX：把当前颜色以标准 HEX 格式（如 #3498db）复制到剪贴板，直接粘进 CSS 或设计工具，不用手动加井号。

常见问题

能直接从屏幕上吸取颜色吗

本工具做的是颜色值互转，不提供屏幕取色（吸管）功能。用法是：把你在设计稿、截图取色工具或代码里拿到的色值粘贴进 HEX 栏，工具会帮你换算成 RGB 与 HSL。

粘贴的 HEX 不带 # 可以用吗

建议带上 #：这是标准的 HEX 写法，复制出去也能直接用在 CSS 里。颜色库会自动识别并规范成小写 #rrggbb 格式。

HSL 里的数值超出范围会怎样

色相 H 超出 0–360 会自动折算回范围内（例如 370 等同于 10）；饱和度 S 与亮度 L 超出 0–100 会被收敛到边界值，不会报错。

怎么快速配出一组协调的颜色

先用本工具定下主色，再配合调色板生成工具基于色彩理论生成完整配色方案；如果还要检查文字与背景的对比度是否达标，可用WCAG 颜色对比度工具。

颜色数据会上传吗

不会。转换在浏览器本地完成，颜色值不上传服务器。