页面调色板
颜色按使用次数排序：背景、文字、边框和按钮。每种颜色都提供 HEX、RGB 和 HSL。
颜色
提取任意网站
Smart Design Inspector 按使用频率提取网站的调色板，提供可取任意像素的取色器，并显示每组文字与背景的 WCAG 对比度。
调色板、取色器和 WCAG 对比度：永久免费
颜色 · yourclient.example
- #FFFFFFrgb 255 255 255背景214
- #0B0B0Brgb 11 11 11文字188
- #2563EBrgb 37 99 235按钮46
- #E5E7EBrgb 229 231 235边框39
- #6B7280rgb 107 114 128文字27
- #16A34Argb 22 163 74强调色8
- Aa#0B0B0B / #FFFFFF19.68:1AAA
- Aa#FFFFFF / #2563EB5.17:1AA
- Aa#6B7280 / #FFFFFF4.83:1AA
- Aa#16A34A / #FFFFFF3.30:1仅限大号文字
- Aa#9CA3AF / #FFFFFF2.54:1不达标
01
你能得到什么
3 个工具取色器
获取任意位置的颜色，图片上的也可以。
WCAG 对比度
每段文字与其背景的对比度，标出达到的级别（AA 或 AAA），不达标的会给出提示。
Chrome 上最常用的取色器自 2024 年 5 月起就没有更新过。而这个取色器和字体、CSS、SEO 工具集成在同一个扩展里。
02
在本页直接试用
无需安装一个示例网站加上颜色面板，无需安装任何东西。你可以看到它的 HEX、RGB 和 HSL 调色板。鼠标悬停在文字上，或在列表中选择，即可看到它与背景的对比度以及达到的 WCAG 级别。
选择一个元素
Smart Design Inspector · 颜色h1.hero-title
- 文字
- —
- 背景
- —
- RGB
- —
- HSL
- —
- 对比度
- —
- 字号
- —
- AA
- —
- AAA
- —
页面调色板
—
示例网站 · 数值读取自本页
03
为什么对比度很重要
WCAG 2.2 · AA白底上的浅灰色文字在你的屏幕上也许看着不错，但在阳光下的手机上可能根本看不清。WCAG 规范要求普通文字的对比度至少为 4.5:1（AA 级）。扩展会标出每一段不达标的文字。
04
把调色板带进你的项目
Pro · 抢先体验使用 Pro，可以把颜色连同字体和间距一起导出为 Tailwind v4 @theme、CSS 变量或 DESIGN_SPECS.md。提取设计系统
| 免费€0永久 | Pro€49一次性付款 | |
|---|---|---|
| 按使用频率排序的页面调色板，提供 HEX、RGB 和 HSL | ||
| 可取任意位置颜色的取色器，图片也可以 | ||
| 每组文字与背景的 WCAG 对比度 | ||
| 将调色板导出为 CSS 变量或 Tailwind token（连同字体和间距） | — | 抢先体验免费 |
免费吗？
是的。调色板、取色器和 WCAG 对比度永久免费。
能从图片中提取颜色吗？
调色板使用的是页面 CSS 中的颜色。要获取图片中的颜色，请使用取色器。
颜色可以复制成哪些格式？
HEX、RGB 和 HSL。使用 Pro，还可以复制为 CSS 变量或 Tailwind token。
我需要达到什么对比度？
普通文字 4.5:1（AA），大号文字 3:1。AAA 级则分别为 7:1 和 4.5:1。
支持哪些浏览器和操作系统？
从 1.0 版起支持 Windows、Mac 和 Linux 上的 Chrome、Edge、Brave、Arc、Opera 和 Vivaldi。扩展由浏览器运行，而不是由操作系统运行，所以在各处表现一致。代码已为 Firefox 和 Safari 做好准备，无需重写。开发期间，内容可能会有变化。
候补名单
成为首批试用者
Smart Design Inspector 正在开发中。留下你的邮箱，它在 Chrome 网上应用店上线当天我们会通知你，并在抢先体验期间免费开放 7 项 Pro 功能。
发布当天一封邮件，之后很少打扰 · 一键退订