# 颜色转换 - HEX/RGB/HSL 在线互转与取色

> 免费在线颜色转换工具：HEX、RGB、HSL 互转，认得颜色名、8 位 HEX、rgba、oklch 等 CSS 写法，保留透明度，HSL 来回转换不变色，带取色器和预览，本地实时计算。

- 网址: https://qilingtools.com/zh/color
- 分类: 开发工具 (https://qilingtools.com/zh/dev)
- 标签: [格式转换](https://qilingtools.com/zh/tags/convert), [设计配色](https://qilingtools.com/zh/tags/design), [开发](https://qilingtools.com/zh/tags/dev), [前端网页](https://qilingtools.com/zh/tags/frontend)
- 最后更新: 2026-11-07
- 价格: 免费，无需注册
- 隐私: 在浏览器本地处理，文件不上传服务器

输入一个颜色，同时得到 HEX、RGB、HSL 三种写法，每一行都能单独复制，旁边有大色块预览和系统取色器。颜色交给浏览器自己解析，CSS 里能用的写法基本都认：#2563eb、省略 # 的 2563EB、带透明度的 #2563eb80、rgb(37 99 235 / 50%)、百分比和小数、hsl(210deg 50% 50%)、tomato 这类颜色名，以及新版 CSS 的 oklch、lab、color(display-p3 …)。超出范围的值按 CSS 规则截断，不会算出 #12c0000 这种无效结果。有透明度时输出 8 位 HEX、rgba 和 hsla，预览下面垫着棋盘格。HSL 会保留必要的小数，保证复制出去再填回来还是同一个颜色。全部在浏览器本地实时计算。

## 使用步骤

1. 输入或粘贴任意一种 CSS 颜色写法，也可以点右边的色块用系统取色器选色
2. 看预览色块确认颜色，半透明的颜色会透出下面的棋盘格
3. 点需要的那一行「复制」：HEX、RGB、HSL，带透明度时是 8 位 HEX、RGBA、HSLA

## 功能特点

- HEX、RGB、HSL 三种写法同时输出
- 认得颜色名、3/4/6/8 位 HEX、百分比、小数、deg/turn 角度、oklch、lab、display-p3
- 保留透明度，输出 8 位 HEX、rgba、hsla，预览带棋盘格
- HSL 自动保留必要的小数，来回转换不变色
- 超出范围的值按 CSS 规则截断，不会输出无效颜色
- 系统取色器、大色块预览，本地实时计算

## 常见问题

### 8 位 HEX 后两位是什么？透明度怎么换算？

#RRGGBBAA 的最后两位是不透明度，00 完全透明，FF 完全不透明，换算方法是「百分比 × 255 再转十六进制」。常用对照：10% = 1A，20% = 33，50% = 80，80% = CC，90% = E6。比如 #2563eb80 就是 rgba(37, 99, 235, 0.5)，#0000001a 是 10% 的黑色，常用来做阴影。4 位写法 #f00a 等于 #ff0000aa，透明度约 0.667。旧版 IE 不认 8 位 HEX，要兼容时用 rgba。

### HSL 为什么有小数？不能取整吗？

取整会让颜色变掉。#2563eb 的精确 HSL 约是 (221.21, 83.19%, 53.33%)，如果写成 hsl(221, 83%, 53%)，填回去得到的是 #2463eb，差了一点。本工具会挑尽量少的小数位，同时保证转回去还是原来的颜色：#2563eb 输出 hsl(221.2, 83.2%, 53.3%)，红色 #ff0000 仍是整数 hsl(0, 100%, 50%)。实测 300 个随机颜色转 HSL 再转回来，全部一致。

### 支持哪些写法？颜色名有多少个？

浏览器能画出来的颜色写法都认：十六进制（3、4、6、8 位，可省略 #）、rgb() 和 rgba()（逗号或空格分隔、数字或百分比、可带小数）、hsl() 和 hsla()（角度可以写 deg、turn，也可以是负数，比如 hsl(-30, 100%, 50%) 等于 #ff0080）、CSS 标准的 148 个颜色名（tomato 是 #ff6347，rebeccapurple 是 #663399），以及 oklch()、lab()、color(display-p3 …)。currentcolor、inherit 这类要看上下文的关键字没法换算，会提示无法识别。

### rgb(300, 0, 0) 这种超出范围的值会怎样？

按 CSS 的规则截断到 0～255，rgb(300, 0, 0) 就是 #ff0000，和浏览器实际显示的颜色一致。百分比同理，rgb(100%, 0%, 0%) 也是 #ff0000。所以输出的 HEX 一定是合法的 6 位或 8 位。

### oklch、display-p3 这类颜色转出来为什么变了？

HEX、RGB、HSL 只能表示 sRGB 色域，oklch 和 display-p3 能表示更鲜艳的颜色。色域内的颜色会准确换算，比如 oklch(0.6 0.2 260) 是 #2e79f5；超出 sRGB 的颜色只能映射到最接近的颜色，实测在 Chrome 里 oklch(0.7 0.4 150) 变成 #00d600，color(display-p3 1 0 0)（P3 屏幕上的纯红）变成 #ff0000。在支持广色域的屏幕上，原写法会比转换后的 HEX 更鲜艳。

### HSL 和设计软件里的 HSB/HSV 一样吗？

不一样，这是最常见的混淆。CSS 的 HSL 里 L 是亮度，纯色在 L = 50% 时最鲜艳，100% 是白色；Photoshop、Figma 拾色器里的 HSB（也叫 HSV）里 B 是明度，纯色在 B = 100%。同一个纯红，HSL 是 (0, 100%, 50%)，HSB 是 (0, 100%, 100%)。色相 H 两者相同，饱和度和亮度不能直接照抄。

### 取色器能吸屏幕上的颜色吗？

右边的色块是系统自带的颜色选择器，样式取决于操作系统：macOS 的颜色面板里有放大镜，可以吸取屏幕上任意位置的颜色；Windows 和手机上一般只能在色盘里选。选好的颜色会直接填进输入框。系统取色器不支持透明度，选出来的都是不透明的颜色。

### 文件会上传服务器吗？

不会。所有处理都在你的浏览器本地完成，没有任何网络上传，关闭页面即清除。

### 需要注册或付费吗？

不需要。本站完全免费，无需注册登录，没有次数限制。

## 相关工具

- [JSON 格式化](https://qilingtools.com/zh/json): 免费在线 JSON 格式化：一键美化、压缩，实时语法校验并定位到出错行列，支持树形视图折叠、键名排序、转义与去转义、Unicode 转中文、复制下载，数据不上传。
- [Base64 编解码](https://qilingtools.com/zh/base64): 免费在线 Base64 编码解码工具：文字、图片和任意文件转 Base64，Base64 还原成文字或文件；支持中文 UTF-8 和 GBK、Data URI、URL 安全写法，解出图片可预览下载，本地处理不上传。
- [URL 编解码](https://qilingtools.com/zh/url-encode): 免费在线 URL 编码解码工具：把中文、空格和特殊符号转成 %E4%BD%A0 这样的百分号编码，或者把乱码一样的链接还原成文字。支持单个参数和整条网址、UTF-8 和 GBK、+ 号表示空格，本地实时转换不上传。
- [JWT 解析](https://qilingtools.com/zh/jwt): 免费在线 JWT 解析工具：解码 Header 与 Payload，显示是否过期；填入密钥或公钥（PEM、JWK、JWKS）即可校验签名，本地处理不上传。
- [时间戳转换](https://qilingtools.com/zh/timestamp): 免费在线 Unix 时间戳转换工具：时间戳与日期互转，自动识别秒/毫秒，显示本地时间、UTC、ISO 8601 和相对时间，实时更新。
- [哈希计算](https://qilingtools.com/zh/hash): 免费在线哈希计算工具：对文本或文件一次算出 MD5、SHA-1、SHA-256、SHA-384、SHA-512，粘贴官网校验值自动比对，几 GB 的大文件分块计算，本地完成不上传。
- [UUID 生成](https://qilingtools.com/zh/uuid): 免费在线 UUID 生成器：用浏览器的加密安全随机数批量生成 UUID v4（GUID）或按时间排序的 v7，可大写、去连字符、加花括号，一次最多 100 个，一键复制，本地生成不联网。
- [进制转换](https://qilingtools.com/zh/base-convert): 免费在线进制转换工具：二进制、八进制、十进制、十六进制及任意 2–36 进制互转，自动识别 0x/0b/0o 前缀和空格、下划线分隔，超大整数不丢精度，本地实时计算。