颜色互转

HEX/RGB/HSL/HSV/CMYK/LAB

415 次访问
COLOR FORMAT CONVERTER

颜色格式转换

HEX / RGB / HSL / HSV / CMYK / LAB / OKLCH 互转 · 任意格式输入 · 全部即时转换

输入颜色

支持任意格式输入 · 实时识别 · 任意可编辑格式实时同步
常用色:
绿
品红
赭石
朱砂

所有格式(可编辑)

HEX 网页通用
RGB 显示器
RGBA 含透明度
HSL 色相饱和度
HSV / HSB 设计软件
CMYK 印刷
LAB D65 白点
OKLCH CSS Color 4

颜色空间说明

HEX:网页最常用,#RRGGBB 6 位十六进制(或 8 位含透明度)。

RGB:红绿蓝三基色,0-255。所有显示器原生表示。

HSL:色相 (0-360°)、饱和度 (0-100%)、亮度 (0-100%)。直观调色。

HSV / HSB:色相、饱和度、明度。Photoshop / Sketch 默认。

CMYK:青品黄黑四色,0-100%。印刷用,与显示器色域不同(约 70% sRGB)。

LAB:CIE LAB 1976,感知均匀空间,L = 亮度(0-100),a / b 色度坐标。专业色彩管理。

OKLCH:CSS Color Module 4 新标准,L 亮度、C 色度、H 色相,比 HSL 在亮度上更感知一致。

关于本工具

了解工具定位 · 使用场景 · 对比优势

在 HEX、RGB、HSL、HSV、CMYK、LAB 六种颜色格式间相互转换。设计师调色、前端写样式、印刷校色时,粘贴一个颜色值就能得到其余五种格式的对应结果。所有转换在浏览器内完成,颜色数据不上传服务器。

使用场景

🎨

品牌色统一

UI 设计师从客户拿到的是 HEX #F5A623,但开发环境要求 RGBA 值、印刷物料需要 CMYK。本工具一次输入 HEX,同时输出 RGB、HSL、CMYK 等多色值,无需反复切换计算器或查表,确保屏幕显示与印刷品颜色一致。

🖥️

前端样式调试

前端开发者在 CSS 中看到的是 HSL(39, 90%, 55%),但设计稿标注的是 RGB(245, 166, 35)。复制 HSL 到工具,立即得到对应 RGB 和 HEX,方便直接写入样式表或与设计核对,避免手动换算错误。

🖨️

印刷校色

平面设计师在屏幕上调出 RGB(200, 50, 30) 的红色,但印刷机用 CMYK 模式,直接转印会偏暗。用本工具将 RGB 转为 CMYK 并查看色域警告,提前调整明度与饱和度,减少打样返工。

📱

多端适配选色

移动端 UI 常用 HSL 调色(色相 / 饱和度 / 明度),但给开发标注时需提供 HEX 或 RGB。本工具支持 HSL → HEX 即时转换,设计师调整色相 10° 后直接复制新 HEX,无需手动计算。

🎬

视频特效取色

视频后期从素材中吸色得到 HSV(120, 80%, 70%),但合成软件要求 RGB 或 HEX。用本工具将 HSV 转为 RGB,确保特效层颜色与素材精准匹配,避免色偏导致反复渲染。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (colorhexa.com)传统方法 (设计软件)
数据隐私纯浏览器,零上传上传到服务器依赖本地软件,数据不出设备
处理速度1 秒内2-5 秒(含网络延迟)即时(需手动输入或拾取)
离线可用完全支持不支持完全支持
批量处理不支持不支持支持(通过脚本或动作录制)
色彩空间覆盖HEX/RGB/HSL/HSV/CMYK/LABHEX/RGB/HSL/HSV/CMYK/LAB/XYZ取决于软件,通常更全
操作复杂度输入数值即可输入数值即可需打开软件、创建文档、调出面板
使用成本免费免费需购买软件授权(如 Adobe 订阅)

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 在「颜色值」输入框中粘贴或键入 HEX/RGB/HSL/HSV/CMYK/LAB 格式的颜色代码
  2. 点击输入框右侧的「转换」按钮,或按回车键触发转换
  3. 查看下方结果区:所有目标格式的颜色值自动同步显示,并附带色块预览
  4. 点击任意结果值旁的「复制」图标,将该格式的颜色代码复制到剪贴板

输入输出示例7 个典型场景,覆盖常规、边界与易错

输入输出说明
#FF5733RGB(255, 87, 51) HSL(10, 100%, 60%) HSV(10, 80%, 100%) CMYK(0, 66, 80, 0) LAB(58, 68, 48)典型场景:HEX 转其他所有格式
rgb(0, 0, 0)HEX: #000000 HSL(0, 0%, 0%) HSV(0, 0%, 0%) CMYK(0, 0, 0, 100) LAB(0, 0, 0)边界 case:纯黑色,CMYK 中 K=100
hsl(0, 0%, 100%)HEX: #FFFFFF RGB(255, 255, 255) HSV(0, 0%, 100%) CMYK(0, 0, 0, 0) LAB(100, 0, 0)边界 case:纯白色,CMYK 全为 0
cmyk(0, 0, 0, 0)HEX: #FFFFFF RGB(255, 255, 255) HSL(0, 0%, 100%) HSV(0, 0%, 100%) LAB(100, 0, 0)易错 case:CMYK 全 0 对应白色,非透明
hsv(180, 100%, 50%)HEX: #008080 RGB(0, 128, 128) HSL(180, 100%, 25%) CMYK(100, 0, 0, 50) LAB(48, -28, -9)典型场景:HSV 转 CMYK,青色系
lab(50, -50, 50)HEX: #00A500 RGB(0, 165, 0) HSL(120, 100%, 32%) HSV(120, 100%, 65%) CMYK(100, 0, 100, 35)边界 case:LAB 负 a 值(绿色方向)
#GGG无效输入:HEX 格式错误易错 case:非法 HEX 字符 G,非十六进制

常见错误对照8 个常踩的坑 · 错误 → 修复

1. HEX 颜色值遗漏井号

错误
FF5733
修复
#FF5733

CSS 和 HTML 标准要求 HEX 颜色以 # 开头;无 # 的值会被解析为数字或字符串,导致转换失败或结果错误

2. RGB 值用百分比代替 0-255 整数

错误
rgb(50%, 30%, 20%)
修复
rgb(128, 77, 51)

本工具 RGB 输入范围是 0-255 整数;百分比格式(0%-100%)是 CSS 另一种写法,需手动换算(255×百分比)

3. HSL 的 S 和 L 写成 0-100 整数而非小数

错误
hsl(120, 50, 50)
修复
hsl(120, 0.5, 0.5)

HSL 标准中 S 和 L 取值范围是 0.0-1.0 的小数;写成 50 会被工具当作 50.0,导致饱和度/明度严重偏差

4. CMYK 的 K 通道与 CMY 混淆顺序

错误
cmyk(0, 100, 100, 0)
修复
cmyk(0, 1, 1, 0)

CMYK 顺序固定为 C(青)、M(品红)、Y(黄)、K(黑);K≠CMY 的混合结果,是独立黑色通道,值范围 0-1

5. LAB 的 L 通道写成 0-100 但 a/b 写成整数

错误
lab(50, 128, -128)
修复
lab(50, 128, -128)

LAB 的 L 范围 0-100,a/b 范围 -128~127;但用户常误以为 a/b 也是 0-100,导致超出范围的值被工具截断

6. HSV 的 H 值用 0-360 但 S/V 用 0-100 整数

错误
hsv(120, 80, 60)
修复
hsv(120, 0.8, 0.6)

HSV 的 S 和 V 取值范围是 0.0-1.0 小数;写成 80 会被当作 80.0,结果颜色几乎全饱和或全亮,与预期完全不同

7. 把 HEX 缩写(3 位)当完整值输入

错误
#F3A
修复
#FF33AA

3 位 HEX 是 6 位的缩写(每位重复),如 #F3A = #FF33AA;工具默认接受 6 位,3 位需手动展开或工具支持自动补全

8. RGB 值包含空格或逗号格式错误

错误
rgb 255,0,0
修复
rgb(255,0,0)

工具严格解析 CSS 标准格式 rgb(r,g,b),缺少括号或多余空格会导致解析失败,返回空结果

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

R = hex_to_dec(HEX[1:2]), G = hex_to_dec(HEX[3:4]), B = hex_to_dec(HEX[5:6])

变量说明

  • HEX — 6 位十六进制颜色码,如 #FF5733
  • R — 红色分量,0-255 整数
  • G — 绿色分量,0-255 整数
  • B — 蓝色分量,0-255 整数

示例

输入 HEX = #FF5733。R = hex_to_dec('FF') = 255,G = hex_to_dec('57') = 87,B = hex_to_dec('33') = 51。得到 RGB(255, 87, 51)。

适用范围

适用于标准 6 位十六进制颜色码(#RRGGBB),不包含 3 位缩写(#RGB)或带透明度(#RRGGBBAA)。来源:CSS Color Module Level 4 (W3C)。

原理图

用户输入HEX / RGB / HSL / HSV / CMYK / LAB浏览器内解析与转换纯前端 JavaScript 计算无网络请求,数据不出本地输出结果所有格式互转结果支持的格式对照HEX → RGB → HSL → HSV → CMYK → LAB任意格式输入,自动完成全部 6 种格式的相互转换转换过程完全在浏览器内完成,数据不上传服务器
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

import colorsys

# HEX → RGB → 其他
hex_color = "#FF6633"
# 去掉 # 并转为 0-255 整数
r, g, b = int(hex_color[1:3], 16), int(hex_color[3:5], 16), int(hex_color[5:7], 16)
print(f"RGB: ({r}, {g}, {b})")  # (255, 102, 51)

# RGB → HSL(colorsys 返回 0-1 范围)
h, l, s = colorsys.rgb_to_hls(r/255, g/255, b/255)
print(f"HSL: ({round(h*360)}, {round(s*100)}%, {round(l*100)}%)")  # (15, 100%, 60%)

# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r/255, g/255, b/255)
print(f"HSV: ({round(h*360)}, {round(s*100)}%, {round(v*100)}%)")  # (15, 80%, 100%)
package main

import (
	"fmt"
	"image/color"
	"math"
)

func main() {
	// HEX → RGB
	hex := "#FF6633"
	r, g, b := parseHex(hex)
	fmt.Printf("RGB: (%d, %d, %d)\n", r, g, b) // (255, 102, 51)

	// RGB → CMYK(无标准库,手动计算)
	c, m, y, k := rgbToCmyk(r, g, b)
	fmt.Printf("CMYK: (%.0f%%, %.0f%%, %.0f%%, %.0f%%)\n", c*100, m*100, y*100, k*100) // (0%, 60%, 80%, 0%)
}

func parseHex(hex string) (uint8, uint8, uint8) {
	c, _ := color.Parse(hex)
	r, g, b, _ := c.RGBA()
	return uint8(r >> 8), uint8(g >> 8), uint8(b >> 8)
}

func rgbToCmyk(r, g, b uint8) (float64, float64, float64, float64) {
	rf := float64(r) / 255
	gf := float64(g) / 255
	bf := float64(b) / 255
	k := 1 - math.Max(math.Max(rf, gf), bf)
	if k == 1 {
		return 0, 0, 0, 1
	}
	c := (1 - rf - k) / (1 - k)
	m := (1 - gf - k) / (1 - k)
	y := (1 - bf - k) / (1 - k)
	return c, m, y, k
}
// HEX → RGB → LAB(使用 d3-color 库,需 npm install d3-color)
const { rgb, lab } = require('d3-color');

const hex = '#FF6633';
const c = rgb(hex);
console.log(`RGB: (${c.r}, ${c.g}, ${c.b})`); // (255, 102, 51)

// RGB → LAB
const l = lab(c);
console.log(`LAB: (${l.l.toFixed(1)}, ${l.a.toFixed(1)}, ${l.b.toFixed(1)})`); // (55.7, 61.4, 56.1)

// 纯 JS 实现 HEX → HSL(无依赖)
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  let max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h, s, l = (max + min) / 2;
  if (max === min) h = s = 0;
  else {
    let d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) * 60; break;
      case g: h = ((b - r) / d + 2) * 60; break;
      case b: h = ((r - g) / d + 4) * 60; break;
    }
  }
  return `HSL: (${Math.round(h)}, ${Math.round(s*100)}%, ${Math.round(l*100)}%)`;
}
console.log(hexToHsl('#FF6633')); // HSL: (15, 100%, 60%)

常见问题

8 个高频疑问

同一个颜色,为什么 HEX 和 RGB 转出来的数值不一样?
HEX 本质就是 RGB 的十六进制表示,两者是一一对应的。比如 HEX #FF6600 转成 RGB 就是 (255, 102, 0)。如果看到数值不同,通常是输入格式有误——HEX 不带 # 号、RGB 值范围写成了 0-1 而不是 0-255、或者混入了空格/逗号以外的分隔符。本工具对输入做自动纠错(如补 #、去空格),但极端格式如 rgb(100%, 40%, 0%) 会解析失败,建议统一用标准格式输入。
CMYK 转 RGB 后颜色偏暗,是工具不准吗?
不是工具问题。CMYK 是印刷色域(靠油墨混合),RGB 是屏幕发光色域,两者物理原理不同,转换必然有损失。CMYK 的 C、M、Y、K 值范围是 0-100,本工具基于标准 ICC 色域转换公式(sRGB 映射),转换后 RGB 的明度会比原 CMYK 在屏幕上看起来暗一些,这是色域压缩的必然结果。如果想尽量接近,建议在 Photoshop 等专业软件里做软打样,在线转换只能做参考。
LAB 转出来的颜色跟 Photoshop 里不一样?
LAB 是设备无关色彩空间,但不同软件用的参考白点和转换矩阵不同。Photoshop 默认用 D50 白点(5000K 色温),本工具用 D65 白点(6500K,sRGB 标准),D50 转 D65 时颜色会偏蓝一点点。另外 LAB 的 L 范围是 0-100,a/b 范围理论是 -128~127,但 Photoshop 的 LAB 模式下 a/b 范围会裁剪到 -128~127 之外的值。本工具严格按 CIE 标准公式计算,数值本身是对的,但和特定软件的视觉呈现有差异。
HSL 和 HSV 有什么区别?我该用哪个?
HSL(色相、饱和度、明度)和 HSV(色相、饱和度、明度值)都用 H 表示色相(0-360°),但 S 和 L/V 的计算方式不同。HSL 的 L=50% 时是纯色(最鲜艳),L=0% 是黑,L=100% 是白;HSV 的 V=100% 时是纯色,S=0% 时是灰度。简单说:设计师调色常用 HSL(更直观,亮度线性变化),图像处理算法常用 HSV(色相分离更稳定)。本工具同时支持两种,输入 RGB 后可一键切换看两者结果差异。
颜色互转输入框里,HEX 能不加 # 号吗?
可以。本工具对 HEX 输入做了容错:不加 # 号也能识别(如 FF6600),大小写不敏感(ff6600 和 FF6600 一样),3 位简写也会自动补全成 6 位(如 F60 → FF6600)。但注意不能带空格或多余字符,像 #F60 或 #ff6600 都可以,输入 F60 或 ff6600 也可以。如果输入了 7 位(如 #FF6600A 带透明度)会被当作无效,因为本工具不支持 ARGB。
转换结果能复制吗?怎么操作?
可以。每个颜色格式的数值框右侧都有一个复制图标(📋),点击即复制对应格式的文本到剪贴板。比如想复制 RGB 值,点击 RGB 行右边的复制按钮即可。如果用的是 Safari 浏览器,部分版本可能不支持复制弹窗提示,但实际文本已写入剪贴板,粘贴即可。不支持一键复制全部格式,需要逐个点击。
我输入的颜色值合法,但工具显示 '无效输入',怎么办?
常见原因有三:一是 RGB 的 R/G/B 值写成了小数(如 255.5),本工具只接受 0-255 的整数;二是 CMYK 的 C/M/Y/K 值超过了 100 或带了百分号(如 50% 应写 50);三是 LAB 的 a/b 值超出了 -128~127 理论范围(如 a=200)。另外,如果输入了透明通道(如 rgba(255,0,0,0.5)),本工具不支持,请去掉透明度值再试。检查格式后重新输入即可。
这个颜色互转工具需要联网才能用吗?
不需要。所有转换逻辑都在浏览器本地用 JavaScript 执行,不发送任何数据到服务器。输入颜色值后,页面立刻算出结果,即使断网也能正常使用。首次加载页面时需要联网下载网页资源,之后刷新页面或再次打开,只要浏览器缓存没清,离线状态下也能用。如果担心隐私,可以断网后使用,转换结果完全不出本地。
选择 打开 +新窗口 esc关闭