Color Palette 扫描网页上的每个元素,提取所用颜色的完整集合——涵盖文字、背景、边框、阴影和强调色。颜色以可视化色块形式展示,按使用频率排序(最常用的排在最前),每个色块显示其 HEX 值和使用次数。点击任意色块即可复制,或将整个调色板导出为颜色代码列表。
每个设计精良的网站都有统一的调色板——通常为 3-8 种主色加若干中性色。Color Palette 通过扫描每个元素计算后的 color、background-color、border-color 和 box-shadow 值,自动提取该调色板。结果是一个按频率排序的完整颜色集合,呈现网站完整的配色体系。主色(品牌主色、背景色、文字色)以高使用次数排在最前,强调色和单次使用的颜色排在后面。这对设计研究极具价值——访问任意网站,数秒内即可提取其精确调色板。同时也适用于审查自有网站:是否存在不属于设计系统的游离颜色?设计规范仅定义 3 种灰色,实际使用了 5 种略有不同的灰色调?Color Palette 让整个颜色使用情况一目了然且可计量。
扫描页面上每个可见元素,从计算属性中提取颜色: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 自定义属性(--color-primary、--color-secondary 等)。频率排序的输出结果告诉您哪些颜色应担任主色、次色和强调色角色。
从竞品网站提取调色板,了解其品牌定位。暖色调与冷色调、高对比度与低饱和度——调色板揭示了有意为之的设计决策。
查看所有文字颜色与背景颜色的对比情况。是否存在文字与背景对比度过低的组合?调色板提供完整颜色集合,供您对照 WCAG 对比度要求逐一检查。
打开 DevSuite Pro 浮动 dock,点击 Color Palette 图标。工具扫描页面上的每个元素并提取所有颜色值。
颜色色块网格按使用频率排序显示。使用最多的颜色排在最上方。每个色块显示 HEX 代码及使用该颜色的元素数量。
点击任意色块,其 HEX 值复制到剪贴板。短暂显示复制确认提示。
点击“导出全部”,将每种颜色以格式化列表形式复制。粘贴到 CSS 变量文件、设计工具或文档中。
导航到同一网站的不同页面并提取调色板,以验证整个网站颜色的一致性。