工具介绍
网页上的颜色有几种等价的写法。HEX(#4f46e5)是 CSS 和设计稿交付中最常用的紧凑格式;RGB(rgb(79, 70, 229))直接给出红绿蓝三个分量,代码中经常需要;HSL(hsl(243, 75%, 59%))用色相、饱和度、亮度描述颜色——调整颜色(比如调暗、降饱和)时最直观。
它们描述的是同一个颜色。本工具在三者之间精确转换,并显示预览色块让你确认就是想要的那个颜色。
为什么使用它?
- 任意格式输入——HEX(3位或6位)、RGB、HSL——输出全部格式。
- 实时预览色块,看到颜色本身而不只是数字。
- 内置取色器,想用眼睛挑颜色时直接选。
- 每种格式一键复制,直接可用于 CSS 或代码。
- 免费、即时、不上传数据。
使用方法
- 输入或粘贴颜色:#4f46e5、rgb(79, 70, 229)、hsl(243, 75%, 59%) 都可以。
- 或者点击取色器直接选色。
- 在结果中查看三种格式,并核对预览色块。
- 点所需格式旁的"复制"。
示例
输入
#4f46e5输出
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)三种写法,同一个颜色。
常见问题
什么时候该用 HSL 而不是 HEX 或 RGB?
需要"推理"颜色的时候。在 HSL 里把颜色调暗 10% 就是把亮度减 10;在 HEX 或 RGB 里则要重新计算所有通道。设计系统常用 HSL 定义色板正是这个原因。
支持 #fff 这种 3 位 HEX 吗?
支持。#fff 是 #ffffff 的简写——每一位重复一次。两种写法都能识别,输出统一为 6 位完整格式。
透明度(alpha)怎么处理?
本工具转换不透明颜色(RGB/HSL 数值部分)。需要透明度时自己补上即可:rgba(79, 70, 229, 0.5) 或 #4f46e580——颜色部分不变。
为什么 HSL 数值和别的工具差 1?
四舍五入的差异。HSL 和 RGB 互转会产生小数,不同工具舍入方式不同。色相或百分比差 ±1 肉眼不可见,属于正常现象。
支持 'red' 这类颜色名吗?
Phase 1 暂不支持——工具专注于开发者最常互转的三种数字格式。请输入颜色的 HEX/RGB/HSL 值,或用取色器直接选。