工具
指南

颜色转换

开发

HEX、RGB、HSL 互转，并带实时预览与色板。

100% 客户端 无后端
HEX
RGB
HSL
CSS 变量
#4f46e5
本页内容

什么是颜色转换器？#

颜色转换器把同一个颜色在不同写法之间翻译。设计师从 Figma 给你一个 HEX 值，CSS 里你可能更习惯写 rgb() 或 hsl()，设计令牌（design token）流水线要的是一个 CSS 变量声明，而某些图表库要求的却是带 alpha 通道的 RGBA 元组。同一个颜色换着不同的”马甲”出现，你往往要手动换算或者对着计算器来回猜，既慢又容易抄错。

本页一次性给你全部四种写法。输入或选取一个颜色，立刻同时得到它的 HEX、RGB、HSL 以及可直接粘贴的 CSS 变量声明，外加一块实时预览色块和一条从这个颜色本身推导出的五档明暗渐变色板——全部在浏览器本地计算完成。

HEX、RGB、HSL 之所以长期并存，是因为各自擅长不同的活儿。HEX（#4f46e5）紧凑，统治了 CSS、Figma 导出和品牌规范。RGB（rgb(79, 70, 229)）把红/绿/蓝三个通道写得明明白白，是图像代码和 canvas 像素操作的预期格式。HSL（hsl(243, 75%, 59%)）拆成色相、饱和度、亮度三段，是人类唯一能直接”想”的颜色模型——“再亮 10%“在 HSL 里只是改一个数字，在 RGB 里却是三个数字一起乱跳的麻烦事。

如何使用#

  1. 用下面两种方式之一设定输入颜色：
    • 点击左侧的色块方块，弹出系统原生取色器，可视化选色。
    • 或在旁边的文本框里直接输入。支持 HEX（#4f46e5、#abc、或带透明度的 8 位 #4f46e5ff）、rgb()/rgba()、hsl()/hsla()。
  2. 在右侧的列表里读取结果——HEX、RGB、HSL、CSS 变量。每个字段都是只读的，点进去复制即可，也可以对照着写代码。
  3. 留意右侧的大块预览，它会被当前颜色填满，方便你跟设计稿对一眼。
  4. 用预览下方那条五色色板。它会按 HSL 亮度每档 ±10 生成 darker/dark/base/light/lighter 五个变体——做 hover/active 状态、或者从单一品牌色拉一条同色系渐变时特别顺手。
  5. 状态行会确认转换成功，或在你输入无法识别时给出 Invalid color（颜色无效）提示。

主要特性#

  • 三入四出。 粘贴 HEX、rgb() 或 hsl()，一次性返回 HEX、RGB、HSL 和 CSS 变量声明。
  • 支持透明度。 8 位 HEX（#rrggbbaa）和 rgba()/hsla() 输入会带着 alpha 通道一路传到输出，半透明颜色能正确往返。
  • 同色系色板生成。 五档明暗不是预设的固定梯度，而是从你当前颜色的 HSL 推导出来，保证看起来始终是”一家人”。
  • 可直接复制的 CSS 变量。 --color-brand: #4f46e5; 这一行直接粘进 :root 块就能用，后面再改成你的令牌名即可。
  • 100% 客户端运行。 没有后端，没有网络请求，你的品牌色永远不会离开本页。

实战示例#

本页默认载入靛蓝色 #4f46e5。在这个输入下，四个字段会这样填上：

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

注意 HSL 写法 hsl(243, 75%, 59%) 读起来几乎像一句话：色相 243（色轮上一个偏蓝紫的角度）、饱和度 75%（相当鲜艳）、亮度 59%（中等偏亮，比中灰略亮一点）。如果设计师让你”hover 时稍微暗一点”，你只要把 59 改成 49，得到 hsl(243, 75%, 49%)——而这正是下方色板里 dark 那个色块的颜色，旁边的 light 是 69%，两端的 darker/lighter 分别落在 39% 和 79%。

如果你是从一个已有的 CSS 变量出发，把它的值粘进文本框即可。rgba(79, 70, 229, 0.5) 会被解析为同一个靛蓝、但带 50% 不透明度，HEX 输出会变成 #4f46e580（8 位，alpha 0x80 ≈ 0.5），可以直接粘进偏好 HEX 写法的样式表。

常见问题#

设计师给的是 #4f46e5，但开发者工具里显示 rgb(79, 70, 229)，这是同一个颜色吗？#

完全一样。HEX 和 RGB 只是同一个 sRGB 数值的两种序列化。#4f46e5 按字节拆成 4f、46、e5，正是 79、70、229 的十六进制写法。哪种顺手就用哪种，CSS 视它们为完全相同。

什么时候该用 HSL 而不是 HEX？#

凡是想”凭感觉”调色的时候。变暗、变亮、降饱和、从品牌色拉一条五档同色系，在 HSL 里都只是改一个数字；在 RGB 里却是三个数字的痛苦平衡。HEX 适合存储和复制粘贴，HSL 适合编辑。

为什么色板在很深或很浅的颜色附近看起来不太均匀？#

生成器按固定 10 个点的步长移动亮度，并在 0% 和 100% 处夹断。靠近这两个极限时步长会被压缩，因为已经没有移动空间——一个本来就在 95% 亮度的颜色，往”更亮”方向只剩 5 个点就撞到纯白了。这是 HSL 色彩空间本身的性质，不是 bug。

这个工具支持 P3 或广色域颜色吗？#

不支持。它工作在 CSS 的 HEX/RGB/HSL 所描述的 sRGB 空间里，已经覆盖了绝大多数 Web 场景。Display-P3 和 color() 语法属于另一套流水线，本工具不解析。