### [Site Palette](https://hello123.com/)

**Published:** 2026-09-27T01:00:00

**Author:** hello123

**Excerpt:** Site Palette是一款浏览器扩展，能从任何网站自动提取配色方案，生成完整调色板。支持Figma、Ske…

设计师和前端开发人员复刻网站视觉风格时，手动拾色效率低下，逐像素记录十六进制代码极易出错。**Site Palette** 浏览器扩展通过算法化分析 CSS 与可见样式，从任意网页一键生成调色板，目前服务超过 80,000 名日常用户。

## Site Palette 浏览器扩展的多算法提取原理

[Site Palette](http://palette.site/) 兼容 Chrome、Edge、Brave、Opera、Firefox 五款主流浏览器。区别于传统单点吸管，该扩展采用 Color Cube、Median Cut、Material Design、视口面积排名四种算法交叉提取颜色，输出比单点拾色更连贯的调色板。整体流程为：扫描网页 DOM 中的色值与可见样式，按出现频次和显示面积排序，最终输出结构化调色板，每条颜色记录包含十六进制、RGB 与占比数据。

更关键的是它对设计软件的端到端输出能力。调色板能直接导出为 Figma 局部变量（Local Variables）、Sketch 模板、Adobe Swatch (.ase) 与 SVG 四种格式。相比之下，同类工具 ColorZilla 停留在十六进制复制层面，Coolors 与 Adobe Color 走的是 AI 随机生成路径，二者都不具备“从真实网站提取并直出设计软件”的链路。这种“提取即导出”的集成方式，使该扩展在配色工具生态中具有独特定位。

| 维度  | Site Palette | ColorZilla | Coolors / Adobe Color |
| --- | --- | --- | --- |
| 提取方式 | 多算法分析网页 CSS | 像素级单点拾取 | AI 生成或自定义 |
| 设计软件集成 | Figma 变量、Sketch、.ase、SVG | 仅十六进制/RGB | 多为十六进制/RGB |
| 价格  | 月 $2.5 / 年 $30 / 终身 $79 | 免费  | 部分免费 |

## Site Palette 适合谁

该扩展适合以下三类人群：UI/UX 设计师做竞品视觉审计、品牌重定义前的旧色板留档、设计系统初始化时，可直接把网页调色板导入 Figma 或 Sketch。前端开发参考目标网站配色时，批量获取十六进制代码避免逐个吸管拾取。内容创作与营销人员制作配图或情绪板时，能快速还原某个站点的色彩氛围。

## Site Palette 的付费墙与不适用场景

Site Palette 仅提供 24 小时或 1 天的免费试用，到期后必须订阅：月付 $2.5、年付 $30、终身 $79。预算敏感或只需偶尔拾色的用户，浏览器自带吸管或免费 ColorZilla 已足够。如果你的需求只是查看某个按钮的十六进制值，而不是分析整站配色，订阅费用的边际收益较低。

{"@context":"https://schema.org","@graph":\[{"@type":"Organization","@id":"https://hello123.com/#organization","name":"Hello123","url":"https://hello123.com/"},{"@type":"WebSite","@id":"https://hello123.com/#website","url":"https://hello123.com/","name":"Hello123","publisher":{"@id":"https://hello123.com/#organization"},"inLanguage":"zh-CN"},{"@type":"WebPage","@id":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/site-palette-201/","url":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/site-palette-201/","name":"Site Palette - 网站配色方案提取与设计工具","isPartOf":{"@id":"https://hello123.com/#website"},"inLanguage":"zh-CN"},{"@type":"BreadcrumbList","itemListElement":\[{"@type":"ListItem","position":1,"name":"首页","item":"https://hello123.com/"},{"@type":"ListItem","position":2,"name":"配色推荐","item":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/"},{"@type":"ListItem","position":3,"name":"Site Palette - 网站配色方案提取与设计工具","item":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/site-palette-201/"}\]},{"@type":"Article","@id":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/site-palette-201/#article","headline":"Site Palette - 网站配色方案提取与设计工具","description":"Site Palette是一款浏览器扩展，能从任何网站自动提取配色方案，生成完整调色板。支持Figma、Sketch等多种导出格式，提供24小时免费试用，适合设计师与前端开发高效获取色彩灵感。","publisher":{"@id":"https://hello123.com/#organization"},"inLanguage":"zh-CN","datePublished":"2026-07-11T16:03:03.370Z","dateModified":"2026-07-28T16:07:56.240Z","author":{"@type":"Organization","name":"Hello123 编辑团队"},"mainEntityOfPage":{"@type":"WebPage","@id":"http://palette.site/"},"isPartOf":{"@id":"https://hello123.com/%E9%85%8D%E8%89%B2%E6%8E%A8%E8%8D%90/site-palette-201/"},"citation":\[{"@type":"CreativeWork","@id":"https://free.com.tw/site-palette/","name":"free.com.tw"},{"@type":"CreativeWork","@id":"https://huajiakeji.com/web-development/2018-04/1381.html","name":"huajiakeji.com"},{"@type":"CreativeWork","@id":"https://www.32r.com/soft/94988.html","name":"32r.com"},{"@type":"CreativeWork","@id":"https://chromewebstore.google.com/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh","name":"google.com"},{"@type":"CreativeWork","@id":"https://sliday.com/works/site-palette","name":"sliday.com"}\],"about":\[{"@type":"Thing","name":"Site Palette","additionalType":"https://schema.org/Product"},{"@type":"Thing","name":"配色方案","additionalType":"https://schema.org/Concept"},{"@type":"Thing","name":"浏览器扩展","additionalType":"https://schema.org/Software"},{"@type":"Thing","name":"UI/UX设计","additionalType":"https://schema.org/Concept"},{"@type":"Thing","name":"前端开发","additionalType":"https://schema.org/Concept"},{"@type":"Thing","name":"设计工具","additionalType":"https://schema.org/Concept"}\]}\]}



---