UD5工具箱
方式一：通过URL提取
步骤 1：选择URL提取模式
打开工具页面，默认即为「从URL提取」标签页。如果当前在「粘贴CSS代码」标签，请点击切换到URL提取模式。页面会显示URL输入框和「提取色板」按钮。
步骤 2：输入目标网站URL
在输入框中填写要分析的网站完整URL地址，例如 https://example.com。工具会尝试获取该站点的CSS样式表并解析其中的颜色变量。也可以点击「加载Bootstrap示例」按钮，快速填充Bootstrap框架的CDN地址进行体验，无需自行寻找目标网站。
步骤 3：点击提取并等待结果
点击「提取色板」按钮，工具将通过CORS代理获取目标站点的CSS资源。页面会显示加载状态提示。解析完成后，色板区域将展示所有识别到的颜色变量。如果遇到CORS限制，工具会给出相应提示，建议改用粘贴代码方式。
方式二：粘贴CSS代码
步骤 4：获取CSS源码
在目标网站上按F12打开浏览器开发者工具，切换到Elements或Sources面板，找到包含颜色变量定义的CSS代码段。通常在 :root 选择器下可以找到完整的主题变量定义，例如 :root { --primary: #6366f1; --secondary: #22d3ee; }。选中并复制相关CSS代码，确保包含所有需要分析的变量定义。
步骤 5：粘贴并解析
切换到「粘贴CSS代码」标签页，将复制的CSS代码粘贴到文本区域中。点击「解析CSS变量」按钮，工具将立即解析代码并生成色板。也可以点击「加载Bootstrap示例」按钮快速填充测试数据。
步骤 6：浏览与排序色板
色板生成后，可以通过顶部的排序选项卡切换排列方式。选择「按色相排列」可以查看色彩的整体分布，「按亮度排列」有助于评估明暗层次，「按名称排列」方便按变量命名查找，「原始顺序」则保持CSS中的定义顺序。色板会实时刷新显示。
步骤 7：导出与使用
确认色板内容后，点击「JSON」按钮导出结构化数据，包含变量名、颜色值、格式等完整信息；点击「CSS」按钮导出可直接使用的CSS变量定义代码。点击「全部复制」按钮可将所有颜色信息一次性复制到剪贴板。导出的数据可直接粘贴到项目文件或设计文档中使用。