UD5工具箱
CSS变量（自定义属性）是什么？
CSS变量（CSS Custom Properties）使用 --变量名 语法定义，通过 var() 函数调用。它们允许在CSS中存储可复用的值（如颜色、尺寸等），支持动态修改和级联继承，是现代网页主题系统的核心。例如 :root { --primary: #6366f1; } 定义了一个全局主色调变量，后续可用 color: var(--primary); 引用。CSS变量的最大优势在于运行时可修改，可以通过JavaScript动态更改实现主题切换，这是Sass/Less等预处理器变量无法做到的。
如何一键查看任意网站的主题色？
在本工具中输入目标网站URL，点击「提取色板」即可自动获取该站点的CSS文件并解析其中的颜色变量。很多现代网站（如使用Bootstrap 5、Tailwind CSS或自定义设计系统的站点）在 :root 中定义了完整的主题色体系。如果URL方式受限（CORS策略），可手动复制该站点的CSS源码粘贴到工具中解析。建议使用浏览器开发者工具的Network面板筛选CSS文件，找到定义变量的样式表后全选复制即可。
提取的色板支持哪些颜色格式？
工具自动识别HEX（#RGB、#RRGGBB、#RRGGBBAA）、RGB/RGBA、HSL/HSLA、HWB、Lab/OKLCH等现代CSS颜色格式，以及transparent、currentColor等关键字。对于使用 var() 嵌套引用的变量，工具会尝试递归解析至最终颜色值。基本覆盖了CSS Color Level 4规范中定义的所有颜色表示方法。即使网站使用了非常规的颜色格式组合，工具也能尽力识别和解析。
CSS变量和Sass/Less变量有什么区别？
CSS变量是浏览器原生支持的动态属性，在运行时生效，可通过JavaScript修改，支持级联和继承。Sass/Less变量是编译时的静态替换，编译后不再存在。CSS变量更适合主题切换、响应式设计等动态场景，而预处理器变量适合编译时的常量管理。现代前端项目常结合使用两者：用Sass变量管理编译期逻辑（如计算间距、生成断点），用CSS变量实现运行时主题切换和动态样式调整。
为什么有些网站无法通过URL提取CSS变量？
主要原因是浏览器的CORS（跨域资源共享）安全策略。本工具使用公共CORS代理尝试获取外部CSS资源，但代理服务可能有速率限制或部分站点屏蔽。此外，使用CSS-in-JS方案（如Styled Components）的网站，其样式通过JavaScript动态注入，无法通过静态CSS解析获取。使用CSS Modules的项目变量名会被编译为哈希值，也难以识别。遇到此类情况，建议使用浏览器开发者工具复制CSS源码后粘贴解析。
如何使用提取的色板进行设计？
提取的色板可导出为JSON或CSS格式，用于多种场景：设计参考方面，可以了解优秀网站的色彩体系和配色逻辑；品牌分析方面，可以快速获取竞品站点的主题色搭配方案；开发复用方面，可以将成熟的色彩变量体系迁移到自己的项目中，减少从零搭建设计系统的工作量；无障碍检查方面，通过亮度排序可以快速评估色彩对比度是否满足WCAG标准，发现潜在的可访问性问题。
色板排序功能有什么实际用途？
四种排序方式对应不同的分析需求。按色相排列可以直观查看色彩在色轮上的分布，发现配色方案的规律和空白区域；按亮度排列有助于评估设计系统的明暗层次是否充足，检查是否存在亮度相近导致对比度不足的问题；按名称排列便于快速定位特定变量，如查找所有以 --color- 开头的变量；原始顺序保留了CSS源码中的定义结构，有助于理解设计系统的组织逻辑和变量之间的依赖关系。
var()嵌套引用是如何解析的？
当一个CSS变量的值引用了另一个变量时（如 --btn-bg: var(--primary)），工具会启动递归解析机制。它首先查找 --primary 变量的值，如果 --primary 也引用了其他变量，则继续向下追踪，直到找到最终的具体颜色值（如 #6366f1）。这个过程会检测循环引用并安全终止，避免无限递归。最终色板中显示的是解析后的实际颜色值，而非中间的变量引用，确保用户看到的是可用的颜色结果。