颜色转换器 (HEX/RGB/HSL)
在 HEX、RGB 和 HSL 格式之间转换颜色。包含可视化颜色选择器和预览。
使用方法
- 以任意格式（HEX、RGB 或 HSL）输入颜色值
- 即时查看所有其他格式的转换结果
- 使用颜色选择器直观地选择颜色
- 使用「复制」按钮复制任意格式
常见问题
-
HEX、RGB 和 HSL 有什么区别？
HEX 使用十六进制表示法（#FF5733）。RGB 通过红、绿、蓝值（0-255）定义颜色。HSL 通过色相（0-360）、饱和度（0-100%）和亮度（0-100%）定义颜色。
-
CSS 中应该使用哪种颜色格式？
三种格式在 CSS 中都有效。HEX 最紧凑，RGB 在混合颜色时最直观，HSL 最适合通过调整亮度或饱和度来创建颜色变体。
-
支持透明度吗？
当前版本转换不透明颜色。对 Alpha 通道（RGBA、HSLA、8 位 HEX）的支持已计划在未来更新中添加。
-
可以在手机上使用颜色选择器吗？
可以。颜色输入在所有设备上使用原生颜色选择器，包括移动浏览器。
三种颜色格式的特点
网页开发中最常见的颜色表示方式有三种，各有其适用场景：
HEX（十六进制）
格式：#FF5733，由三组两位十六进制数分别表示红、绿、蓝三个通道，每个通道范围 00–FF（即 0–255）。HEX 是 CSS 中最紧凑的写法，也是设计工具（Figma、Sketch、Photoshop）导出颜色的默认格式。
#FFF 是简写形式，等价于 #FFFFFF——每位数字重复两次即可还原。
RGB（红绿蓝）
格式：rgb(255, 87, 51)，直接用 0–255 的十进制数表示三个通道。与 HEX 本质相同，只是表示方式更直观。当需要程序动态计算颜色时（如渐变动画、主题切换），RGB 更易于数值运算。
带透明度版本为 rgba(255, 87, 51, 0.8)，透明度从 0（完全透明）到 1（完全不透明）。
HSL（色相·饱和度·亮度）
格式：hsl(14, 100%, 60%)，其中色相（Hue）是 0–360 的角度值，0 为红色，120 为绿色，240 为蓝色；饱和度（Saturation）越高颜色越鲜艳；亮度（Lightness）50% 为纯色，趋近 0% 变黑，趋近 100% 变白。
HSL 在创建颜色变体时极为实用：保持色相和饱和度不变，只调整亮度，就能得到同色系的深色、浅色版本，非常适合设计配色方案。
如何在 CSS 中选择格式？
- 从设计稿直接复制颜色时，通常是 HEX，直接使用即可
- 需要动态计算透明度时，使用 RGBA
- 做主题配色、悬停效果、暗色模式时，HSL 让调色更直观
- CSS 自定义属性（变量）配合
hsl()极为强大，只需调整一个数字就能改变整套色调
现代浏览器对三种格式的支持完全一致，选择哪种完全取决于可读性和使用便利性。