颜色代码转换

HEX、RGB、HSL 会随输入实时同步，并显示颜色预览。数据不会离开你的浏览器。

#6366f1

在浏览器内实时转换 HEX、RGB、HSL

在 HEX、RGB 或 HSL 任意一个输入框中输入颜色，另外两种格式会立即更新，同时显示当前颜色的预览色块。无论是写 CSS、和设计师对接颜色值，还是单纯想看看某个颜色代码到底是什么颜色，都能直接用。

转换逻辑是自行实现的标准 sRGB↔HSL 换算公式（和浏览器内部处理 hsl()、rgb() 所用的公式相同），不依赖任何外部库。

为什么你输入的内容不会离开设备

这里的隐私来自结构，而不是承诺。没有"上传"这一步，是因为根本没有可供上传的服务器：

  • 转换全部在你的浏览器内运行。
  • 页面以静态文件的形式分发，不会发出携带你所输入颜色值的请求。
  • 源代码公开，任何人都可以查看（MIT）。
  • 可以离线使用——既然不依赖服务器，离线自然也能用。

想自己确认的话，转换时打开浏览器的网络（Network）面板——没有任何请求携带你输入的内容。 查看源代码。

使用方法

  1. 在任意一个输入框中输入颜色

    输入 HEX 代码（#fff 或 #ffffff）、RGB 值（rgb(255,0,0) 或 255,0,0）、或 HSL 值（hsl(0,100%,50%) 或 0,100%,50%）。

  2. 另外两个会自动更新

    你没有输入的另外两个格式会自动更新为等价的颜色，颜色预览色块也会随之改变。

  3. 无效输入只在该字段提示

    如果输入的内容对该格式无效，只有那一个字段会显示错误提示；另外两个字段会保留最后一次有效的值，不会被清空。

常见问题

我输入的内容会被上传到某个地方吗？

不会。转换全部在你的浏览器内完成。没有服务器端处理，所以你输入的颜色值没有离开设备的途径。源代码公开，你可以在浏览器的网络（Network）面板里确认这一点。

HEX、RGB、HSL 分别支持哪些写法？

HEX 支持 #fff 或 #ffffff（开头的 # 可省略，不区分大小写）。RGB 支持 rgb(r,g,b) 或直接写 r,g,b（每个值 0-255）。HSL 支持 hsl(h,s%,l%) 或直接写数值（色相 0-360，饱和度、亮度 0-100）。

支持 CMYK、HSB/HSV 或 CSS 命名颜色（如 "tomato"）吗？

不支持。这个工具刻意只专注于 HEX、RGB、HSL 三种。CMYK 和 HSB/HSV 是前提不同的另一套颜色模型，命名颜色本质是固定对照表而不是换算，都不在这个工具的范围内。

可以从图片里取色（吸管）吗？

这个工具做不到。从图片取色是另一个工具（吸管功能）的职责。这个工具只负责在你输入的颜色代码之间互相转换。

输入无效的值会怎样？

只有你正在编辑的那个字段会显示行内错误提示。另外两个字段和颜色预览会继续显示最后一次有效的颜色，不会因为一次输入失误就全部清空。

可以离线使用吗？

可以。它是 PWA，第一次访问后会被缓存，没有网络也能使用。你也可以把它添加到主屏幕。