颜色转换器

在不同颜色格式之间转换,包括 HEX、RGB、HSL、CMYK。支持 EyeDropper API 取色、调色板生成和配色方案分析。

颜色选择器

使用颜色选择器选取颜色

颜色工具

高级颜色选择和管理工具

颜色格式

当前颜色的多种表示格式

#
rgb(,,)
rgba(,,,)
hsl(,%,%)
hsv(,%,%)
cmyk(%,%,%,%)
oklch(%%)

Tailwind CSS 色板

官方 Tailwind CSS 默认色板。选择格式后单击复制,双击填入颜色选择器。

50100200300400500600700800900950
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

颜色格式说明

了解不同颜色格式的特点和适用场景

HEX 十六进制

使用 6 位十六进制数字表示颜色,如 #FF5733。这是网页开发中最常用的颜色格式,兼容性最好,适合在 CSS 和 HTML 中使用。

格式:#RRGGBB
范围:00-FF (0-255)
优点:简洁、兼容性好
缺点:不够直观

RGB 红绿蓝

使用红、绿、蓝三个颜色通道的数值来表示颜色,如 rgb(255, 87, 51)。这种格式直观易懂,适合设计师和开发者理解颜色构成。

格式:rgb(R, G, B)
范围:0-255
优点:直观、易理解
缺点:不能直观表示亮度

RGBA 红绿蓝透明度

在 RGB 基础上增加 Alpha 通道表示透明度,如 rgba(255, 87, 51, 0.8)。适合制作叠加层、阴影等半透明视觉效果。

格式:rgba(R, G, B, A)
范围:R,G,B: 0-255,A: 0-1
优点:支持透明度,视觉效果更丰富
缺点:兼容性略低于 RGB

HSL 色相饱和度亮度

使用色相、饱和度、亮度三个属性表示颜色,如 hsl(12, 100%, 60%)。更接近人眼感知颜色的方式,便于调整明暗和鲜艳程度。

格式:hsl(H, S%, L%)
范围:H: 0-360°,S/L: 0-100%
优点:直观、易调整
缺点:不能直观表示明度

HSV 色相饱和度明度

使用色相、饱和度、明度三个属性表示颜色,如 hsv(12, 100%, 100%)。图形软件中常用,明度能更直观地表示颜色亮度。

格式:hsv(H, S%, V%)
范围:H: 0-360°,S/V: 0-100%
优点:明度直观、易调整
缺点:网页浏览器支持有限

CMYK 青品黄黑

使用青色、品红、黄色、黑色四个颜色通道表示颜色,如 cmyk(0%, 66%, 80%, 0%)。这是印刷行业的标准格式,适合需要印刷的设计作品。

格式:cmyk(C%, M%, Y%, K%)
范围:0-100%
优点:印刷标准、专业
缺点:网页显示不够准确

OKLCH 感知色彩空间

使用感知亮度、色度、色相三个属性表示颜色,如 oklch(60% 50% 12)。这是更符合人眼感知的现代色彩空间,色域更广,适合现代显示设备。

格式:oklch(L% C% H)
范围:L: 0-100%,C: 0-150,H: 0-360°
优点:感知准确、色域广
缺点:兼容性有限

使用建议

  • 网页开发:优先使用 HEX 和 RGB 格式,兼容性最好
  • 设计调整:使用 HSL 格式,便于调整色相和饱和度
  • 专业印刷:使用 CMYK 格式,确保印刷效果
  • 现代应用:可考虑使用 OKLCH 格式,获得更好的色彩表现
  • 颜色选择:使用 HSV 滑块,直观地选择颜色
  • 透明效果:使用 RGBA 格式制作半透明和叠加效果