无需登录 数据私有 本地保存

颜色代码转换工具 - RGB,HEX,HSL,HSV互转

20
0
0
0
#3B82F6 RGB(59, 130, 246) ~ 蓝色
点击色块也可取色
HEX
#
支持3位或6位十六进制
RGB
R
G
B
HSL
H°
S%
L%
HSV
H°
S%
V%
常见问题与知识点
HEX（十六进制）颜色代码是网页设计中最常用的颜色表示方式，以 # 开头，后跟6位十六进制数字（如 #FF5733），每两位分别表示红(R)、绿(G)、蓝(B)通道的值（范围 00-FF，即十进制 0-255）。也支持3位简写形式（如 #F53 等价于 #FF5533）。
RGB 和 HEX 本质上描述的是同一颜色空间——都是基于红绿蓝三原色的加色模型。区别仅在于表示方式：RGB 使用十进制数值（0-255），而 HEX 使用十六进制。例如纯红色在 RGB 中是 rgb(255, 0, 0)，在 HEX 中是 #FF0000。
HSL 代表色相(Hue)、饱和度(Saturation)、亮度(Lightness)。色相 H 用角度表示（0°-360°，0°=红色，120°=绿色，240°=蓝色）；饱和度 S 表示颜色的纯度（0%=灰色，100%=最鲜艳）；亮度 L 表示明暗程度（0%=黑色，50%=纯色，100%=白色）。HSL 比 RGB 更直观，适合设计师调色。
HSV（又称 HSB）代表色相(Hue)、饱和度(Saturation)、明度(Value/Brightness)。与 HSL 的主要区别在于对"亮度"的定义：HSL 的 L=50% 时颜色最纯，L=100% 是纯白；而 HSV 的 V=100% 时颜色最亮最纯，V=0% 是纯黑。HSV 更接近人类对颜色的直觉，广泛应用于图像编辑软件（如 Photoshop 的拾色器）。
CSS 支持多种颜色表示：color: #FF5733;（HEX）、color: rgb(255, 87, 51);（RGB）、color: hsl(9, 100%, 60%);（HSL）。此外还支持带透明度的 rgba() 和 hsla()，以及现代的 #FF5733CC（8位HEX含alpha）。HSV 不直接被 CSS 支持，但可通过转换后使用。
颜色转换在前端开发、UI设计、图像处理中非常常见。例如：从设计稿（常用HEX）转换到代码中的RGB/HSL；调整颜色亮度或饱和度时使用HSL更直观；使用HSV可以方便地生成调色板或渐变；在不同工具间（如Figma、Photoshop、CSS）需要格式统一时也经常用到。
🔧 相关工具