品牌色系统一
设计师从甲方收到一个「#2B5B84」的深蓝，但印刷厂只认 CMYK。用本工具把 HEX 转成 CMYK，发现 C 值 75%、K 值 35%，但屏幕上看偏紫。再转成 LAB 看 L 值 36，确认明度偏暗后，手动调高 L 值到 42，重新转回 CMYK 发给印厂，确保画册封面不偏色。
全 格 式 互 转任一格式可编辑 · 其余实时联动
明 度 梯 度Tints / Shades · 点击取色
梯度阶 11-step lightness ramp
常 用 色Swatches · 点击载入
#C5391F
点击调用系统取色器
中 国 传 统 色 邻 近Lab 距离最近
就绪 · 改任一格式其余实时联动 · 全程浏览器本地处理
第一节
关于本工具
About在 CSS 里写 #3A5FCD，到印刷厂却被告知 CMYK 数值不对，这是设计师跨媒介时的常见脱节。这个工具在 HEX、RGB、HSL、HSV、CMYK、LAB 六种色彩空间间双向转换，输入一组值即可同步看到其余五种结果，并显示转换后的近似色值。所有计算在浏览器本地完成，色值数据不上传服务器。
使用场景
UI 适配深色模式
前端开发把设计稿的按钮色「#F5A623」直接写进 CSS，但深色模式下橙色刺眼。用本工具把 HEX 转成 HSL，发现 S 值 85%、L 值 55%。为降低对比度，把 L 值降到 35% 得到「#C47A1A」，再转回 HEX 写入代码。深色模式下按钮变柔和，且保留了品牌橙的色相。
印刷品追色打样
包装厂打样回来，客户说「红色不对」。用本工具把原文件 CMYK(0,100,100,0) 转成 LAB 得 L=54, a=81, b=67；再测打样样品的 CMYK(0,95,100,5) 转 LAB 得 L=52, a=76, b=63。对比 a、b 值发现色相偏绿且明度下降，直接定位到是黑版 K 值多了 5% 导致。
数据可视化配色
数据分析师做营收折线图，选了红绿两组色。用本工具把 RGB(255,0,0) 和 RGB(0,255,0) 转成 HSL，发现两者色相相差 120° 但亮度 L 值同为 50%，且饱和度 S 值都是 100%。转成灰度模式后（取 L 值）完全无法区分。于是把红色 L 值降到 40%，绿色 L 值升到 60%，确保打印黑白版也能读。
视频调色匹配
剪辑师把 A 摄像机拍的素材和 B 摄像机拍的素材混剪，肤色不一致。用本工具把 A 机素材的肤色 RGB(210,150,120) 转 HSV 得 H=18°, S=43%, V=82%；B 机素材 RGB(200,140,110) 转 HSV 得 H=20°, S=45%, V=78%。发现色相差 2°、饱和度差 2%、明度差 4%，于是拉曲线把 B 机 V 值调到 82%，色相微调至 18°，两段素材肤色肉眼无差别。
第二节
使用指南
Getting Started使用步骤
- 1在「颜色值」输入框中粘贴或键入 HEX、RGB 或 HSL 格式的色值，下方预览区即时显示对应色块
- 2点击「转换到」下拉菜单，选择目标色彩空间（如 CMYK/LAB/HSV），结果区同步输出换算后的数值
- 3点结果区任一颜色分量（如 R:255）旁的复制图标，该分量值即写入剪贴板，无需手动选中
- 4切换「色板」标签，可拖动色相/饱和度/明度滑块微调颜色，预览区与数值区联动更新
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| #FF6600 → RGB | rgb(255, 102, 0) | 常规：典型橙色，验证 HEX 转 RGB 基本换算（FF→255, 66→102, 00→0） |
| rgb(0, 0, 0) → HEX | #000000 | 边界：纯黑色，验证 RGB 最小值到 HEX 的映射，应输出 6 位而非缩写 #000 |
| hsl(0, 0%, 100%) → RGB | rgb(255, 255, 255) | 边界：纯白色，验证 HSL 饱和度 0% 时色相无关，应正确输出白色 |
| cmyk(0, 0, 0, 100) → HEX | #000000 | 易错：CMYK 中 K=100 是纯黑，但有些工具误将 CMYK(0,0,0,100) 输出为 #010101，本工具应输出纯黑 |
| hsv(120, 100%, 100%) → HSL | hsl(120, 100%, 50%) | 常规：纯绿色，验证 HSV 与 HSL 转换——HSV 亮度 100% 对应 HSL 亮度 50% |
| lab(0, 0, 0) → RGB | rgb(0, 0, 0) | 边界：LAB 空间原点（纯黑），验证 LAB→RGB 转换在极端暗值时的准确性，不应产生负值或超出 0-255 |
| #FFF → RGB | rgb(255, 255, 255) | 易错：3 位 HEX 缩写，用户常误以为 #FFF 无效，本工具应自动扩展为 #FFFFFF 再转换 |
| rgb(128, 128, 128) → CMYK | cmyk(0, 0, 0, 50) | 常规：中性灰，验证 RGB 等值三通道到 CMYK 的转换，K 值应为 50% 而非 0% |
常见错误对照
1.RGB 值超出 0-255 范围
✗ 错误
rgb(300, 128, 50)✓ 修复
rgb(255, 128, 50)RGB 每个通道是 8 位整数，合法范围 0-255。300 超出上限，工具会截断或报错，导致颜色失真。
2.HEX 颜色省略井号
✗ 错误
FF5733✓ 修复
#FF5733HEX 格式要求以 # 开头，否则工具可能无法正确解析，将其误判为其他色值格式或直接报错。
3.HSL 饱和度或明度超过 100%
✗ 错误
hsl(120, 150%, 80%)✓ 修复
hsl(120, 100%, 80%)HSL 的 S 和 L 是百分比，范围 0%-100%。超出 100% 无物理意义，工具会强制裁剪，结果与预期不符。
4.CMYK 值用百分比而非 0-1 小数
✗ 错误
cmyk(50, 30, 20, 10)✓ 修复
cmyk(0.5, 0.3, 0.2, 0.1)CMYK 标准值域为 0-1 浮点数。直接写 50 会被工具解释为 50.0，远超合法范围，导致转换结果全黑或异常。
5.LAB 的 L 值超出 0-100
✗ 错误
lab(120, 20, -30)✓ 修复
lab(95, 20, -30)CIELAB 中 L* 表示明度，理论范围 0-100。L=120 超出定义域，工具无法映射到 sRGB 色域，输出可能被裁剪。
6.HEX 缩写与全写混用
✗ 错误
#F3A (期望 #FF33AA)✓ 修复
#F3A → 实际解析为 #FF33AAHEX 缩写是每位重复（#F3A = #FF33AA），不是直接补零。若用户误以为补零，输入 #F3A 期望得到 #F300AA，结果会不同。
7.HSV 中 H 值用 0-360 但输入负数
✗ 错误
hsv(-30, 100%, 50%)✓ 修复
hsv(330, 100%, 50%)HSV 的 H 是色相角度，标准范围 0-360。负角度无定义，工具通常不会自动取模，直接报错或输出错误颜色。
8.RGB 与 HSL 的 H 值混淆
✗ 错误
rgb(120, 255, 0) 被当作 HSL 的 H=120✓ 修复
先确认输入格式：rgb(120, 255, 0) 是 RGB，不是 HSLRGB 的 R 通道和 HSL 的 H 通道数值范围不同（0-255 vs 0-360），直接套用会导致色相严重偏移。
第三节
工作原理
How It Works核心公式
R = 255 × (1 - C) × (1 - K), G = 255 × (1 - M) × (1 - K), B = 255 × (1 - Y) × (1 - K)
变量说明
C青色分量，0–1 小数M品红色分量，0–1 小数Y黄色分量，0–1 小数K黑色分量，0–1 小数R红色通道值，0–255 整数G绿色通道值，0–255 整数B蓝色通道值，0–255 整数
示例
CMYK(0.2, 0.5, 0.1, 0.3) 转 RGB：R = 255×(1-0.2)×(1-0.3) = 255×0.8×0.7 = 142.8 → 143；G = 255×(1-0.5)×(1-0.3) = 255×0.5×0.7 = 89.25 → 89；B = 255×(1-0.1)×(1-0.3) = 255×0.9×0.7 = 160.65 → 161。结果 RGB(143, 89, 161)。
用户输入
浏览器内处理
输出结果
第五节
常见问题
Q & A问我有个十六进制颜色代码，怎么转成 RGB 数值？＋
答
直接把 HEX 值（比如 #FF6600）粘贴到工具的 HEX 输入框，结果区会自动显示对应的 RGB（255,102,0）。注意 HEX 必须带 # 号且为 6 位（如 #AABBCC）或 3 位简写（如 #ABC 等价于 #AABBCC），不支持不带 # 或 4 位/8 位格式。如果输入后无反应，检查是否有多余空格或大小写错误。
问为什么我转出来的 CMYK 数值总和不是 100？＋
答
CMYK 是印刷色彩模型，理论上 C+M+Y+K 可以超过 100%，实际数值范围是 0-100 的百分比，总和没有上限。例如纯黑色在 CMYK 中可能是 (0,0,0,100)，总和 100；但深蓝色可能是 (100,80,0,20)，总和 200。本工具严格按标准转换公式计算，不强制归一化到 100%，直接使用即可。
问HSL 和 HSV 有什么区别？我该用哪个？＋
答
两者都基于色相（H）、饱和度（S）和明度（L 或 V），但明度定义不同：HSL 的 L 是亮度（Lightness），白色为 100%、黑色为 0%；HSV 的 V 是明度（Value），纯色为 100%、黑色为 0%。HSL 更适合 UI 设计（如 CSS 中的 hsl()），HSV 更接近人眼对颜色的感知，常用于图像处理。本工具同时支持两者，可直接对比同一颜色的 HSL 和 HSV 值。
问我输入的颜色代码，转出来怎么跟设计稿颜色不一样？＋
答
可能原因：① 输入格式错误——比如 RGB 写成了 0-255 但工具预期 0-1 的浮点数（本工具 RGB 输入为 0-255 整数，无需调整）；② 显示器色彩空间差异（sRGB vs Adobe RGB），本工具基于 sRGB 标准转换，若设计稿用其他色域会有偏差；③ 浏览器颜色管理差异——建议在相同设备上对比。如果仍不准，可截图发到工具反馈。
问这个工具需要联网吗？我离线能用吗？＋
答
能。本工具完全在浏览器端运行，无需上传任何数据到服务器，所有颜色转换计算由前端 JavaScript 完成。断网状态下同样可用。首次加载页面后，后续使用完全离线，不消耗流量。隐私敏感场景（如处理公司设计稿）可放心使用。
问LAB 颜色模式转出来数值看不懂，L a b 分别代表什么？＋
答
LAB 是 CIE 1976 标准色彩空间，L 表示明度（0-100），a 表示红绿轴（负值偏绿，正值偏红），b 表示黄蓝轴（负值偏蓝，正值偏黄）。本工具输出的 LAB 值基于 D65 光源、2° 视场标准观察者。如果你需要印刷或工业用途，注意 LAB 值依赖于参考白点（本工具默认 D65），与其他软件（如 Photoshop 用 D50）可能差几个单位。
问能一次转多个颜色吗？还是只能一个一个转？＋
答
本工具目前只支持单次输入一个颜色代码进行转换，不支持批量导入。如果需要批量处理，建议逐次输入或使用专业设计软件（如 Photoshop 的批量转换功能）。不过每次转换结果会实时显示所有 6 种格式（HEX/RGB/HSL/HSV/CMYK/LAB），一次输入即可获取完整信息，适合快速查色或对比。
问我输入了 RGB 值，但转出来的 HEX 是黑的，为什么？＋
答
检查 RGB 输入是否在 0-255 范围内。如果输入了 0-1 的小数（如 0.5,0.3,0.2），工具会直接按整数 0 处理，导致 HEX 变成 #000000（黑色）。正确做法：RGB 值用 0-255 整数输入，例如红色为 255,0,0。如果是从其他软件复制的 0-1 浮点数，先乘以 255 取整再输入。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。