← 返回功能
Free

颜色面板

Color Palette 扫描网页上的每个元素,提取所用颜色的完整集合——涵盖文字、背景、边框、阴影和强调色。颜色以可视化色块形式展示,按使用频率排序(最常用的排在最前),每个色块显示其 HEX 值和使用次数。点击任意色块即可复制,或将整个调色板导出为颜色代码列表。

每个设计精良的网站都有统一的调色板——通常为 3-8 种主色加若干中性色。Color Palette 通过扫描每个元素计算后的 color、background-color、border-color 和 box-shadow 值,自动提取该调色板。结果是一个按频率排序的完整颜色集合,呈现网站完整的配色体系。主色(品牌主色、背景色、文字色)以高使用次数排在最前,强调色和单次使用的颜色排在后面。这对设计研究极具价值——访问任意网站,数秒内即可提取其精确调色板。同时也适用于审查自有网站:是否存在不属于设计系统的游离颜色?设计规范仅定义 3 种灰色,实际使用了 5 种略有不同的灰色调?Color Palette 让整个颜色使用情况一目了然且可计量。

实时预览
example.com
Extracted Palette — 8 colors Export All
#7c3aed
42 uses
#0f0f1a
38 uses
#e8e8f0
31 uses
#4ade80
14 uses
#1a1a2e
28 uses
#ef4444
6 uses
#f59e0b
5 uses
#3b82f6
4 uses
关键功能

全页面自动提取

扫描页面上每个可见元素,从计算属性中提取颜色:color、background-color、border-color、box-shadow 颜色、outline-color 和 text-decoration-color。页面上使用的每种颜色均被捕获。

按频率排序的色块

颜色按使用次数排序——使用最多的颜色排在最前。主要品牌色和背景色浮至顶端,单次使用的强调色排在最后。即刻识别页面的主色、次色和强调色。

可视化颜色色块

每种颜色以大尺寸可视化色块呈现,下方显示其 HEX 代码和使用次数。色块足够大,可区分细微色差(如 #333 与 #2a2a2a)。

一键复制

点击任意颜色色块,其 HEX 值立即复制到剪贴板。无需打开颜色面板或二级对话框——一键点击,复制完成。

导出完整调色板

点击“导出全部”,将整个调色板以格式化的 HEX 颜色代码列表形式复制。可粘贴到设计工具、CSS 变量文件或颜色文档中。列表保留频率排序顺序。

去重与规范化

颜色经过规范化处理(同一颜色的 rgb 和 hex 表示形式合并)并去重。调色板仅显示唯一颜色,重复表示形式的使用次数合并计算。

常见用例

设计研究与灵感

访问配色方案出色的网站并提取其精确调色板。将这些颜色作为自有设计的起点,或仅记录哪些颜色组合搭配效果良好。

品牌色审查

对自有网站运行 Color Palette 以验证品牌色一致性。是否存在本应只有 1 种蓝色却使用了 4 种略有差异的蓝色?是否有偏离品牌的颜色悄然出现?频率排序使不一致之处一目了然。

创建 CSS 自定义属性

导出调色板并将其转换为 CSS 自定义属性(--color-primary、--color-secondary 等)。频率排序的输出结果告诉您哪些颜色应担任主色、次色和强调色角色。

竞品颜色分析

从竞品网站提取调色板,了解其品牌定位。暖色调与冷色调、高对比度与低饱和度——调色板揭示了有意为之的设计决策。

无障碍颜色审查

查看所有文字颜色与背景颜色的对比情况。是否存在文字与背景对比度过低的组合?调色板提供完整颜色集合,供您对照 WCAG 对比度要求逐一检查。

如何使用
1

激活 Color Palette

打开 DevSuite Pro 浮动 dock,点击 Color Palette 图标。工具扫描页面上的每个元素并提取所有颜色值。

2

浏览提取的颜色

颜色色块网格按使用频率排序显示。使用最多的颜色排在最上方。每个色块显示 HEX 代码及使用该颜色的元素数量。

3

点击复制单个颜色

点击任意色块,其 HEX 值复制到剪贴板。短暂显示复制确认提示。

4

导出完整调色板

点击“导出全部”,将每种颜色以格式化列表形式复制。粘贴到 CSS 变量文件、设计工具或文档中。

5

跨页面对比

导航到同一网站的不同页面并提取调色板,以验证整个网站颜色的一致性。

准备好尝试了吗? 颜色面板?

免费安装 DevSuite Pro,为您的浏览器解锁 39 多个开发者工具。

添加到 Chrome 添加到 Edge 添加到 FireFox