什么是 颜色选择器？
取色器让你通过交互式颜色输入框直观地选择任意颜色，并即时查看它在所有主要颜色格式中的值：HEX(网页标准)、RGB(屏幕显示)、HSL(便于设计)和 CMYK(印刷)。色调条会显示自动生成的所选颜色的更浅与更深变体，无障碍面板则显示相对于白色和黑色背景的对比度。
颜色格式转换是设计和开发中的一项常规工作。设计师为屏幕使用 HEX 和 HSL；印刷设计师需要 CMYK；CSS 开发者使用 RGB 进行不透明度操作；后端系统可能将颜色存储为整数或 HSL 字符串。我们的工具同时提供所有格式，免去了使用单独计算器的需要。
无障碍数据——相对于白色和黑色的对比度——在选色当下即提供即时的 WCAG 合规信息。在选色时检查无障碍性，可避免违规问题在开发后期才被发现，那时修复成本更高。
使用场景
以下是人们每天使用 颜色选择器 的最常见场景。
品牌色格式转换
品牌规范为印刷指定了 CMYK 主色。你需要网站用的 HEX 代码和数字广告用的 RGB。直观地输入颜色，同时获得所有格式，以在所有媒介上保持一致的呈现。
设计系统的色调生成
设计系统需要一组色调范围：主色的背景、边框、弱化文本、正文文本和标题变体。色调条会在整个明度范围内显示更浅与更深的变体。点击任意色调即可复制其 hex 代码，用于 CSS 变量或设计令牌。
无障碍预检查
在你选择文本和 UI 元素颜色时，对比度显示会立即表明该颜色是否相对于你的背景达到所需的 WCAG AA 4.5:1 比值。在选色过程中检查比事后用单独工具检查更快。
CSS 开发
在实现设计时，复制 HEX 用于标准 CSS 颜色属性，RGB 用于带不透明度的 rgba()，HSL 用于程序化调整。三者同时提供，无需手动转换。
设计系统的颜色令牌管理
设计系统定义令牌调色板：--color-primary-500、--color-primary-600、--color-neutral-100 等。取色器为任意基础色生成色调条，提供定义浅色、默认、深色和悬停变体所需的完整色调范围。把每个色调的 HEX 值直接复制到你的设计令牌文件或 Figma 样式面板中。这能确保令牌调色板在数学上保持一致——各色调由同一基础色相以可预测的明度步长生成。
在选色时预检查无障碍性
对比度显示会立即表明所选颜色相对于白色或黑色背景是否达到所需的 WCAG AA 4.5:1 比值。在选色过程中检查——在确定某个设计方向之前——远比在设计交付后或开发期间才发现无障碍失败更快、更省钱。尤其对于文本颜色，一边选择前景色一边观察对比度实时更新，可避免无障碍违规从一开始就被固化进设计中。
示例
主蓝色转换
把一个主蓝色转换为所有格式值，以用于网页和印刷。
#0070F3 HEX：#0070F3 | RGB：rgb(0, 112, 243) | HSL：hsl(211, 100%, 48%) | CMYK：cmyk(100%, 54%, 0%, 5%) 为品牌色生成色调范围
查看品牌绿色的完整色调范围，用于设计系统令牌定义。
#16A34A(绿色) 色调：50 → #f0fdf4 | 100 → #dcfce7 | ... | 600 → #16a34a | ... | 900 → #14532d 用于程序化主题的 CSS HSL 颜色
复制 HSL 值，构建一个支持简便色调计算的 CSS 自定义属性。
#7C3AED(紫罗兰) HSL：hsl(263, 70%, 58%)——设为 --color-primary-h: 263; --color-primary-s: 70%; --color-primary-l: 58%; 颜色选择器 对比 Figma 取色器
我们的独立取色器与 Figma 内置取色工具针对开发者和设计师的对比。
| 功能 | Toolorah | Figma 取色器 |
|---|---|---|
| HEX、RGB、HSL 显示 | 同时显示全部 | 一次一种格式 |
| CMYK 转换 | 是 | 否 |
| 色调/明暗范围生成 | 是——自动色调条 | 需手动配合样式 |
| WCAG 对比度 | 是——相对白色和黑色 | 需要单独的插件 |
| 屏幕滴管 | 通过操作系统取色器 | 是——内置 |
| 无需 Figma 账户即可使用 | 是 | 需要账户 |
| 复制可直接用于 CSS 的值 | 是——按 CSS 格式 | 是 |
颜色选择器 使用技巧
- HSL 最适合程序化颜色调整：改变 L 以获得更浅/更深的色调，改变 S 以获得弱化/鲜艳的颜色，改变 H 以获得相关色相。
- 屏幕 RGB 颜色可能比其 CMYK 印刷等效色显得更鲜艳——CMYK 色域比 sRGB 小。
- 点击时浏览器取色器会激活操作系统的取色器——在 macOS 上，这包含一个可吸取屏幕任意颜色的滴管。
- 带重复字符对的 HEX 颜色在 CSS 中可缩写：#AABBCC → #ABC。
- 正常文本需要 4.5:1 的对比度(WCAG AA)。大号文本(18pt 及以上)仅需 3:1。
常见问题解答
RGB 和 HSL 有什么区别？
RGB 把颜色定义为红、绿、蓝三个光通道的强度——与屏幕在物理上产生颜色的方式一致，但与人类直观感知颜色关系的方式不一致。HSL(色相、饱和度、明度)更贴近人类的颜色直觉：色相围绕色轮旋转(0°=红、120°=绿、240°=蓝)，饱和度控制颜色从灰到全色的强度，明度控制从黑到白的亮度。在 HSL 中创建一种颜色更浅或更深的变体意味着调整 L；在 RGB 中则需要重新计算全部三个通道。
我如何把 HEX 转换为 RGB？
HEX 颜色是表示红、绿、蓝的三对十六进制数字：#RRGGBB。把每一对从十六进制转换为十进制。#0070F3 → R：00 = 0，G：70 = 112，B：F3 = 243 → rgb(0, 112, 243)。反向转换：把每个十进制数表示为两位十六进制数字(0-255 对应 00-FF)。大多数开发者使用工具来做这件事，而不是手动计算。我们的取色器同时显示所有转换。
为什么 CMYK 值是屏幕颜色的近似值？
RGB 是加色(光)：红 + 绿 + 蓝全开 = 白色。CMYK 是减色(墨)：青 + 品红 + 黄 + 黑全开 = 近黑色。这两种模型有不同的色域——它们所能表示的颜色范围。许多鲜艳的 RGB 屏幕颜色在 CMYK 色域之外，无法在印刷中精确再现。由 RGB 转换而来的 CMYK 值是可达到的最接近的印刷近似值。对于品牌关键色，请与印刷生产专家合作，确保 CMYK 值在你特定的纸张和印刷机上能可接受地再现。
什么是 CSS 命名颜色？
CSS 支持 147 种命名颜色，从「aliceblue」到「yellowgreen」，定义在 CSS Color 规范中。它们映射到 HEX 值：「cornflowerblue」是 #6495ED，「tomato」是 #FF6347。命名颜色因其在 CSS 中的可读性而方便，并受所有浏览器支持。我们的取色器显示 HEX 值——如果你所选颜色存在对应的命名颜色，你可以在 CSS 中使用 HEX 或等效的命名颜色。
我如何从屏幕上吸取颜色？
点击我们工具中的颜色输入框会激活操作系统的原生取色器。在 macOS Ventura 及更高版本中，这包含一个放大镜滴管工具，可吸取屏幕上的任意像素。在 Windows 11 中，某些应用的取色器包含滴管。要在 Chrome 和 Edge 中使用基于浏览器的滴管，可使用 EyeDropper Web API(window.EyeDropper)。对于跨平台取色，macOS 的数码测色计应用和 Windows PowerToys 取色器是可靠的独立工具。
什么是色域，它为何对设计重要？
色域是设备能显示或介质能再现的颜色范围。sRGB 是大多数显示器和网页的标准色域——它覆盖约 35% 的可见颜色。Display P3(用于现代 Apple 及许多其他显示器)覆盖约 50% 的可见颜色，能呈现更鲜艳的绿、红和青。印刷的 CMYK 覆盖另一个子集，缺少许多饱和的蓝和绿。以 sRGB 设计能确保你的颜色在各设备上看起来一致。如果你以 P3 设计而用户在 sRGB 显示器上观看，颜色会比预期显得不那么鲜艳。
sRGB 和 Display P3 有什么区别？
sRGB 是网页的标准色彩空间，于 1996 年为消费级显示器定义。Display P3 是一个更宽的色彩空间，最初为数字电影设计，如今用于 Apple 显示器、三星 OLED 屏幕和现代手机。P3 的色彩体积比 sRGB 大约多 25%，绿色和红色明显更宽。CSS Color Level 4 用 color(display-p3 r g b) 语法支持 P3 颜色。对于网页设计，sRGB 仍是安全的默认选择。仅在你确知受众拥有支持 P3 的显示器、并已为仅支持 sRGB 的屏幕测试过回退方案的体验中，才使用 P3 颜色。