白色背景4.69:1
4.69
白色背景上的对比度
元素AAAAA小文本大文本UI 元素
在线颜色选择器
在色板中选择任意颜色或粘贴代码，复制其 HEX、RGB、HSL 或 OKLCH 值。还有阴影色、色调、配色，以及从屏幕取色的吸管工具。
颜色转换
以十种格式查看此颜色代码，可直接复制。
色彩和谐
色彩和谐是根据颜色在色轮上的位置组合出的协调配色方案。 了解更多色彩和谐
类似色
类似色和谐使用色轮上相邻的三种颜色，通常搭配自然，感觉平静舒适。
互补色
互补色和谐使用色轮上相对的两种颜色，对比强烈、视觉鲜明。
分裂互补
分裂互补使用基色及其互补色两侧相邻的两种颜色，有对比但张力更小。
三等分
三等分配色使用色轮上等距的三种颜色，活泼又相对平衡。
四等分
四色（矩形）和谐使用两对互补色，层次丰富、变化多。
正方形
正方形和谐与四色类似，但四种颜色在色轮上均匀分布。
复合
复合和谐将类似色与分裂互补色结合，形成丰富而平衡的调色板。
色调
色调共享相同色相但饱和度不同，创建一致且多功能的调色板。
单色
单色和谐使用同一色相的不同亮度和饱和度，效果非常优雅。
自定义
五种颜色均匀分布在色轮上的自定义排列。
色彩变化
查看此颜色的阴影、浅色、色调、色相与冷暖温度变化。
阴影
阴影是通过向基色加入黑色、提高暗度得到的。阴影通常更深、更有戏剧感。
浅色
浅色是通过向基色加入白色、提高明度得到的。浅色通常更偏粉彩、更柔和。
色调
色调是通过向基色加入灰色、降低饱和度得到的。色调通常更成熟、更复杂。
色相
色相是色轮上从红到紫的基本色彩家族。这里展示的是基色附近的色相变化。
温度
颜色常按冷暖感知划分：绿与蓝偏冷，红与黄偏暖。
色盲模拟器
查看色觉障碍者如何感知此颜色，让你的配色对所有人都可访问。 了解更多色觉障碍
红色盲
88% 相似
男性 1.3%，女性 0.02%
绿色盲
86% 相似
男性 1.2%，女性 0.01%
蓝色盲
85% 相似
男性 0.001%，女性 0.03%
全色盲
76% 相似
占总人口 0.003%
对比度检查器
检查此颜色在白色和黑色背景上的对比度。 如需更多选项，请使用完整对比度检查器
黑色背景4.48:1
4.48
黑色背景上的对比度
元素AAAAA小文本大文本UI 元素
相似颜色
查找与此颜色视觉接近的 CSS 命名色。
如何选择和转换颜色
颜色选择器有三种方式找到准确的颜色：点击饱和度和亮度面板、在下方色条上拖动色相，或输入你已知的 Hex、RGB、HSL 或 OKLCH 代码。
与通过转动色轮探索配色的色轮不同，这个工具适合你心中已有具体颜色、需要它的准确代码，或要把它转换成其他格式（用于 CSS、印刷或其他用途）的情况。
如何使用颜色选择器
1. 选择色相
拖动色条上的滑块选择色相：红、黄、绿、蓝……这是色轮从 0° 到 360° 的完整一圈。
2. 调整饱和度和亮度
在大面板中，把点向右移动颜色更鲜艳，向上移动颜色更明亮。最底部始终是黑色。
3. 复制代码
选择格式（HEX、RGB、HSL 或 OKLCH），一键复制。如果你已有代码，把它粘贴到上方输入框，选择器会定位到该颜色。
应该使用哪种颜色格式
这是 #2C71DE 在最常见格式下的写法，以及每种格式的用途。
| 格式 | 值 | 用途 |
|---|---|---|
| HEX | #2C71DE | CSS、HTML 以及 Figma 等设计工具中的标准：六位十六进制数字。 |
| RGB | rgb(44, 113, 222) | 红、绿、蓝，取值 0 到 255。适合在代码中使用，以及需要透明度时。 |
| HSL | hsl(217, 73%, 52%) | 色相、饱和度和亮度。最方便用来制作颜色更浅或更深的变体。 |
| HSV / HSB | hsv(217 80 87) | 色相、饱和度和明度（也称 HSB）。这是选择器面板和许多设计软件使用的模型。 |
| OKLCH | oklch(0.5663 0.1805 259.49) | 现代 CSS 格式：亮度感知均匀，非常适合色阶和色彩系统。 |
| CMYK | C80 M49 Y0 K13 | 用于印刷的青、品红、黄、黑。这是近似转换，请与印刷厂确认。 |
从屏幕上获取任意颜色
使用吸管，你可以捕捉任何已打开内容的准确颜色：网页、截图、文档……点击吸管图标，再点击想要的位置，选择器会立即给出代码。
适用于 Chrome、Edge 以及其他基于 Chromium 的桌面浏览器。如果颜色在照片中，请上传到图片取色器并提取完整调色板。
打开图片取色器超过 1600 万种颜色
这个数字听起来夸张，但现代显示器可以呈现 16,777,216 种不同颜色。
因为 RGB 系统使用三个颜色通道：
- 红 (Red)
- 绿 (Green)
- 蓝 (Blue)
每个通道的取值范围是 0 到 255。
组合这三个值正好得到：
256 × 256 × 256 = 16,777,216 种颜色。
即使其中许多看起来很接近，这一巨大范围也能让你找到所需的精确色调，无论项目是什么，精度都极高。
因此，优秀的取色器会成为不可或缺的工具。
常见问题
它是一个可视化选色工具，通过饱和度和亮度面板以及色相条选择颜色，并获得 HEX、RGB、HSL 等格式的准确代码，用于设计或代码。
它是在井号后用六位十六进制数字表示颜色的写法：红、绿、蓝各两位。例如 #2C71DE。
在选择器中输入 Hex。转换表会自动显示可复制的 RGB、HSL、HSV、OKLCH 和 CMYK。
HSL 使用亮度（与白色或黑色的混合程度），HSB（也称 HSV）使用明度（值）。两者都从色相和饱和度出发，但第三个轴的计算方式不同，因此同一颜色在不同模型中数值可能不同。
OKLCH 是一种感知色彩空间：L（亮度）、C（彩度）和 H（色相）符合我们实际看到颜色的方式。RGB 描述屏幕的光（红、绿、蓝），HSL 以更直观的方式重新组织同一模型，但两者都不能保证亮度相同的两种颜色看起来一样亮。OKLCH 可以保证，因此能创建更均匀的调色板和更自然的渐变。
CMYK（青、品红、黄、黑）是印刷模型：在纸上混合油墨。显示器使用的是光，也就是 RGB。选择器显示 CMYK 代码，是为了你需要准备印刷品或可直接印刷的 PDF 时使用。在屏幕上，正确的格式仍然是 RGB、Hex、HSL 或 OKLCH。
使用选择器的吸管捕捉屏幕上的任意像素（桌面版 Chrome 和 Edge）。如果颜色在照片里，请上传到图片取色器。