← 返回首页
颜色值转换
#3B82F6
rgb(59, 130, 246)
小程序 WXSS 中支持 HEX（#ffffff）、RGB（rgb(255,255,255)）和 RGBA（rgba(255,255,255,0.5)）格式。透明度建议使用 RGBA 格式书写。
功能亮点
可视化取色器
原生颜色选择器 + 大色块预览，拖一拖就能找到想要的颜色。
三格式同步
HEX ↔ RGB ↔ HSL 互转，改一个值，三种格式全部同步更新。
RGB/HSL 滑块
每个通道独立滑块，拖动时颜色实时变化——调色比设计软件还直观。
一键复制
三种格式各自独立复制按钮，粘贴到 CSS/JS/WXSS 就能用。
使用步骤
- 点击左侧色块或用取色器选择颜色；
- 拖动 RGB 或 HSL 滑块微调；
- 复制你需要的格式（HEX / RGB / HSL）。
关于 颜色值转换
前端和小程序开发中，颜色有多种等价表示方式：HEX（如 #FF6600，CSS 最常用）、RGB/RGBA（rgb(255,102,0)，JS 操作更方便）、HSL/HSLA（hsl(24,100%,50%)，按色相调整更直观）。不同场景用不同格式更方便——设计师在 Figma 中调整颜色时用 HSL，前端写 CSS 时用 HEX，JS 动态设置颜色时用 RGB。本工具支持 HEX/RGB/HSL 三种格式一键互转，带有可视化取色器和颜色滑块。
常见问题
- HEX 和 RGB 本质上是一样的吗？
- 是的。HEX 只是 RGB 的十六进制表示。例如
#FF6600拆解为：FF（红=255）、66（绿=102）、00（蓝=0），等价于rgb(255,102,0)。HEX 的优势是短（7 个字符），RGB 的优势是方便在 JS 中操作。HEX 也有#FF6600FF的 8 位写法（后两位是 Alpha），但兼容性不如 RGBA。 - HSL 相比 RGB 有什么优势？
- HSL 用色相、饱和度、亮度描述颜色，比 RGB 三通道更接近人类感知颜色的方式。① 想「同色系更亮一点」只需调 L 值；② 想「同亮度不同颜色」调 H 值；③ 互补色只需 H+180°。对于系统化配色方案，HSL 比 RGB 好用得多。