颜色格式转换
HEX / RGB / HSL / HSV / CMYK / LAB / OKLCH 互转 · 任意格式输入 · 全部即时转换
HEX/RGB/HSL/HSV/CMYK/LAB
HEX / RGB / HSL / HSV / CMYK / LAB / OKLCH 互转 · 任意格式输入 · 全部即时转换
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,确保特效层颜色与素材精准匹配,避免色偏导致反复渲染。
| 维度 | 本工具 | 竞品 A (colorhexa.com) | 传统方法 (设计软件) |
|---|---|---|---|
| 数据隐私 | 纯浏览器,零上传 | 上传到服务器 | 依赖本地软件,数据不出设备 |
| 处理速度 | 1 秒内 | 2-5 秒(含网络延迟) | 即时(需手动输入或拾取) |
| 离线可用 | 完全支持 | 不支持 | 完全支持 |
| 批量处理 | 不支持 | 不支持 | 支持(通过脚本或动作录制) |
| 色彩空间覆盖 | HEX/RGB/HSL/HSV/CMYK/LAB | HEX/RGB/HSL/HSV/CMYK/LAB/XYZ | 取决于软件,通常更全 |
| 操作复杂度 | 输入数值即可 | 输入数值即可 | 需打开软件、创建文档、调出面板 |
| 使用成本 | 免费 | 免费 | 需购买软件授权(如 Adobe 订阅) |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| #FF5733 | RGB(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,非十六进制 |
FF5733#FF5733CSS 和 HTML 标准要求 HEX 颜色以 # 开头;无 # 的值会被解析为数字或字符串,导致转换失败或结果错误
rgb(50%, 30%, 20%)rgb(128, 77, 51)本工具 RGB 输入范围是 0-255 整数;百分比格式(0%-100%)是 CSS 另一种写法,需手动换算(255×百分比)
hsl(120, 50, 50)hsl(120, 0.5, 0.5)HSL 标准中 S 和 L 取值范围是 0.0-1.0 的小数;写成 50 会被工具当作 50.0,导致饱和度/明度严重偏差
cmyk(0, 100, 100, 0)cmyk(0, 1, 1, 0)CMYK 顺序固定为 C(青)、M(品红)、Y(黄)、K(黑);K≠CMY 的混合结果,是独立黑色通道,值范围 0-1
lab(50, 128, -128)lab(50, 128, -128)LAB 的 L 范围 0-100,a/b 范围 -128~127;但用户常误以为 a/b 也是 0-100,导致超出范围的值被工具截断
hsv(120, 80, 60)hsv(120, 0.8, 0.6)HSV 的 S 和 V 取值范围是 0.0-1.0 小数;写成 80 会被当作 80.0,结果颜色几乎全饱和或全亮,与预期完全不同
#F3A#FF33AA3 位 HEX 是 6 位的缩写(每位重复),如 #F3A = #FF33AA;工具默认接受 6 位,3 位需手动展开或工具支持自动补全
rgb 255,0,0rgb(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 位十六进制颜色码,如 #FF5733R — 红色分量,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)。
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 个高频疑问