工具说明
颜色转换工具在 HEX、RGB、HSL 三种格式之间双向互转,并提供实时色块预览和取色器。HEX(如 #3B82F6)常见于 CSS,RGB 直观对应红绿蓝通道,HSL 用色相 / 饱和度 / 亮度描述,调明暗、做配色时更顺手。
改任意一种格式,其它两种会同步更新,并能立刻看到对应的颜色。整个换算在浏览器本地完成,方便设计师和前端在不同表示法之间快速切换。
使用步骤
- 用取色器选一个颜色,或直接输入某种格式的颜色值。
- 查看另外两种格式的同步结果。
- 需要更亮 / 更暗时,调 HSL 的亮度最直观。
- 点击复制你需要的那种格式。
- 把颜色值粘贴进 CSS、设计软件或代码里。
适用场景
- 把设计稿里的颜色值转成 CSS 能用的 HEX。
- 用 HSL 微调主题色的明暗,生成深浅梯度。
- 核对设计软件和代码里同一颜色是否一致。
- 从 RGB 数值反推 HEX,或反过来。
- 快速试不同饱和度 / 亮度看视觉效果。
常见问题
HSL 和 RGB 有什么区别,该用哪个?
RGB 按红绿蓝三通道混色,HSL 按色相 / 饱和度 / 亮度描述。调明暗、找同色系深浅用 HSL 更方便;和硬件、像素数据打交道用 RGB。
支持带透明度(alpha)的颜色吗?
核心换算针对不透明颜色。透明度通常以 RGBA / HSLA 或 8 位 HEX 表示,可在生成后自行补上 alpha 通道。
三位 HEX(如 #f00)能识别吗?
三位简写等价于把每位重复一遍(#f00 = #ff0000)。输入后会按完整六位解析并转换。