颜色转换工具

在线转换 HEX、RGB 和 HSL 颜色，预览规范化色值并复制颜色转换报告。

工具资源加载中...

颜色转换工具介绍

颜色转换工具支持十六进制颜色、RGB 三通道与 HSL 色相饱和度亮度互转。输入一种颜色后，即可查看颜色预览、六位 HEX 颜色代码、RGB 函数和 HSL 函数，并分别复制结果或导出 TXT 报告，适合网页配色、CSS 颜色整理、设计稿颜色核对等场景。颜色计算在浏览器内完成。

三种常见颜色格式

支持 #RGB、#RRGGBB、整数 RGB 和带百分号的 HSL，输出统一的规范化颜色值。

显示颜色预览

使用校验后的六位十六进制颜色生成色块，方便结合代码观察实际显示效果。

逐项复制与导出

HEX、RGB、HSL 可分别复制，也可以复制整份报告或导出文本文件。

颜色代码转换使用教程

选择输入格式：HEX、RGB 或 HSL。
输入相应颜色，例如 HEX 的 #2563EB、RGB 的 rgb(37, 99, 235)，或 HSL 的 hsl(221.21, 83.19%, 53.33%)。
点击“转换颜色”，查看色块和三种结果。修改输入或输入格式后，旧结果会清除，需要重新转换。
点击对应复制按钮使用颜色代码，或导出 TXT 保存报告。

“加载示例”使用网站主题蓝色 #2563EB，其 RGB 为 rgb(37, 99, 235)，HSL 为 hsl(221.21, 83.19%, 53.33%)。

HEX、RGB 与 HSL 输入规则

HEX 必须带 #，支持三位或六位十六进制，大小写均可。三位简写按通道复制展开，例如 #36F 转换为 #3366FF。不接受四位或八位透明色。

RGB 接受 rgb(37, 99, 235) 或 37, 99, 235，每个通道必须是 0–255 的整数。不支持百分比 RGB、RGBA、小数通道或空格分隔的 CSS 新语法。

HSL 接受 hsl(120, 100%, 50%) 或 120, 100%, 50%。色相范围为 0–360，饱和度和亮度范围为 0–100%，后两项必须保留百分号，可以输入普通小数。360° 与 0° 等价；不接受负数色相、角度单位、透明度、科学计数法、颜色名称或 CSS 变量。颜色文本最多 120 个字符。

颜色精度与使用范围

工具统一以 8 位 RGB 作为颜色基础。HSL 输入先转换为 RGB，并将每个通道四舍五入到最接近的整数，再由该 RGB 计算 HEX 和 HSL。因此，HSL 输入的小数可能在结果中变化，重复转换也可能出现微小差异。HSL 输出最多保留两位小数；灰色的饱和度为 0，色相统一显示为 0°。

色块预览用于观察网页颜色，显示效果受到屏幕、浏览器和色彩管理影响。本工具不处理 ICC 色彩配置、CMYK、广色域、透明度或对比度达标判断。需要处理图片可使用图片压缩工具，需要将内容用于网页文本可使用 HTML 实体编码解码工具。

颜色转换常见问答

为什么不接受 red 或 rgba()？

本工具限定为不透明的 HEX、RGB 和 HSL 数值格式，避免把颜色名称、透明通道和数值转换混在一起。请先输入对应的三通道颜色值。

为什么 HSL 转换后不完全等于原输入？

输出基于取整后的 8 位 RGB，再将 HSL 保留两位小数。该过程会发生量化，尤其是精细小数颜色，结果不保证逐字符还原原输入。

可以直接复制到 CSS 中使用吗？

可以。HEX、RGB 和 HSL 输出都是常见 CSS 颜色写法，可用于 color、background-color 等支持颜色的属性；使用时仍需根据页面的可读性和显示效果调整配色。