颜色转换器
在HEX、RGB、HSL和HSV格式之间转换颜色，内置可视化选色器
加载示例
点击色块打开选色器
或在下方直接编辑任意值
HEX
RGB
HSL
HSV
什么是颜色格式转换？
颜色转换器将颜色值从一种表示法转换为另一种——例如，从HEX三元组（#6366F1）转换为RGB元组（99, 102, 241）或HSL三元组（239, 84%, 67%）。同一颜色也可以表示为HSV三元组（239, 59%, 95%）。每种格式使用不同的数学模型对同一视觉颜色进行编码；不同的工具、语言和API根据使用场景需要不同的格式。
HEX和RGB都将颜色描述为红、绿、蓝光的混合。HEX是同一组三个0–255通道值的紧凑十六进制表示，而RGB以十进制展开这些值。HSL（色相、饱和度、亮度）和HSV（色相、饱和度、明度）将同样的信息重新组织为柱坐标系：色相是色轮上的角度（0–360度），饱和度和亮度/明度以百分比表示。这使得HSL和HSV在创建同一色相的较浅或较深色调时更直观。
这些格式之间的转换需要明确的数学公式。W3C CSS Color Module Level 4规范记录了浏览器将任何CSS颜色解析为sRGB三元组所用的算法。这些公式是确定性的：给定输入始终产生相同的输出，因此只要数值未被四舍五入或截断，转换就是无损的。大多数选色器和设计工具在底层依赖同样的公式。
为何使用此颜色转换器？
设计工具导出一种格式的颜色，CSS需要另一种格式，而你调用的API又期望第三种格式。无需编写转换代码或搜索正确的公式，粘贴一个值即可同时获取所有格式。
⚡
实时即时转换
输入或选取颜色，HEX、RGB、HSL和HSV实时同步更新。无需提交按钮，无需服务器往返。
🔒
隐私优先处理
所有转换运算均在浏览器本地执行。不向任何地方发送颜色值、使用数据或Cookie。
🔀
四种格式同时输出
一次输入同时得到HEX、RGB、HSL和HSV。单击即可复制所需格式。
📋
无需账户
打开页面即可开始转换。无需注册、无需邮箱、无速率限制。加载后可离线使用。
颜色转换器使用场景
CSS开发
设计师从Figma给你一个HEX值，但你的组件库使用HSL进行主题配置。转换该值后直接写入CSS自定义属性或Tailwind配置文件。
后端API集成
你的接口接受RGB数组用于图表生成。将样式规范中的品牌HEX色值转换为API所需的整数三元组。
设计系统维护
在记录设计系统时，需要将每个颜色令牌以HEX列出便于快速查阅、以RGB用于Canvas渲染、以HSL用于程序化生成色阶。
QA与视觉测试
将截图的像素颜色（浏览器开发工具通常以RGB报告）与Figma规范中的预期HEX值进行对比。快速转换可确认或标记不匹配项。
数据可视化
D3.js和Chart.js等图表库根据方法不同接受不同格式的颜色。统一转换一次，在数据集配置中保持一致的表示法。
学习色彩理论
学习计算机图形学或网页设计的学生可以看到同一颜色如何在HEX、RGB、HSL和HSV之间映射。调整一个通道并观察其他通道的变化，有助于建立对颜色模型关系的直觉。
颜色格式参考
下表列出了五种最常见的颜色格式，每种格式均以相同的靛蓝色（#6366F1）为例。HEX和RGB在CSS和JavaScript中支持最为广泛。HSL因调整亮度和饱和度方便而更适合主题配置。HSV是大多数图形设计软件选色器所用的模型。
| 格式 | 示例（靛蓝色） | 通道 | 常见用途 |
|---|---|---|---|
| HEX | #6366F1 | 6 (or 3/8) | CSS, design tools, brand guides |
| RGB | rgb(99, 102, 241) | 3 (0–255 each) | CSS, Canvas API, image processing |
| HSL | hsl(239, 84%, 67%) | 3 (deg, %, %) | CSS, color theming, accessibility tuning |
| HSV | hsv(239, 59%, 95%) | 3 (deg, %, %) | Color pickers, Photoshop, Figma |
| CMYK | cmyk(59%, 58%, 0%, 5%) | 4 (0–100% each) | Print design, prepress workflows |
HEX vs RGB vs HSL
三种格式均描述相同的sRGB色彩空间，区别在于数据的呈现方式，这影响了在不同场景下的可读性和操作便捷性。
HEX
6位十六进制字符串（或3位简写）。在CSS、设计工具和品牌规范中紧凑且通用。直观可读性差：#6366F1 无法直接看出色相。支持可选的8位形式（#6366F180）表示透明度。
RGB
红、绿、蓝通道各对应0–255的整数值。Canvas 2D、WebGL及大多数图像处理库的原生格式。逐通道操作方便，但调整感知亮度需要同时修改三个值。
HSL
色相（0–360度）、饱和度（0–100%）和亮度（0–100%）。专为人类可读性设计。要让颜色变亮，增大L；要降低饱和度，减小S。CSS原生支持hsl()表示法，现代CSS的color-mix()和相对颜色语法均以此为基础。
代码示例
在常见语言和环境中实现HEX、RGB和HSL之间的颜色转换。以下示例均使用相同的靛蓝色（#6366F1）便于对比。
JavaScript
// HEX → RGB
function hexToRgb(hex) {
const n = parseInt(hex.replace('#', ''), 16)
return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}
hexToRgb('#6366f1') // → [99, 102, 241]
// RGB → HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255
const max = Math.max(r, g, b), min = Math.min(r, g, b)
const l = (max + min) / 2
if (max === min) return [0, 0, Math.round(l * 100)]
const d = max - min
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
let h = 0
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
else if (max === g) h = ((b - r) / d + 2) / 6
else h = ((r - g) / d + 4) / 6
return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
}
rgbToHsl(99, 102, 241) // → [239, 84, 67]Python
import colorsys
# HEX → RGB
def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
h = hex_str.lstrip('#')
return tuple(int(h[i:i+2], 16) for i in (0, 2, 4))
hex_to_rgb('#6366f1') # → (99, 102, 241)
# RGB → HSL (colorsys uses HLS order)
r, g, b = 99 / 255, 102 / 255, 241 / 255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h * 360:.0f}, {s * 100:.0f}%, {l * 100:.0f}%)")
# → hsl(239, 84%, 67%)
# RGB → HSV
h, s, v = colorsys.rgb_to_hsv(r, g, b)
print(f"hsv({h * 360:.0f}, {s * 100:.0f}%, {v * 100:.0f}%)")
# → hsv(239, 59%, 95%)Go
package main
import (
"fmt"
"math"
)
func hexToRGB(hex string) (int, int, int) {
var r, g, b int
fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
return r, g, b
}
func rgbToHSL(r, g, b int) (int, int, int) {
rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
max := math.Max(rf, math.Max(gf, bf))
min := math.Min(rf, math.Min(gf, bf))
l := (max + min) / 2
if max == min {
return 0, 0, int(math.Round(l * 100))
}
d := max - min
s := d / (2 - max - min)
if l <= 0.5 {
s = d / (max + min)
}
var h float64
switch max {
case rf: h = (gf - bf) / d; if gf < bf { h += 6 }
case gf: h = (bf - rf) / d + 2
case bf: h = (rf - gf) / d + 4
}
return int(math.Round(h / 6 * 360)), int(math.Round(s * 100)), int(math.Round(l * 100))
}
func main() {
r, g, b := hexToRGB("#6366f1")
fmt.Println(r, g, b) // → 99 102 241
fmt.Println(rgbToHSL(r, g, b)) // → 239 84 67
}CSS
/* Modern CSS supports multiple color formats natively */
/* HEX notation */
.button { color: #6366f1; }
/* RGB functional notation */
.button { color: rgb(99 102 241); }
/* HSL — easier to adjust lightness and saturation */
.button { color: hsl(239 84% 67%); }
/* CSS Color Level 4: relative color syntax (Chrome 119+) */
.button-light { color: hsl(from #6366f1 h s calc(l + 20%)); }
/* color-mix() for tinting without manual conversion */
.button-muted { color: color-mix(in srgb, #6366f1 70%, white); }常见问题
HSL和HSV有什么区别？
两者都使用色相和饱和度，但对亮度的定义不同。HSL使用亮度（Lightness），50%为纯色，0%为黑色，100%为白色。HSV使用明度（Value/Brightness），100%为纯色，0%为黑色，HSV没有直接的白色端点。实际应用中，HSL用于CSS和网页开发，而HSV是Photoshop和Figma等设计软件大多数选色器背后的模型。
如何在JavaScript中将HEX转换为RGB？
使用parseInt(hex, 16)将十六进制字符串解析为整数，再通过位移提取各通道：(n >> 16) & 255 为红色，(n >> 8) & 255 为绿色，n & 255 为蓝色。这适用于任何带或不带前缀#的6位十六进制字符串。对于#F0F这样的3位简写，先将每位展开（FF00FF）再解析。
我可以在CSS中直接使用HSL吗？
可以。所有现代浏览器均支持CSS中的hsl()和hsla()。自CSS Color Level 4起，语法为hsl(239 84% 67%)（空格分隔，仍兼容逗号写法）。也可添加第四个参数表示透明度：hsl(239 84% 67% / 0.5)。Safari、Chrome、Firefox和Edge均支持此语法。
颜色转换有损耗吗？
从数学角度看没有。HEX、RGB、HSL和HSV都描述相同的sRGB色彩空间，转换是可逆的。实际上，由于HEX每通道限制为256步，HSL百分比通常取整，可能出现微小的舍入差异。多次来回转换可能累积1–2个单位的舍入误差。
什么是8位HEX格式？
8位HEX格式在标准6位HEX颜色后添加两位透明度（Alpha）数字。例如，#6366F180表示相同靛蓝色但透明度为50%（0x80 = 128，约为255的50%）。所有现代浏览器的CSS均支持此表示法。简写形式为4位，如#63F8。
为什么同一颜色在不同显示器上看起来不同？
颜色显示效果取决于显示器的色彩配置文件、亮度和Gamma校准。如果两台屏幕的色彩配置文件不同，它们显示相同sRGB值（#6366F1）的效果可能有所差异。颜色转换工具在定义的色彩空间（通常为sRGB）内工作，输出数学上正确的结果。感知差异是显示器校准问题，而非转换错误。
如何获取颜色的更浅或更深色调？
将颜色转换为HSL并调整L（亮度）通道。将L增大至100%可得到更浅的色调；减小至0%可得到更深的色调。色相和饱和度保持不变。在CSS中可直接实现：hsl(239 84% 80%)是hsl(239 84% 67%)的较浅版本。现代CSS也提供color-mix(in srgb, #6366F1, white 30%)实现同样效果，无需手动转换。