五岁小站 - 免费在线工具箱

加载中...

颜色格式转换

对比度 7.5 : 1 (AA✓)
#5B9BD5 SteelBlue 类似
210
60
60
100
最近使用
颜色格式互转(任意格式输入会同步其他格式)
HEX
HEX8 (含透明度)
RGB
RGBA
HSL
HSLA
HSV / HSB
CMYK
CIE LAB
CSS 命名色(最接近)
智能配色推荐
渐变色生成器
°
复制background: linear-gradient(...);
CSS 命名色(共 140 个,点击应用)
140 个
使用说明

多种输入:在右侧任意格式框输入颜色,其他格式会自动同步;支持 HEX 简写(#F00)、不同分隔符(rgb(255 0 0))、CSS 命名色(red)。
HSL 滑块:左下方滑块可分别调节色相 / 饱和度 / 亮度 / 透明度,所见即所得。
智能配色:基于色彩学经典理论自动生成互补 / 三元 / 分裂互补 / 相似 / 单色等 5 种配色方案。
渐变器:把当前色加入色标后自动生成 CSS gradient 代码,支持线性 / 径向。
对比度:右上角实时显示与白色文字的 WCAG 对比度等级。

支持的颜色格式

#RGB / #RRGGBB / #RRGGBBAA
rgb(R, G, B) / rgba(R, G, B, A)
hsl(H, S%, L%) / hsla(H, S%, L%, A)
hsv(H, S%, V%)
cmyk(C%, M%, Y%, K%)
lab(L, a, b)
red, gold, steelblue 等 140 种 CSS 命名色
底层基于 chroma.js 业界成熟色彩库,转换精度有保障。

常见问题(FAQ)
HEX、RGB、HSL、HSV、CMYK、LAB 这些格式有什么区别?
HEX 是六位 16 进制最常用于网页;RGB 红绿蓝三通道是屏幕原生格式;HSL 用色相/饱和度/亮度更符合直觉;HSV/HSB 多见于 PS/Sketch 拾色器;CMYK 是印刷四色;LAB 基于人眼感知,是色彩管理与跨设备校准的首选。
什么时候使用 RGBA?怎么写八位 HEX?
需要透明度时使用 RGBA 或 HSLA,例如 rgba(0,0,0,0.5) 表示半透明黑。CSS 4 也支持 #RRGGBBAA,例如 #FF000080 = rgba(255,0,0,0.5)。半透明遮罩、玻璃拟态、阴影都常用。
为什么我输入的 HEX 在转换后略有不同?
CMYK / LAB 与 RGB 之间是非线性映射,存在精度舍入;某些颜色超出 sRGB 色域(如鲜艳的青绿在印刷里无法精确表达),转回时会有最近色逼近。本工具使用 chroma.js 行业算法,舍入到合理位数。
互补色、三元色、分裂互补是什么意思?
互补色(Complementary):色相环上对面的两色,对比强烈;三元色(Triadic):等距 120° 的三色,平衡而活泼;分裂互补(Split-Complementary):互补色及其相邻两色,对比柔和;相似色(Analogous):相邻色相,和谐自然;单色(Monochromatic):相同色相不同明度饱和度,简洁统一。
WCAG 对比度等级 AA / AAA 是什么?
WCAG 是 W3C 无障碍指南。普通文本要求 AA ≥ 4.5:1,AAA ≥ 7:1;大号文本(18pt+ 或 14pt 加粗)AA ≥ 3:1,AAA ≥ 4.5:1。对比度过低会让弱视用户看不清文字,本工具实时计算颜色与白色文字的对比度供参考。
已复制