颜色选择 / 格式转换 / 对比度检查

Name: 颜色选择 / 格式转换 / 对比度检查
Author: PTBox

在线颜色选择器，支持 HEX / RGB / HSL / HSV / CSS 命名色 / Tailwind 任意值多种格式互转，点击即可复制。带屏幕取色器（Chrome/Edge 95+ 的 EyeDropper API）、明暗梯度、Alpha 透明度、WCAG 对比度（AA/AAA）检查。所有计算在浏览器本地完成。

原生选色器

输入颜色（HEX / RGB / HSL / 名称）

透明度 (Alpha) · 100%

明度调整（点击取该色）

左侧为变亮（+40% / +30% / +20% / +10%），中间为当前色，右侧为变暗（-10% / -20% / -30% / -40%）。

对比度 (WCAG)

白底4.47 : 1AA Large

PTBox · 颜色对比示例

黑底4.70 : 1AA 合格

PTBox · 颜色对比示例

AA ≥ 4.5（普通文本）/ ≥ 3.0（大号文本）；AAA ≥ 7.0（普通） / ≥ 4.5（大号）。

使用说明

在线选色、多格式互转、WCAG 对比度检查。支持原生选色器、屏幕取色器（Chrome/Edge 95+ EyeDropper API）、文本输入（HEX / RGB / HSL / 命名色）。

导出 HEX (6/8 位) / RGB(A) / HSL(A) / HSV / CSS 变量 / Tailwind 任意值。对比度按 WCAG 2.1 公式，AA ≥ 4.5（普通文本）/ AAA ≥ 7.0。

典型使用场景

网页 / UI 配色

从设计图取色，导出 HEX / RGB / HSL 多种格式直接粘贴到代码。

WCAG 可访问性检查

确认文字 / 背景对比度达 AA（4.5）或 AAA（7.0）标准。

主题色定义

导出 CSS 变量或 Tailwind 任意值语法。

从屏幕取色

用 EyeDropper 直接吸取屏幕上任意像素的颜色。

常见问题

屏幕取色器为什么不能用？

EyeDropper API 仅 Chrome / Edge 95+ 支持。Firefox、Safari 暂未实现，请用其他方式（如截图后取色）。

WCAG AA / AAA 是什么？

Web 可访问性指南。AA 要求对比度 ≥ 4.5（普通文本）或 3（大文本）；AAA 更严格，≥ 7 / 4.5。

怎么导出带透明度的颜色？

启用 Alpha 通道后会输出 #RRGGBBAA（8 位 HEX）或 rgba(...) 格式。

Tailwind 任意值是啥？

Tailwind v3+ 支持 bg-[#3b82f6] 这种内嵌任意值的语法，本工具一键输出此格式。