取色器
检查 WCAG 对比度、创建 CSS 渐变并生成调色板。
只是想选个颜色或转换 HEX ↔ RGB ↔ HSL（带吸管）? 请用 HEX RGB 转换器。
示例
对比度检查
输入
#F5F5F5 上的 #1A1A1A
输出
≈ 16:1 —— 通过 AA & AAA
CSS 渐变
输入
#3B82F6 → #9333EA, 90°
输出
background: linear-gradient(90deg, #3B82F6, #9333EA);
调色板
输入
#3B82F6
输出
明暗 + 补色、类似色、三色调
关于此工具
这个免费在线颜色工作室把三样必备功能合到一起：带 AA/AAA 通过-不通过和实时文字预览的 WCAG 对比度检查器；提供可复制声明的 CSS 渐变生成器；用于明暗、补色、类似色和三色调的调色板生成器。每个标签页都内置取色器，一切都在你的浏览器中运行，不上传。纯粹的 HEX ↔ RGB ↔ HSL 转换和屏幕吸管请用 {link}。
使用方法
- 对比度：设置文字和背景颜色以检查 WCAG 无障碍性。
- 渐变：选两种颜色和一个角度，然后复制 CSS。
- 调色板：输入一个基准色，点击任意色块即可复制。
适合谁
检查无障碍合规、构建 CSS 背景、创建协调调色板的设计师和开发者 —— 无需在多个工具之间来回切换。
常见问题
这个颜色工具能做什么?
一处三件事：检查两种颜色的 WCAG 对比度、构建 CSS 渐变、从基准色生成明暗和配色调色板。每个标签页都内置取色器。
免费吗?
免费 —— 无需注册，完全免费，一切都在你的浏览器中运行，不上传。
对比度检查器如何工作?
输入文字颜色和背景颜色，它会显示 WCAG 对比度以及普通和大字体各自的 AA、AAA 通过/不通过，并附带实时预览。
我需要多大的对比度?
WCAG AA 对普通文字至少需要 4.5:1，大字体需要 3:1；AAA 分别需要 7:1 和 4.5:1。检查器会为你标出每个等级。
我可以复制 CSS 渐变和调色板颜色吗?
可以。渐变标签页提供可直接复制的 background: 声明，每个调色板色块点击即可复制其 hex。
在哪里选颜色或转换 HEX/RGB/HSL?
使用专门的 HEX RGB 转换器 —— 它可选色（Chrome/Edge 上的屏幕吸管）并显示 HEX、RGB 和 HSL。本工作室专注于你用颜色做的事：对比度、渐变和调色板。
我可以从网页或图片取色吗?
可以 —— 在 Chrome 和 Edge 上用 HEX RGB 转换器的吸管（及其书签工具）从屏幕任意位置取色，然后把 hex 带到这里。
相关工具