关于颜色格式转换
颜色是 Web 设计与前端开发中不可或缺的元素。CSS 支持多种颜色表示方式，最常见的包括 HEX（十六进制，如 #4285f4）、RGB（红绿蓝，如 rgb(66, 133, 244)）和 HSL（色相-饱和度-亮度，如 hsl(217, 89%, 60%)）。不同表示方式各有优势：HEX 简洁紧凑，RGB 直观对应显示器原理，HSL 更符合人眼对色彩的感知方式。
在设计工作中，设计师通常在 Figma、Sketch 等工具中以 HEX 形式给出颜色，开发者需要将其转换为 RGB 用于 CSS rgba() 透明度控制；在做色彩渐变动画时，HSL 模型更适合做色相平滑过渡；在数据可视化中，HSL 便于生成同色系不同明度的色板。颜色格式互转是前端工程师的常见需求。
本颜色转换器支持 HEX、RGB、HSL 三种格式之间的双向转换，输入任意一种格式即可自动得到其他两种表示。所有转换在浏览器本地完成，无需联网，可快速验证设计稿中的颜色值。
核心特性
三格式互转
支持 HEX、RGB、HSL 三种主流颜色格式的双向转换，覆盖绝大多数前端开发场景。
Alpha 通道支持
支持 8 位 HEX（#RRGGBBAA）、4 位简写（#RGBA）、rgba()、hsla() 等带透明度格式。
智能格式识别
自动识别输入是 HEX 还是 RGB，无需手动选择源格式，输入即转换。
3 位 HEX 兼容
支持 3 位简写 HEX（如 #fff）与 6 位完整 HEX（如 #ffffff），自动展开计算。
实时色块预览
转换后在结果区显示色块预览，所见即所得，便于快速核对颜色值。
本地处理无上传
所有颜色转换在浏览器内完成，不依赖任何外部 API。
使用场景
还原设计稿颜色
设计师在 Figma 中给出的颜色为 HEX 格式，开发者可在 CSS 中直接使用，或转换为 RGB 以配合 rgba() 透明度。
生成色板
使用 HSL 色相值固定，调整饱和度与亮度生成同色系不同明度的色板，用于 UI 主题色阶。
色彩渐变动画
CSS 渐变与动画在 HSL 模型下色相平滑过渡更自然，将 HEX 转 HSL 后进行动画计算。
数据可视化配色
在 ECharts、D3.js 等可视化库中，常用 HSL 生成区分度高的多色色板。
常见问题
HEX 与 RGB 表示的颜色一样吗？
是的。HEX 与 RGB 是同一种颜色模型（加色法 RGB）的不同表示形式。#4285f4 等价于 rgb(66, 133, 244)，两者描述的颜色完全相同，仅书写形式不同。
为什么 HSL 比 RGB 更适合调色？
HSL 模型将颜色分解为色相、饱和度、亮度三个独立维度，符合人眼感知。固定 H 改变 S/L 即可生成同色系不同明度的颜色，而 RGB 三个分量相互耦合，调整任一分量都会改变色相。
支持透明度（Alpha 通道）吗？
支持。本工具支持 8 位 HEX（#RRGGBBAA）、4 位简写（#RGBA）、rgba()、hsla() 等带透明度的格式，输入后自动转换为其他格式并附上 alpha 值。
为什么转换结果与设计软件显示的颜色略有差异？
不同软件可能使用不同的色彩管理配置（sRGB、Display P3、Adobe RGB 等），导致同一颜色值显示效果略有差异。Web 标准使用 sRGB 色彩空间，本工具转换结果符合 sRGB 标准。