颜色转换器
HEX、RGB、HSL 三种色值互转，附带深浅梯度与前景对比度检查。
输入颜色
RGB
HSL
转换结果
效果预览
#2F54D9
请输入或选择一个颜色
深浅梯度
基于当前颜色生成的明暗梯度
前景对比度
当前颜色作为背景时，白色 / 黑色文字的对比度（WCAG 标准）
本工具所有运算在本地浏览器完成，你的文件、文本不会上传到服务器
工具介绍
颜色转换器在 HEX、RGB、HSL 三种写法之间互转：改其中一种，另外两种同步更新，省去在设计和代码之间反复换算。 The colour converter moves between HEX, RGB and HSL: change one and the other two follow, so you stop recalculating between design and code.
附带的对比度检查把当前颜色当作背景，分别计算白色文字和黑色文字的对比度，并标出是否达到 WCAG AA 的 4.5:1 门槛。 The contrast check treats the current colour as the background, measures white and black text separately, and marks whether each clears the WCAG AA threshold of 4.5:1.
- HEX / RGB / HSL 互转HEX / RGB / HSL conversion
- 深浅梯度预览Tint and shade preview
- 白色与黑色文字对比度White and black text contrast
- 数值失焦自动回填Values normalised on blur
使用说明
- 输入 HEX 值，或用 RGB、HSL 数值定位颜色。Enter a HEX value, or set the colour with RGB or HSL numbers.
- 在三种格式之间切换，查看对应的另一种写法。Switch between the three formats to see the equivalent notation.
- 拖动 HSL 滑杆观察深浅变化与对比度结果。Drag the HSL sliders to watch lightness and contrast change.
- 复制需要的颜色值。Copy the value you need.
常见问题
支持透明色吗？Does it support transparency?
目前按不透明颜色计算，带 Alpha 的写法会忽略透明度部分。Colours are treated as opaque; an Alpha component is ignored.
4.5:1 是什么标准？What is the 4.5:1 threshold?
这是 WCAG AA 对正文文字的最低对比度要求，大字号标题可以放宽到 3:1。It is the WCAG AA minimum for body text. Large headings may drop to 3:1.
HSL 数值为什么和我输入的不一样？Why did the HSL numbers change?
输入超出范围或格式不完整时，失焦后会自动回填为实际生效的数值。Out-of-range or incomplete input is normalised to the value actually in effect when the field loses focus.