在线取色器
选取任意颜色，即可获得所有常用格式的颜色代码，一键复制。生成搭配协调的配色方案，无需上传即可提取照片的主色调，还能检测文字与背景的颜色组合是否达到 WCAG 对比度要求。
取色器
各种格式的颜色代码
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK（近似值）80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
基于此颜色的配色方案
互补色
邻近色
三角配色
浅色调（混入白色）
深色调（混入黑色）
从图片提取配色
图片由你自己的浏览器读取，不会上传：像素在本设备的画布上采样，不会向任何地方发送。
将照片、截图或徽标拖放到此处
图片中的六种主色会显示在这里。点击色块即可载入取色器。
对比度检查器 (WCAG 2.1)
大号文字示例
The quick brown fox jumps over the lazy dog. 0123456789
- AA · 普通文字通过
- AAA · 普通文字通过
- AA · 大号文字通过
- AAA · 大号文字通过
大号文字指常规字重至少 18 pt（24 px）或粗体至少 14 pt（约 18.7 px）。AA 要求普通文字 4.5:1、大号文字 3:1；AAA 要求 7:1 和 4.5:1。
常用 CSS 命名颜色
所有浏览器都能识别的二十个关键字，附精确的 HEX、RGB 和 HSL 值。
| 名称 | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX、RGB、HSL 和 HSB 分别表示什么
本页的所有颜色都使用 sRGB，这是自 20 世纪 90 年代末浏览器采用以来网页的默认色彩空间。屏幕通过混合红、绿、蓝三种光来显示颜色，每个通道有 256 级（0–255），共可组合出 16,777,216 种颜色。RGB 直接写出这三个数值；HEX 则把同样的三个数值写成十六进制，每个通道两位，所以 #FF6600 表示红 255、绿 102、蓝 0。三位简写会把每一位重复一次：#F60 就是 #FF6600。
HSL 和 HSB（也叫 HSV）描述的是同样的颜色，但更便于手动调整。色相是色轮上的角度：0° 为红，120° 为绿，240° 为蓝。两者的区别在最后一个数值。在 HSL 中，亮度 100% 永远是白色，50% 才是该色相最纯的状态；在 HSB 中，明度 100% 是纯色相，要得到白色则需要饱和度为 0%。Photoshop、Figma 等设计软件的取色器使用 HSB，而 CSS 原生支持 hsl()，所以上面两种都列了出来。
为什么 CMYK 值只是近似值
屏幕是叠加光线，印刷则用青、品红、黄、黑四种油墨减去光线。两种系统能呈现的颜色范围（色域）并不相同。饱和度很高的屏幕颜色，比如明亮的 RGB 绿、电光蓝或荧光橙，超出了印刷油墨能还原的范围，所以印出来会比显示器上看到的暗淡。
这里的 CMYK 数值采用的是不带 ICC 配置文件的简单数学换算，用来大致沟通需求可以，但不适合直接上机印刷。印刷厂会按所用纸张和印刷机选择配置文件，例如欧洲的 FOGRA39 或美国的 GRACoL，同一个 RGB 颜色在不同配置文件下得到的油墨百分比也会不同。做印刷品时，请把 RGB 或 HEX 值连同印刷厂要求的配置文件一并提供。
对比度是如何计算的
WCAG 2.1 比较两种颜色的相对亮度：较亮颜色加 0.05，除以较暗颜色加 0.05。结果范围从 1:1（颜色相同）到 21:1（白底黑字）。AA 级要求普通文字至少达到 4.5:1，大号文字（18 磅或 14 磅粗体）达到 3:1；AAA 级则提高到 7:1 和 4.5:1。输入框边框、图标等界面组件，依据成功标准 1.4.11，与周围背景的对比度需要达到 3:1。
亮度计算中绿色的权重远高于蓝色，因为人眼对绿色最敏感。这就是为什么白底黄字很难达标，而白底深蓝字轻松通过，尽管两种颜色看起来都很饱和。标志和纯装饰性文字不受此规则约束。
如何从照片或 Logo 中提取配色
图片调色板通过浏览器的 canvas 读取文件，把长边缩小到最多 200 像素，再用 Paul Heckbert 于 1982 年提出的中位切分法对相近像素分组：沿跨度最大的通道不断分割颜色范围，直到得到六组，每组的平均值就是一个色板。透明像素会被忽略，所以透明背景上的标志得到的就是标志本身的颜色。
拿到颜色之后，扁平风格的标志往往更适合用矢量格式。图片转 SVG 会把它描摹成形状，并保留这些精确的颜色；如果你在设计频道头图，YouTube 横幅尺寸调整可以把作品调整到 2560 × 1440，并兼顾安全区域。
常见问题
- 为什么 CSS 的“green”比 RGB 取色器里的绿色更暗？
- 关键字 green 对应 #008000，是沿用自早期 16 色 HTML 调色板的中等绿色。饱和度最高的 #00FF00 叫作 lime。CSS 完整的颜色列表里还有类似的意外：gray（#808080）比 darkgray（#A9A9A9）更深。
- 提取配色时会上传我的图片吗？
- 不会。文件由浏览器打开，在内存中绘制到 canvas 上并在本地分析。不会发送包含图片的任何请求，关闭标签页后图片即被丢弃。
- 正文文字需要多大的对比度？
- 要达到 WCAG 2.1 的 AA 级至少需要 4.5:1，AAA 级需要 7:1。18 磅及以上或 14 磅粗体的标题，AA 级可以使用 3:1。很多设计系统会统一按 4.5:1 要求，让文字在较暗的屏幕和阳光下依然清晰可读。
- 可以使用带透明度的 8 位 HEX 代码吗？
- 可以，在 CSS 中支持。最后两位是 alpha 通道，所以 #2F6FED80 是同一种蓝色，不透明度约为 50%。这个取色器处理的是不透明颜色，因此显示六位数字；需要时请自行补上透明度的两位。
- CSS 有多少种命名颜色？
- CSS Color Module Level 4 定义了 148 个颜色关键字，其中包括 gray 和 grey 这类重复拼写。最新的是 rebeccapurple（#663399），于 2014 年加入，以纪念 CSS 作者 Eric Meyer 的女儿 Rebecca Meyer。