颜色转换工具

HEX、RGB、HSL颜色格式相互转换

颜色选择

转换结果

HEX
#3498db
RGB
rgb(52, 152, 219)
HSL
hsl(207, 70%, 53%)
CSS 颜色名称
-

关于颜色格式转换器的常见问题

常见颜色格式包括：HEX（#RRGGBB 如#ff0000）、RGB（rgb(255,0,0)）、RGBA（rgba(255,0,0,0.5) 带透明度）、HSL（hsl(0,100%,50%) 色相/饱和度/亮度）、HSLA（带透明度的 HSL）。不同场景使用不同格式，CSS 中都可以使用。
没有区别。#fff 是#ffffff 的简写形式，每位数字重复一次，即#fff = #ffffff = 纯白色。类似地，#f00= #ff0000（红色），#0f0= #00ff00（绿色），#00f= #0000ff（蓝色）。简写形式仅当每对字符相同时才有效。
取决于场景。RGB 直观，直接指定红绿蓝分量，适合精确控制颜色。HSL 更符合人类对颜色的感知，调整色相可以改变颜色类型，调整饱和度控制鲜艳程度，调整亮度控制明暗。设计调色时 HSL 更方便，编程时 RGB 更常用。
RGBA 的第四个参数是 alpha 通道，取值 0 到 1。0 表示完全透明，1 表示完全不透明，0.5 表示半透明。例如 rgba(255,0,0,0.5) 是半透明红色。在需要透明背景、叠加效果时非常有用。HEX 格式也有 8 位写法#RRGGBBAA。
灰度颜色的 RGB 三个分量相等。常用转换公式：Gray = 0.299*R + 0.587*G + 0.114*B（考虑人眼对不同颜色敏感度）。例如 rgb(255,100,50) 转换为灰度约为 rgb(139,139,139)。本工具可以直接预览和转换。
Web 安全色是 216 种在早期 8 位显示器上能正确显示的颜色，由 6 个级别（0、51、102、153、204、255）的 RGB 组合而成。现代显示器已不需要考虑这个限制，但了解这个概念有助于理解颜色历史。HEX 形式是#00336699CCFF 的组合。