🧰在线工具箱

颜色转换器

HEX、RGB、HSL 颜色格式互转

rgb(59, 130, 246)
hsl(217, 91%, 60%)

工具简介

颜色转换器是一款帮助设计师和开发者在不同颜色格式之间进行转换的工具。在Web开发和设计工作中，我们经常需要在HEX（十六进制）、RGB（红绿蓝）、HSL（色相、饱和度、亮度）等不同格式之间切换。本工具提供可视化的颜色选择器，支持实时预览和三种格式的即时转换，所有计算都在浏览器本地完成。

使用方法

  1. 使用颜色选择器点击选择想要的颜色，或直接输入已知的颜色值
  2. 可以在HEX输入框输入十六进制颜色代码（如 #3B82F6）
  3. 也可以在RGB区域分别输入红(R)、绿(G)、蓝(B)三个通道的值（0-255）
  4. 或在HSL区域输入色相(H 0-360)、饱和度(S 0-100%)、亮度(L 0-100%)
  5. 修改任一格式的值，其他格式会自动同步更新
  6. 点击对应格式旁的「复制」按钮，将颜色代码复制到剪贴板

常见使用场景

  • 网页设计：将设计稿中的颜色值转换为CSS代码所需的格式
  • 品牌设计：在不同设计软件之间转换品牌色彩值
  • UI开发：根据设计规范生成各种格式的颜色代码
  • 颜色调整：使用HSL调整颜色的饱和度和亮度
  • 学习研究：理解不同颜色模型之间的关系
  • 印刷准备：为不同输出媒介准备对应格式的颜色值

常见问题（FAQ）

Q1: HEX、RGB、HSL有什么区别？

HEX是十六进制颜色表示法，用6位字符表示颜色，如#FF5733。RGB通过红(R)、绿(G)、蓝(B)三个颜色通道的数值（0-255）混合表示颜色。HSL通过色相(H)、饱和度(S)、亮度(L)来描述颜色，更接近人类对颜色的感知方式。

Q2: CSS中应该用哪种颜色格式？

三种格式都可以在CSS中使用。HEX最为紧凑常用；RGB适合需要动态调整或设置透明度(RGBA)的场景；HSL在需要调整颜色深浅或创建颜色变体时更直观方便。

Q3: 为什么输入的颜色值不生效？

请检查输入格式是否正确：HEX应以#开头，后跟6位十六进制字符；RGB每个通道值应在0-255之间；HSL的H在0-360之间，S和L在0-100之间。注意不要包含多余的空格或字符。

Q4: 如何获取一个颜色的深色/浅色变体？

使用HSL格式调整最为方便。保持H（色相）和S（饱和度）不变，增加L（亮度）值可获得浅色变体，减少L值可获得深色变体。这是创建配色方案的常用技巧。

Q5: 这个工具支持透明度(Alpha)吗？

目前本工具专注于不透明颜色的格式转换。如需处理带透明度的颜色（如RGBA、HSLA），可以在转换后手动添加Alpha通道值。后续版本可能会加入透明度支持。