Site Palette 是一款网站配色提取工具,主要以浏览器扩展的形式工作,也提供 Figma 插件。它可以读取任意网站页面中使用的颜色,在几秒内生成配色方案和对应的十六进制色值,设计师和前端开发者无需检查 CSS 就能获取网页的主色与完整色彩组合。与仅用于查看单个颜色的工具不同,Site Palette 还支持查看历史调色板、通过永久链接分享配色,并将结果下载为 SVG、Sketch 和 Adobe Swatch 文件;颜色提取过程默认在本地完成,除非用户主动分享,否则数据不会离开本地环境。
核心功能
从网站提取颜色
安装扩展后打开任意网页,在扩展中点击创建调色板,Site Palette 会读取页面并提取网页使用的颜色。生成结果包括占主导地位的颜色、完整配色方案以及每种颜色的十六进制代码,不需要通过检查 CSS 来寻找颜色。
多种配色算法
Site Palette 提供 Median cut、Material Design 和 Color cube 三种生成方式。Median cut 会在三维模型中聚类相近颜色,按体积排序后返回各区块的基础色;Material Design 基于 Android SDK 中的 Palette 类;Color cube 会构建三维直方图网格,并搜索命中数的局部最大值。
调色板历史记录
每次生成调色板后,用户可以在历史记录中查看已有的调色板。官网的使用流程包括安装扩展、点击浏览器中的扩展图标、生成第一个调色板,以及查看全部历史调色板,便于回看此前从网站提取的颜色方案。
创建、混合与分享配色
除了从网站读取颜色,Site Palette 还支持创建和混合配色方案。生成的调色板可以通过永久链接分享,适合将配色结果交给其他人查看或继续使用。
导出设计文件
颜色方案可以下载为 SVG、Sketch 和 Adobe Swatch 文件,因此提取出的网页配色能够直接进入相应的设计工作流。官网同时提供 Figma 插件,可在 Figma 工作区中快速访问 Site Palette,并从设计文件附近打开插件页面完成安装。
使用方式
Site Palette 支持 Chrome、Firefox 和 Safari 浏览器扩展。使用时先安装扩展,打开目标网站,再点击扩展中的创建调色板即可生成结果;官网没有说明必须使用自备模型 Key,也没有提供 API 或命令行方式。除浏览器扩展外,还可以从 Figma Community 安装 Site Palette 插件,在 Figma 工作区中使用接近浏览器扩展的工作流。生成的配色可通过永久链接分享,也可导出为 SVG、Sketch 和 Adobe Swatch 文件。颜色提取默认在本地完成,除非主动分享,否则数据在本地处理。
适用人群与场景
设计师可以从参考网站提取主色和完整配色方案,再通过 Figma 插件或 Sketch、Adobe Swatch 等格式继续使用。前端开发者可以快速获取目标网站的十六进制色值,用于分析网页配色。需要整理灵感的人可以保存调色板历史,并用永久链接分享结果;需要把网页配色带入设计文件的人,则可以使用 Figma 插件或下载后的设计资源文件。
定价
新用户可获得免费的 24 小时试用。试用后,订阅方案起价为每月 2.50 美元,按年计费;也可以一次性支付 99 美元购买终身使用权。官网将这些方案用于解锁完整的设计师配色提取功能。