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

网页配色提取器 - 分析任意网站CSS变量

9
0
0
0

网页配色提取器

分析任意网站CSS变量，提取设计系统配色方案。支持粘贴CSS代码、输入URL或粘贴HTML自动解析。

通过CORS代理获取，可能受跨域限制

粘贴CSS代码或输入URL开始提取配色方案

支持CSS自定义属性（变量），自动识别颜色值

常见问题与知识点

什么是CSS自定义属性（CSS变量）？
CSS自定义属性（Custom Properties），通常称为CSS变量，是以--为前缀的CSS属性。它们允许开发者在样式表中定义可复用的值，通过var()函数引用。例如：--primary-color: #4f46e5; 定义了一个主色调变量，后续可通过 color: var(--primary-color); 来使用。CSS变量支持继承和级联，是构建现代设计系统和主题切换的核心技术。
如何查看任意网站的CSS变量？
有几种常用方法：① 浏览器开发者工具 - 按F12打开开发者工具，在Elements面板中选择<html>或<body>元素，在Styles面板中查看:root或inherited from ...部分，即可看到所有CSS变量。② 使用本工具 - 复制网站的CSS源代码粘贴到工具中自动提取。③ Console命令 - 在浏览器控制台执行getComputedStyle(document.documentElement).getPropertyValue('--变量名')来获取特定变量值。
CSS变量和SCSS/LESS变量有什么区别？
CSS变量是原生浏览器支持的动态属性，在运行时生效，支持JavaScript操作和实时更新。而SCSS/LESS变量是预处理器变量，在编译时就被替换为固定值。CSS变量可以响应媒体查询、支持主题切换无需重新编译、可以被后代元素继承和覆盖。SCSS变量则在大型项目中编译更快、无需考虑浏览器兼容性问题。现代前端开发中，两者常结合使用：SCSS处理编译时逻辑，CSS变量处理运行时动态主题。
浏览器对CSS变量的支持情况如何？
CSS自定义属性目前在所有主流浏览器中都得到良好支持，包括Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+，以及移动端iOS Safari 9.3+和Android Chrome。全球覆盖率超过97%。唯一不支持的是IE 11及更早版本（已停止维护）。如果你的项目需要兼容IE，建议使用CSS变量polyfill或回退方案。
如何利用CSS变量构建设计系统的配色方案？
推荐使用语义化命名的CSS变量来构建设计系统：在:root中定义基础色板（如--blue-500: #3b82f6），然后创建语义化别名（如--color-primary: var(--blue-500)）。这样可以在保持颜色一致性的同时，灵活切换主题。常见的配色变量包括：--color-primary主色、--color-secondary辅助色、--color-bg背景色、--color-text文字色、--color-border边框色、--color-success/warning/error状态色等。配合prefers-color-scheme媒体查询可轻松实现暗色模式。
提取出的CSS变量中有些不是颜色值怎么办？
CSS变量可以存储任何CSS值：颜色、尺寸、字体、间距、阴影等。本工具会自动识别颜色值（支持hex、rgb、rgba、hsl、hsla、命名颜色等格式），将颜色变量以可视化色块展示。非颜色变量（如--spacing: 16px、--font: 'Inter'）会在下方列表中显示。你可以使用"仅显示颜色变量"开关来过滤结果。如果某个颜色变量引用了其他变量（如--primary: var(--blue)），工具会尝试追踪引用链进行解析。
什么是CORS？为什么直接输入URL可能获取失败？
CORS（跨源资源共享）是浏览器的安全机制，限制网页从不同域名获取资源。当你从工具站直接请求其他网站的CSS文件时，浏览器会阻止跨域请求。本工具使用了CORS代理服务来尝试绕过此限制，但代理服务可能有请求频率限制或不稳定。推荐做法：直接复制目标网站的CSS代码粘贴到工具中分析，这是最可靠的方式。你也可以在浏览器开发者工具的Sources面板找到CSS文件并复制内容。
🔧 相关工具