# CSS Variables

浏览 8 个 CSS Variables 在线工具，在浏览器中处理 CSS Variables 相关内容，无需安装软件。

> 标准页面: https://elysiatools.com/zh/tags/css-variables

## 概述

CSS Variables 工具集合帮助你在浏览器界面处理 CSS 自定义属性相关内容，适合日常开发与样式工作流程使用。

## 常见问题

### CSS Variables 工具可以做什么？

你可以使用此分类下的工具处理 CSS Variables（CSS 自定义属性）相关内容，具体功能取决于所选工具。

### 使用这些工具需要安装软件吗？

不需要安装软件，用户可以通过浏览器界面使用 CSS Variables 工具。

### 提交的数据会如何处理？

工具在浏览器界面中操作，但处理由 Elysia Tools 服务器完成。文本输入不会保存；上传的文件会在 6 小时后自动删除。

## 工具

- [图片 URL 配色提取器](https://elysiatools.com/zh/tools/color-palette-extractor-from-image-url): 抓取远程图片 URL，提取主色调，导出可直接用于代码的配色文件，并查看对比度结果
- [颜色 Token 级联生成器](https://elysiatools.com/zh/tools/color-token-cascade-generator): 输入一个主色 Hex，自动生成主色、辅助色、中性色和语义化设计 token，并输出 CSS 变量与 Style Dictionary JSON
- [ECharts 主题 Token 抽取器](https://elysiatools.com/zh/tools/echarts-theme-token-extractor): 从 ECharts 主题 JSON 抽取设计 token——颜色、数字、字号与字符串——并直接导出到你的设计系统。粘贴一个主题对象（即通过 echarts.init(dom, themeName) 注册的那种），工具遍历每个叶子节点，为每个颜色（可选地将命名色/rgb 规范化为 hex）、间距数字、字号与字符串打标，然后输出干净的 CSS 变量、Tailwind theme.extend 配置、Style Dictionary tokens.json 或 SCSS 变量。在 ECharts 可视化主题与 Figma/CSS/Tailwind 设计 token 之间架桥，无需逐个手抄。
- [Figma Tokens 导出](https://elysiatools.com/zh/tools/figma-tokens-export): 粘贴 Figma / Tokens Studio 变量 JSON，导出为 Tailwind、shadcn CSS 变量、Style Dictionary 或 SCSS。通过类型推断保留颜色、间距与字体 token。
- [图片配色提取器](https://elysiatools.com/zh/tools/image-color-palette-extractor): 上传图片后提取主色调，导出代码可用的色板片段，并检查对比度
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [Tailwind 任意值演练场](https://elysiatools.com/zh/tools/tailwind-arbitrary-value-playground): 粘贴使用任意值的 Tailwind 类（w-\[137px\]、text-\[#bada55\]、grid-cols-\[1fr_2fr\]、\[mask-type:luminance\]），查看生成的 CSS、实时可视化预览、数据类型提示识别，以及每条转换的解释。适合调试 calc()、CSS 变量与超出设计令牌刻度的一次性取值。
- [Tailwind 色板同步器](https://elysiatools.com/zh/tools/tailwind-color-palette-sync): 输入一组 HEX,选择命名规则(色阶 50–950 / 单名 / 对象嵌套),自动生成 tailwind.config.ts 的 theme.extend.colors 片段,每个色阶同时给出 WCAG AA/AAA 对比等级,可选暗色模式。

## 相关内容

- [CSS](https://elysiatools.com/zh/tags/css): 使用48个在线CSS工具处理、转换、验证和管理CSS文件与数据，无需安装软件。文本不保存，上传文件6小时后自动删除。
- [HTML/CSS](https://elysiatools.com/zh/tags/html): 浏览 86 个 HTML/CSS 在线工具，处理 HTML、CSS 和 DOM 相关内容。无需安装软件，文本不保存，上传文件将在 6 小时后自动删除。
- [颜色](https://elysiatools.com/zh/tags/color): 浏览 214 个在线颜色工具，处理 HEX、RGB、HSL、调色板等颜色数据。无需安装软件，文本不保存，上传文件将在 6 小时后自动删除。
- [颜色调色板](https://elysiatools.com/zh/tags/color-palette): 浏览 10 个颜色调色板在线工具，在浏览器中处理颜色调色板相关任务，无需安装软件。
- [设计系统](https://elysiatools.com/zh/tags/design-system): 浏览 7 个设计系统相关在线工具，在浏览器中处理设计系统工作流；文本不会保存，上传文件将在 6 小时后自动删除。
- [Design Tokens](https://elysiatools.com/zh/tags/design-tokens): 使用 5 个 Design Tokens 在线工具处理、转换、验证和管理相关数据，无需安装软件。文本不保存，上传文件 6 小时后自动删除。