颜色转换器 · HEX RGB HSL 三向互转

工具介绍

颜色转换器支持在 HEX（#rrggbb 十六进制）、RGB（红绿蓝三通道 0-255）、HSL（色相/饱和度/亮度）三种最常用的 Web 颜色表示法之间互转。每次修改任一进制，另两种表示法立即同步更新，色块也实时变化。工具设计上严格遵循「纯本地处理」——所有计算完全在你的浏览器里完成，既不会向任何服务器上传你的颜色值，也不会留下任何访问记录。对 UI 设计师、前端工程师、样式调试、色卡整理都很适用。

使用方法

在顶部选择当前要输入的进制（HEX / RGB / HSL）
在输入框里填写颜色值，另两种表示法会即时同步显示在右侧结果区
下方色块会实时反映当前颜色，可用于视觉对比
点击结果行即可复制对应值（浏览器原生复制）

计算公式

一、HEX ↔ RGB：
  每 2 位十六进制字符对应一个 0-255 通道整数。
  例：#36A2EB
    36 (hex) = 3×16 + 6 = 54  → R
    A2 (hex) = 10×16 + 2 = 162 → G
    EB (hex) = 14×16 + 11 = 235 → B

二、RGB → HSL：
  先把 R/G/B 归一到 [0, 1]：
    r = R/255, g = G/255, b = B/255
    max = max(r,g,b)    min = min(r,g,b)

  L（亮度）= (max + min) / 2
  S（饱和度）= (max - min) / (1 - |2L - 1|)   L ∈ (0,1)
  H（色相）根据 max 所在通道分支计算：
    max = r → H = 60 · ((g-b)/(max-min) mod 6)
    max = g → H = 60 · ((b-r)/(max-min) + 2)
    max = b → H = 60 · ((r-g)/(max-min) + 4)

三、HSL → RGB：按标准反向推导（详见 colorConverterProcess.ts）。

常见场景

场景 1 · 前端把 HEX 色板翻译成 CSS hsl()

设计给的色板是

场景 2 · 调试时从截图吸色后想要 CSS 变量

吸色工具给出 RGB(54, 162, 235)，但 CSS 变量想用 HEX 节省长度。输入 RGB 立即得到

场景 3 · 色卡归纳整理到设计系统

整理 30 种品牌色到 Figma Token，每一条都要标 HEX / RGB / HSL 三种格式。打开本工具连续输入即可，不用在多个网站间跳来跳去。

常见问题

颜色值会上传到服务器吗？

不会。所有转换完全在你的浏览器本地完成，我们看不到也不会记录你输入的任何颜色值。

支持带 alpha 通道的

当前版本只支持 3 位（#RGB）和 6 位（#RRGGBB）标准格式，不处理 alpha 通道。如需透明度可单独使用 rgba() / hsla() 语法手写。

为什么 HSL 往返有时 RGB 会差 1 个点？

HSL 显示值是整数化的（H 度、S% 和 L% 都是整数），转回 RGB 时会有 ±1 的舍入误差。这是行业通行做法（浏览器 DevTools 也一样），视觉上无法察觉差异。

能生成对比色 / 互补色 / 邻近色吗？

本工具只做格式互转，不做色彩理论衍生。互补色可在 HSL 模式下手动把色相 H 加减 180° 得到；邻近色就是 H±30°。

结果里的 CSS 字符串能直接粘到代码里吗？

可以。`rgb(r, g, b)` / `hsl(h°, s%, l%)` / `#rrggbb` 三种格式在现代浏览器和主流 CSS 预处理器里都是合法值，直接粘贴即可。

色盲 / 色弱用户使用体验会有问题吗？

输入完全依赖数值（HEX / RGB / HSL 文字），不依赖色块识别。色块只是辅助展示，所有核心信息都以数字呈现。