UD5工具箱
CSS变量（自定义属性）
CSS变量又称自定义属性（CSS Custom Properties），是CSS原生支持的可复用值存储机制。使用双横线前缀定义，如 --primary-color: #6366f1。变量通过 var() 函数引用，支持级联继承和动态修改。它们是现代网页设计系统的基石，允许开发者在一处定义颜色、尺寸等值，全局引用和更新。本工具的核心功能就是自动提取这些变量并生成可视化色板。
:root 伪类
:root 是CSS中的一个伪类选择器，匹配文档树的根元素（即 html 元素）。在实际使用中，:root 的优先级略高于 html 选择器，因此常被用来定义全局CSS变量。将颜色变量定义在 :root 下可以确保它们在整个文档中可用，这也是本工具主要扫描的选择器。大多数设计系统和UI框架都在 :root 中集中管理主题色彩变量。
var() 函数
var() 是CSS中用于引用自定义属性的函数。语法为 var(--变量名) 或 var(--变量名, 回退值)。当变量引用其他变量时（如 --btn-bg: var(--primary)），会形成嵌套引用链。本工具能够递归解析这些嵌套引用，追踪到最终的具体颜色值，确保色板显示的是实际颜色而非变量名。var() 还支持第二个参数作为回退值，工具在解析时也会考虑这一机制。
HEX 颜色格式
十六进制颜色表示法是网页设计中最常见的颜色格式。使用 # 后跟3位或6位十六进制数字表示RGB颜色，如 #FFF 或 #FF5733。8位格式（如 #FF573380）额外包含Alpha透明度通道。HEX格式简洁直观，广泛用于CSS变量定义中。本工具完整支持所有HEX变体格式的识别和解析。
RGB / RGBA 颜色格式
RGB是基于红、绿、蓝三原光的加色模型，每个通道取值0-255或0%-100%。CSS中写作 rgb(255, 87, 51)。RGBA在RGB基础上增加Alpha透明度通道，取值0-1，如 rgba(255, 87, 51, 0.8)。这种格式在需要精确控制颜色透明度时非常有用，例如半透明背景和叠加效果。本工具能正确识别并提取所有RGB和RGBA格式的颜色变量。
HSL / HSLA 颜色格式
HSL代表色相（Hue）、饱和度（Saturation）、亮度（Lightness），是一种更符合人类直觉的颜色表示法。色相取值0-360度表示颜色类型，饱和度和亮度取值0%-100%。如 hsl(220, 80%, 60%)。HSLA额外包含Alpha透明度。HSL格式便于通过调整亮度和饱和度生成同色系的变体颜色，许多设计系统偏好使用HSL定义颜色变量，因为它更易于理解和调整。本工具完整支持HSL和HSLA格式的解析。
HWB / Lab / OKLCH 颜色格式
HWB（色相-白度-黑度）是另一种基于色相的颜色模型，更便于直觉化地调整颜色的明暗。Lab颜色空间基于人眼感知，包含明度（L）和两个色度分量（a、b），适合跨设备的颜色一致性。OKLCH是基于OKLAB的圆柱形颜色空间，是CSS Color Level 4引入的现代格式，提供更均匀的色彩分布。本工具支持这些前沿颜色格式的识别和提取，覆盖现代CSS的全部颜色表示能力。
CORS（跨域资源共享）
CORS是一种浏览器安全机制，限制网页从不同源（协议+域名+端口）获取资源。当本工具尝试通过URL直接获取外部网站的CSS文件时，浏览器的同源策略会阻止这一请求。为解决此问题，工具使用公共CORS代理中转请求。但代理服务可能存在速率限制，部分网站也可能屏蔽代理访问。遇到CORS限制时，建议使用粘贴CSS代码的方式作为替代方案。
色板（Color Palette）
色板是一组经过组织和展示的颜色集合，通常用于设计系统中统一管理项目的色彩方案。一个好的色板包含主色、辅色、中性色、语义色等多个维度，每个颜色都有明确的命名和用途。本工具从CSS变量中提取的色板保留了变量名与颜色值的对应关系，使用户能够理解每个颜色在设计体系中的角色和语义，而非仅仅获得一堆孤立的颜色值。
主题色（Theme Color）
主题色是定义网站整体视觉风格的核心颜色，通常包括主色调、辅助色和强调色。现代网站通过CSS变量实现主题色的统一管理，支持亮色/暗色模式切换、品牌定制等场景。通过分析网站的主题色体系，设计师可以快速理解其配色策略，开发者可以借鉴成熟的变量命名和组织模式。本工具的一键提取功能让主题色分析变得简单高效。