无需登录 数据私有 本地保存

网页CSS变量提取为色板 - 一键查看站点主题色

开发 设计工具 CSS变量 主题 提取 色板
51
0
0
0

CSS 变量提取为色板

从任意网页或CSS代码中提取颜色变量，一键生成可视化色板，查看站点主题色体系

通过CORS代理获取，部分站点可能受限
常见问题与知识点

CSS变量（CSS Custom Properties）使用 --变量名 语法定义，通过 var() 函数调用。它们允许在CSS中存储可复用的值（如颜色、尺寸等），支持动态修改和级联继承，是现代网页主题系统的核心。例如 :root { --primary: #6366f1; } 定义了一个全局主色调变量，后续可用 color: var(--primary); 引用。

在本工具中输入目标网站URL，点击"提取色板"即可自动获取该站点的CSS文件并解析其中的颜色变量。很多现代网站（如使用Bootstrap 5、Tailwind CSS或自定义设计系统的站点）在 :root 中定义了完整的主题色体系。如果URL方式受限（CORS策略），可手动复制该站点的CSS源码粘贴到工具中解析。

工具自动识别 HEX（#RGB、#RRGGBB、#RRGGBBAA）、RGB/RGBA、HSL/HSLA、HWB、Lab/OKLCH 等现代CSS颜色格式，以及 transparent、currentColor 等关键字。对于使用 var() 嵌套引用的变量，工具会尝试递归解析至最终颜色值。

CSS变量是浏览器原生支持的动态属性，在运行时生效，可通过JavaScript修改，支持级联和继承。Sass/Less变量是编译时的静态替换，编译后不再存在。CSS变量更适合主题切换、响应式设计等动态场景，而预处理器变量适合编译时的常量管理。现代前端项目常结合使用两者。

主要原因是浏览器的CORS（跨域资源共享）安全策略。本工具使用公共CORS代理尝试获取外部CSS资源，但代理服务可能有速率限制或部分站点屏蔽。此外，使用CSS-in-JS方案（如Styled Components）的网站，其样式通过JavaScript动态注入，无法通过静态CSS解析获取。遇到此类情况，建议使用浏览器开发者工具复制CSS源码后粘贴解析。

提取的色板可导出为JSON或CSS格式，用于：① 设计参考——了解优秀网站的色彩体系；② 品牌分析——快速获取竞品站点的主题色搭配；③ 开发复用——将成熟的色彩变量体系迁移到自己的项目中；④ 无障碍检查——通过亮度排序检查色彩对比度是否满足WCAG标准。
🔧 相关工具