颜色转换器
热门 🔥在 HEX、RGB、HSL 之间转换颜色
如何使用 颜色转换器
- 1使用颜色选择器选择颜色或以任意格式输入值
- 2所有其他格式即时更新
- 3点击任意格式旁边的复制按钮
关于 颜色转换器
颜色转换器即时在所有常见 CSS 格式之间转换颜色——HEX、RGB、RGBA、HSL 和 HSLA。以任何支持的格式输入值，所有其他表示形式都会即时更新，同时还有视觉颜色预览。
设计师和前端开发者经常需要在颜色格式之间转换：设计工具导出 HEX，CSS 属性更喜欢用 RGBA 实现透明度，而 HSL 非常适合程序化颜色操作。此工具消除了手动计算，并消除了常见的转换错误来源。
所有转换完全在您的浏览器中运行，无需服务器。视觉颜色选择器让您选择任何颜色并立即获得所有格式表示。
颜色转换器的主要功能
- 即时在 HEX、RGB、RGBA、HSL 和 HSLA 之间转换
- 输入任意格式，其他格式同时更新
- 视觉颜色预览色块实时更新
- 浏览器颜色选择器用于交互式颜色选择
- 支持 3 位（#RGB）和 6 位（#RRGGBB）HEX 格式
- 在 RGBA 和 HSLA 中处理 alpha/透明度通道
- 每种颜色格式均可一键复制
- 完全在浏览器内运行，无服务器请求
支持的格式
输入格式
输出格式
以任意格式输入值，所有其他格式即时更新。目前不支持命名 CSS 颜色（如 "cornflowerblue"）作为输入。
示例
将 Figma HEX 颜色转换为 CSS 的 HSL
将设计工具的 HEX 值转换为用于 CSS 自定义属性的 HSL 值。
输入
#3B82F6
输出
RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%) | HSLA: hsla(217, 91%, 60%, 1)
为 RGB 颜色添加透明度
获取带有 50% 不透明度的纯色的 RGBA 等效值，用于半透明叠加。
输入
rgb(0, 0, 0) with alpha 0.5
输出
RGBA: rgba(0, 0, 0, 0.5) | 带 alpha 的 HEX: #00000080
常见使用场景
- 将来自设计工具（Figma、Sketch）的 HEX 颜色转换为 CSS RGB 或 HSL 值
- 将纯色转换为 RGBA 以实现半透明叠加
- 在 CSS 中使用 HSL 值进行程序化明暗调整
- 在前端代码和后端 API 之间桥接颜色格式
- 验证颜色的不同格式表示是否等效
- 快速检查设计规格中 HEX 颜色的 RGB 值
故障排除
HEX 值产生的颜色与预期不同
解决方案
HEX 值必须是 # 后面精确的 3 或 6 个十六进制数字。#FF0（3 位）和 #FF0000（6 位）都是有效的红色。
HSL 色调值超出范围
解决方案
HSL 色调是 0 到 360 度的值。饱和度和亮度是百分比（0-100%）。
RGBA/HSLA 中的 alpha 值不起作用
解决方案
Alpha 是 0（完全透明）到 1（完全不透明）之间的值。使用 0 到 1 之间的小数，而不是百分比。
常见问题
支持哪些颜色格式？
HEX（#RRGGBB 和 #RGB）、RGB、RGBA、HSL 和 HSLA。输入任意格式，其他格式均即时计算。
RGB 和 HSL 有什么区别？
RGB 将颜色定义为红、绿、蓝光的强度。HSL 通过色调（0-360°）、饱和度（0-100%）和亮度（0-100%）来定义颜色。
什么时候应该使用 RGBA 而不是 HEX？
当您需要透明度（alpha 通道）时使用 RGBA。RGBA 是 CSS 中透明颜色最通用兼容的格式。
RGBA 中的 alpha 值代表什么？
Alpha 表示不透明度：0 是完全透明，1 是完全不透明。0.5 等值提供 50% 透明度。
可以转换 CSS 命名颜色（如 "cornflowerblue"）吗？
目前不支持命名 CSS 颜色作为输入。从 CSS 参考中找到 HEX 值并输入即可转换。
HEX 缩写（#RGB）和完整 HEX（#RRGGBB）有区别吗？
#RGB 是每个数字加倍的缩写。#F80 等于 #FF8800。缩写仅在每对的两个数字相同时有效。
我的数据会被发送到服务器吗？
不会。所有转换均使用 JavaScript 数学在您的浏览器本地执行。
可以用它找到颜色的 HSL 亮度吗？
是的。输入 HEX 或 RGB 值，HSL 输出会显示亮度百分比。