在线取色器与对比度检测
从色轮、屏幕或图片中选取颜色，一键复制 HEX、RGB、HSL、CMYK 或 OKLCH 代码。还可以检查这个颜色的文字是否清晰易读，并生成深浅色阶和配色方案。
免费 · 无需注册
使用方法
- 用颜色选择器选色，输入或粘贴代码，或打开图片并点按想要的颜色。
- 用色相、饱和度、亮度和不透明度滑块进行微调。
- 复制需要的代码：HEX、RGB、HSL、HSV、CMYK 或 OKLCH。
- 选择背景颜色检测 WCAG 对比度；如果文字难以阅读，可使用推荐的颜色。
为什么使用这个工具
屏幕和图片取色
在支持的浏览器中可使用吸管工具，也可以打开照片或截图后点按像素取色。
支持常用格式
HEX、RGB、HSL、HSV、CMYK 和 OKLCH 均可一键复制，并显示最接近的 CSS 颜色名称。
WCAG 对比度检测
显示对比度，以及普通文字、大号文字、图标和边框的 AA、AAA 结果。
自动推荐修正
如果文字未通过，工具会找到最接近的、能够通过的更深或更浅颜色。
色阶与配色方案
各九级浅色和深色，以及互补、邻近、三角和四方配色。
免费且保护隐私
图片在浏览器中读取，绝不会上传。无需注册，不限次数。
常见颜色代码说明
同一个颜色可以有多种写法。下面是本页示例蓝色 #3366CC 在工具支持的各种格式下的写法：
| 格式 | 示例 | 常见用途 |
|---|---|---|
| HEX（十六进制） | #3366CC | 网页设计和 CSS、品牌规范 |
| RGB | rgb(51 102 204) | 屏幕显示、CSS 和大多数设计软件 |
| HSL | hsl(220 60% 50%) | 在 CSS 中手动调整亮度或饱和度 |
| HSV（HSB） | hsv(220, 75%, 80%) | Photoshop、Figma 等软件的取色器 |
| CMYK | cmyk(75%, 50%, 0%, 20%) | 印刷用的大致参考值 |
| OKLCH | oklch(53.2% 0.168 262.3) | 现代 CSS，亮度均匀的配色 |
如何把 HEX 转换为 RGB
HEX 代码由三组两位十六进制数字组成，分别代表红、绿、蓝。每组的范围是 00 到 FF，即十进制的 0 到 255。换算方法是用第一位乘以 16 再加上第二位，其中 A 到 F 代表 10 到 15：
- 红：33 = 3 × 16 + 3 = 51
- 绿：66 = 6 × 16 + 6 = 102
- 蓝：CC = 12 × 16 + 12 = 204
- 所以 #3366CC 就是 rgb(51 102 204)。#36C 这样的三位简写会把每一位重复一次，表示同一个颜色。#3366CC80 这样的八位代码还包含透明度：rgb(51 102 204 / 0.5)。
WCAG 对比度要求
《Web 内容无障碍指南》（WCAG）用 1:1（没有对比）到 21:1（白底黑字）之间的比值衡量对比度，计算公式为 (L1 + 0.05) ÷ (L2 + 0.05)，其中 L1 和 L2 分别是较亮和较暗颜色的相对亮度。最低要求如下：
| 级别 | 普通文字 | 大号文字 | 图标和输入框边框 |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
常用颜色在白底和黑底上的对比度
很多常用颜色其实没有看上去那么清晰。以下是把它们用作文字时，在白色和黑色背景上的结果：
| 颜色 | 白色背景 | 黑色背景 |
|---|---|---|
| 红色 #FF0000 | 3.99:1（不符合 AA） | 5.25:1（符合 AA） |
| 橙色 #FFA500 | 1.97:1（不符合 AA） | 10.63:1（符合 AA） |
| 绿色 #008000 | 5.13:1（符合 AA） | 4.08:1（不符合 AA） |
| 蓝色 #0000FF | 8.59:1（符合 AA） | 2.44:1（不符合 AA） |
| 灰色 #767676 | 4.54:1（符合 AA） | 4.62:1（符合 AA） |
| 灰色 #777777 | 4.47:1（不符合 AA） | 4.68:1（符合 AA） |
| 蓝色（示例） #3366CC | 5.36:1（符合 AA） | 3.91:1（不符合 AA） |
从图片或屏幕取色
想知道标志、照片或截图中某个颜色的代码，选择“从图片取色”，然后点按目标位置即可。图片只在浏览器中绘制，不会上传。
- 细小的地方请先放大，因为文字边缘的像素常常是两种颜色的混合。
- 照片有噪点和阴影，可以多点几个相邻位置，对比得到的代码。
- “从屏幕取色”使用浏览器的吸管功能，部分浏览器（包括大多数手机浏览器）不提供这个功能。如果看不到这个按钮，可以先截图，再用“从图片取色”打开。
常见问题
怎样获取图片中某个颜色的 HEX 代码？
选择“从图片取色”，打开照片或截图后点按该颜色，HEX、RGB 等代码会立即显示，并可一键复制。图片不会离开你的设备。
文字需要多大的对比度？
WCAG 的 AA 级要求普通文字至少 4.5:1，大号文字（约 24 px，或粗体约 18.7 px）至少 3:1，图标和输入框边框至少 3:1。AAA 级把文字要求提高到 7:1 和 4.5:1。
HEX 和 RGB 是同一个颜色吗？
是的，它们只是红、绿、蓝数值的两种写法。#3366CC 和 rgb(51 102 204) 是完全相同的颜色，可以按软件或代码的要求选用。
中国有网页无障碍的国家标准吗？
有。GB/T 37668-2019《信息技术 互联网内容无障碍可访问性技术要求与测试方法》参考了 WCAG 2.0 和 2.1，于 2020 年 3 月起作为推荐性国家标准实施。按照 WCAG，普通文字的对比度应至少达到 4.5:1。
为什么 CMYK 颜色印出来不一样？
屏幕用光混色（RGB），印刷用油墨混色（CMYK），屏幕上一些鲜艳的颜色无法印出来。本工具使用不带色彩配置文件的简单公式换算，准确数值请向印刷厂确认。
OKLCH 是什么？
OKLCH 用亮度、彩度和色相来描述颜色，其标尺更接近人眼的感知。OKLCH 亮度相同的颜色看起来明暗也大致相同，因此更容易做出均匀的配色。目前的主流浏览器都支持 CSS 中的 oklch()。
我的图片或颜色会被上传吗？
不会。所有处理都在浏览器中完成。本设备只会保存最近使用的颜色和背景颜色，你可以随时清除。
相关工具
想开发什么吗？
告诉我们你想构建什么。
告诉我们您需要构建什么：从简单的网站到完整应用、AI 解决方案、自动化或定制系统都可以。