结果
#667EEArgb(102, 126, 234) · hsl(229, 76%, 66%)HEX
RGB
rgb(102, 126, 234)HSL
hsl(229, 76%, 66%)WCAG 对比度
大号文本示例正文文本示例,用于检查可读性。
3.66:1AA Large
背景色
✕AA正文文本 · 4.5:1
✓AA大号文本 · 3:1
✕AAA正文文本 · 7:1
✕AAA大号文本 · 4.5:1
✓UIUI 组件 · 3:1
关于 颜色转换器
设计稿给的是 HEX,CSS 里想用带透明度的 rgba,调色时又更习惯 HSL 的色相饱和度——颜色值在不同格式间换算很常见。本工具在浏览器本地把颜色在 HEX、RGB(A)、HSL(A) 等格式间精确互转,并实时预览色块,方便核对效果,整个过程不联网,调色板与品牌色不会离开你的设备。 建议在日常开发中收藏本工具,遇到数据格式转换需求时即可快速打开使用。所有转换均在浏览器本地完成,数据不会上传,可放心粘贴敏感内容。
使用场景
- 对齐设计稿 — 把设计师给的 HEX 转成 CSS 里要用的 rgb 或 hsl 值。
- 加透明度 — 把不透明的颜色转成 rgba,调出半透明遮罩或阴影。
- 微调色相 — 用 HSL 模式调整色相和明度,快速生成同色系的深浅变体。
- 统一变量 — 把散落的颜色统一成一种格式,方便录入设计系统的色彩变量。
- 核对预览 — 粘贴未知颜色值,实时看到色块确认是否为想要的颜色。
常见问题
支持简写 HEX 吗?
支持。三位简写如 #f00 会被识别并展开成 #ff0000,四位带透明度的简写(#f008)同样可解析。
HEX 转 HSL 会丢精度吗?
HEX 每通道只有 256 级,转成 HSL 后再转回可能有 1 个数值的舍入误差,属正常现象,肉眼通常无法分辨。
透明度怎么表示?
RGBA/HSLA 里 alpha 用 0 到 1 的小数;八位 HEX 则用最后两位十六进制表示透明度,工具会自动对应换算。
支持 CSS 颜色名吗?
常见的命名颜色(如 red、rebeccapurple)通常可作为输入识别,输出则以数值格式为主,便于精确使用。
想做纯数字进制换算怎么办?
本工具专注颜色格式;若只是想把十六进制数转十进制等纯数字换算,请用本站的进制转换工具。
有浏览器兼容性要求吗?
本工具兼容所有现代浏览器(Chrome、Firefox、Edge、Safari),无需安装任何插件或扩展。
可以离线使用吗?
首次加载后,部分功能在离线状态下仍可使用。页面资源加载后,核心逻辑完全在浏览器本地运行,不依赖网络。