MUTools

其他

颜色代码转换

颜色代码转换工具可在 HEX、RGB、HSL、HSV、OKLCH 各种格式之间相互转换。输入一个颜色后,会同时计算并列出对应的所有格式表示,每个值都可一键复制。除 HEX 转 RGB(hex rgb 转换)外,还支持 RGB 转 HEX、HSL 转换、RGBA 转换等,可一并完成 Web 与设计制作中所需的转换。

预览
1.00

转换为各格式

格式复制
HEX#1E90FF
HEX8#1E90FFFF
RGBrgb(30, 144, 255)
RGBArgba(30, 144, 255, 1)
HSLhsl(210, 100%, 56%)
HSLAhsla(210, 100%, 56%, 1)
HSVhsv(210, 88%, 100%)
OKLCHoklch(0.652 0.19 253)
CMYKcmyk(88%, 44%, 0%, 0%)

CMYK 为面向印刷的参考值。由于依赖色域和印刷配置文件,此处显示的是根据屏幕 sRGB 计算出的近似值,且不接受将其作为输入格式。

转换全程在您的浏览器中完成,输入的值不会被发送到外部服务器。

颜色代码转换是什么?

颜色代码转换工具可在 HEX、RGB、HSL、HSV、OKLCH 各种格式之间相互转换。输入一个颜色后,会同时计算并列出对应的所有格式表示,每个值都可一键复制。除 HEX 转 RGB(hex rgb 转换)外,还支持 RGB 转 HEX、HSL 转换、RGBA 转换等,可一并完成 Web 与设计制作中所需的转换。

输入时无需选择格式。直接粘贴 #1E90FF 这样的 3 位 / 6 位 HEX、带透明度的 4 位 / 8 位 HEX(颜色代码 8 位转换)、rgb(30, 144, 255) / rgba(30 144 255 / 0.8)hsl(210, 100%, 56%) / hsla(...)hsv(...)oklch(0.65 0.19 253) 等,工具会自动识别格式并转换。也可以从原生颜色选择器中选取颜色,或通过透明度(Alpha)滑块在 0~1 范围内调整不透明度。

输出中还包含近年来在 CSS 中应用日益广泛的感知均匀色彩空间 OKLCH,以及用于印刷的 CMYK 参考值。当你需要在 HEX、RGB、HSL、HSV 之间来回切换,并在设计稿、CSS 和设计工具之间准确传递同一种颜色时,本工具十分便利。

转换全部在您的浏览器中完成,输入的值不会被发送到外部服务器。无需注册账号、无需点击广告,即可立即使用。

使用方法

  1. 在输入框中粘贴颜色代码(自动识别 HEX、RGB、HSL、HSV、OKLCH)。也可以从右侧的颜色选择器中选取颜色。
  2. 需要更改透明度时,用 Alpha 滑块调整不透明度(0~1)。
  3. 在预览中确认当前颜色(含透明度)。
  4. 在“转换为各格式”列表中查看 HEX、8 位 HEX、RGB、RGBA、HSL、HSLA、HSV、OKLCH、CMYK 的值。
  5. 点击每行的“复制”按钮,复制所需格式的值即可使用。

使用场景

  • 想把设计稿中的 HEX 改成 CSS 的 rgb() / rgba() 的 Web 设计师、前端开发者。
  • 想用 8 位 HEX 或 rgba 准确指定带透明度颜色的前端工程师。
  • 想用 HSL 或 HSV 调整色相、饱和度、明度,并最终取得 HEX 的用户。
  • 想用 OKLCH 设计感知均匀的配色,并确认对应 RGB / HEX 的设计师。
  • 想把屏幕上的颜色以 CMYK 参考值作为印刷参考来把握的用户。
  • 想在多个工具或代码之间,把同一颜色转换为其他格式来传递的开发者。

注意事项

  • 支持以 HEX、RGB、HSL、HSV、OKLCH 作为输入格式。CMYK 面向印刷,依赖色域与配置文件,无法从屏幕的 sRGB 唯一逆变换,因此仅作为输出(参考值)提供。
  • 支持 8 位 HEX(#RRGGBBAA)与 4 位 HEX(#RGBA)、rgba()、hsla() 以及 `oklch(L C H / a)` 的透明度。透明度也可通过 Alpha 滑块调整。
  • 原生颜色选择器无法处理透明度(仅 6 位 HEX),因此即使用选择器选取颜色,当前的透明度也会保持不变。
  • HSL、HSV、CMYK、OKLCH 会按整数或小数位四舍五入显示,因此再次转换时可能产生极微小的误差。
  • OKLCH 转 RGB 时若超出 sRGB 色域,会钳制(clamp)到可显示的范围内。

常见问题

输入的颜色会被发送到服务器吗?
不会。转换全程在您的浏览器中完成。即使是工作中处理的颜色或品牌色,也可放心使用。
HEX 转 RGB 的计算式是什么?
6 位 HEX 中每 2 位分别是 R、G、B 的 16 进制数。将每 2 位转换为 10 进制即得到 0~255 的值(例如 1E→30、90→144、FF→255,所以 #1E90FF=rgb(30, 144, 255))。本工具会自动完成该计算,并支持反方向(RGB→HEX)。
可以转换 8 位颜色代码吗?
可以。8 位 HEX(#RRGGBBAA)末尾的 2 位表示透明度(Alpha)。粘贴后会连同透明度一起转换,也能以 RGBA 或 HSLA 形式查看。
支持转换为 HSL 或 HSV 吗?
支持。输入颜色后会同时显示 HSL(色相、饱和度、亮度)与 HSV(色相、饱和度、明度)。反过来,也可粘贴 hsl()、hsv() 字符串转换为其他格式。
OKLCH 是什么?
OKLCH 是用明度(L)、饱和度(C)、色相(H)表示颜色的感知均匀色彩空间。它适合在保持明度不变的同时改变色相等直观的配色调整,近年来在 CSS 中应用日益广泛。本工具支持其与 sRGB 的相互转换。
可以输入 CMYK 吗?
CMYK 仅支持输出(参考值)。CMYK 是面向印刷的色彩空间,依赖油墨、纸张和印刷配置文件,无法从屏幕的 sRGB 唯一逆变换。因此本工具只显示根据屏幕颜色计算出的 CMYK 参考值,不接受将其作为输入格式。