Color Picker & Converter

颜色选择器与转换器

可视化取色或直接粘贴任意数值 — HEX、RGB、HSL、OKLCH 与 OKLAB 实时同步。内置 WCAG 2.2 对比度检查器与基于 OKLCH 的调色板生成器,完全在浏览器中运行。

颜色选择器与转换器 — TL;DR

可视化取色或直接粘贴任意数值 — HEX、RGB、HSL、OKLCH 与 OKLAB 实时同步。内置 WCAG 2.2 对比度检查器与基于 OKLCH 的调色板生成器,完全在浏览器中运行。

把你的色值(如 #ff5722)粘贴到 HEX 输入框,RGB 那一行就会即时更新。同样地,把 rgb(255 87 34) 粘贴到 RGB 输入框,HEX、HSL、OKLCH、OKLAB 都会同步。每种支持的格式都可以双向转换。

OKLCH 是 CSS Color Module Level 4 引入的色彩空间,使用感知亮度(L)、彩度(C)、色相(h)表示 — 结构类似 HSL,但是「感知均匀」的。两个 OKLCH 颜色只要 L 值相同,即使色相不同,看起来明度也一样。这让设计 token、自动生成的调色板、无障碍色阶都远比 HSL 更可预测。所有现代浏览器(Chrome 111+、Safari 15.4+、Firefox 113+)都已支持。

颜色数据永远不会离开你的设备。打开 DevTools → Network,你会看到无论是转换、取色、生成调色板还是检查对比度,都没有任何对外请求。

HEX
RGB
HSL
OKLCH
OKLAB
色名

调色板

WCAG 2.2 对比度检查

文字颜色
背景颜色
—
预览
大标题示例文字
正文示例 — 敏捷的棕色狐狸跳过了懒惰的狗。

为真实工作流而设计

从设计系统到无障碍审计 — 你需要的所有色彩格式与检查,一站搞定。

支持六种色彩空间

在 HEX(3 / 4 / 6 / 8 位)、RGB(A)、HSL(A)、OKLCH、OKLAB 与 CSS 命名色之间双向转换。输出字符串符合 CSS Color Module Level 4 语法,可直接粘贴进你的样式表。

WCAG 2.2 对比度检查器

立即显示任意两种颜色之间的对比度,并提供 AA(4.5 : 1)与 AAA(7 : 1)在正常与大字尺寸下的通过 / 不通过徽章。算法符合 W3C 标准:sRGB 线性化 → 相对亮度 →(L1+0.05)/(L2+0.05)。

取色器 — 从屏幕任意像素取色

点击取色器即可从屏幕任何像素取色:其他标签页、截图、照片、图标都可以。Chromium 浏览器使用原生 EyeDropper API。

基于 OKLCH 的调色板

自动生成 9 阶明暗色阶,以及互补色、三角色、类似色配色组合 — 全部基于 OKLCH 计算,确保每一阶在感知上明度均匀(不像 HSL 那样忽明忽暗)。

隐私优先设计

所有转换都在你的设备上以 JavaScript 运行,不上传、不记录、不发送给任何第三方。你可以打开 DevTools → Network 自行验证。

极致快速

纯 JavaScript,无框架运行时。冷启动 gzip 后不到 50 KB,颜色转换与调色板生成在五年前的笔记本上也能在 1 毫秒内完成。

如何使用颜色选择器

四种开始方式,所有格式同步更新。

  1. 1

    可视化取色

    在饱和度 / 明度方块内拖动来选择明暗,下方色相滑块改变主色调,再用透明度滑块调整 alpha。右侧每个格式都会即时更新。

  2. 2

    粘贴任意数值

    把 HEX(#4f46e5)、RGB(rgb(79 70 229))、HSL(hsl(244 76% 59%))、OKLCH(oklch(53% 0.22 277))甚至 CSS 命名色(tomato)粘贴到对应输入框 — 选色器与其他格式都会同步。

  3. 3

    用取色器采样

    点击取色器按钮,可从屏幕上任何像素取色 — 其他标签页、截图、照片、图标都可以。Chrome、Edge、Opera 使用原生 EyeDropper API。

  4. 4

    复制或检查对比度

    点击任一格式旁的复制图标,即可发送到剪贴板。或滚动到下方 WCAG 2.2 对比度检查区,确认你的文字 / 背景组合在正常与大字尺寸下能否通过 AA 或 AAA。

为设计师、开发者与无障碍审计人员打造

色彩工具,完美适配四种常见工作场景。

设计系统 token 编写

把品牌 HEX 转成 OKLCH,让 token 色阶上每一阶都有相同的感知亮度间距。OKLCH 输出可直接粘贴进 CSS,无需预处理器。

WCAG 无障碍审计

输入文字 / 背景组合,立即看到对比度与 AA / AAA 徽章。在上线前发现不合格的配色 — 满足 W3C 规定的 4.5 : 1 正常 / 7 : 1 增强阈值。

前端 CSS 颜色转换

设计稿给的是 HEX,但 Tailwind 配置要 HSL、现代样式表要 OKLCH?粘贴一次,任意格式都能复制。输出字符串是合法的 CSS Color Module Level 4 语法。

调色板探索

选定一个基础色,即时查看九阶感知均匀的明暗色阶,以及互补色、三角色、类似色配色 — 全部基于 OKLCH 计算,每一阶看起来都同样明亮。

100% 私密 — 在浏览器中运行

颜色数据永远不会离开你的设备。打开 DevTools → Network,你会看到无论是转换、取色、生成调色板还是检查对比度,都没有任何对外请求。

  • 所有转换(HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB)都在你的机器上以 JavaScript 运行 — 公式可在页面源代码中查看。
  • EyeDropper API 只会返回你主动点击的那一个颜色,浏览器负责管理权限,不会让网页读取任何其他像素。
  • 无需登录、不对颜色数据埋点、无第三方色彩 API。网站开箱即合规 GDPR。

相关教程

为设计师、开发者与无障碍团队精选的实用教程。

常见问题

如何把 HEX 转成 RGB?

把你的色值(如 #ff5722)粘贴到 HEX 输入框,RGB 那一行就会即时更新。同样地,把 rgb(255 87 34) 粘贴到 RGB 输入框,HEX、HSL、OKLCH、OKLAB 都会同步。每种支持的格式都可以双向转换。

OKLCH 是什么?为什么要用它?

OKLCH 是 CSS Color Module Level 4 引入的色彩空间,使用感知亮度(L)、彩度(C)、色相(h)表示 — 结构类似 HSL,但是「感知均匀」的。两个 OKLCH 颜色只要 L 值相同,即使色相不同,看起来明度也一样。这让设计 token、自动生成的调色板、无障碍色阶都远比 HSL 更可预测。所有现代浏览器(Chrome 111+、Safari 15.4+、Firefox 113+)都已支持。

WCAG 对比度结果可信吗?

可信。算法依据 WCAG 2.2 §1.4.3:先把 sRGB 各通道线性化,再计算相对亮度(0.2126·R + 0.7152·G + 0.0722·B),最后 (较亮 + 0.05) / (较暗 + 0.05)。正常文本 AA 为 4.5 : 1、大字(18pt 以上或 14pt 粗体以上)为 3 : 1;AAA 则分别是 7 : 1 与 4.5 : 1。

可以从图片或其他应用程序取色吗?

可以 — 点击取色器按钮即可调用浏览器内置的 EyeDropper API。你可以从屏幕上任意位置取色:其他标签页、Figma 设计稿、视频画面、截图都可以。Chrome、Edge、Opera 已支持;Firefox 与 Safari 会自动降级处理(按钮禁用)。

数据会发送到服务器吗?

完全不会。选色器、所有格式转换、调色板生成、对比度检查全部都在你的浏览器中进行,任何颜色数值、图像采样或文本都不会传出。可以打开 DevTools → Network 验证,使用过程中没有任何对外请求。