调色板转CSS变量
4 种颜色
颜色预览
#1E293B
#0EA5E9
#10B981
#F43F5E
CSS 变量
:root {
--color-1: #1E293B;
--color-2: #0EA5E9;
--color-3: #10B981;
--color-4: #F43F5E;
}相关外部网站
部分链接为联盟营销链接。
相关工具
粘贴调色板（或包含十六进制颜色代码的任意文本），本工具会提取颜色并将其写成 CSS 自定义属性、SCSS 变量或 Tailwind 颜色配置。重复颜色将被去除，每种颜色获得一个编号名称。所有操作在浏览器中完成。
使用方法
- 将十六进制颜色（或包含它们的文本）粘贴到输入框。
- 设置名称前缀，选择 CSS、SCSS 或 Tailwind 输出。
- 将生成的代码复制到样式表或配置文件中。
工作原理
工具扫描文本中的十六进制代码（3位或6位，带或不带 #），将其规范化为大写6位形式，并在保持出现顺序的同时去除重复项。每种颜色使用您的前缀成为一个编号变量，然后按所选格式输出：CSS :root 自定义属性、SCSS $变量或 Tailwind theme.extend.colors 对象。
主要功能
智能提取
从任意粘贴文本中找出十六进制代码，忽略其余内容。
三种输出格式
支持输出 CSS 自定义属性、SCSS 变量或 Tailwind 配置。
自动去重
重复颜色合并为一个，确保每个变量唯一。
完全私密
颜色在浏览器中处理，从不上传。
适用场景
设计交付
将设计工具中的调色板快速转换为代码令牌。
主题定制
为网站主题创建一组 CSS 变量。
Tailwind 项目
将品牌颜色直接添加到 Tailwind 配置中。
样式指南
使用一致的变量名记录颜色系统。
注意事项
- #RGB 和 #RRGGBB 均被接受并规范化。
- 颜色保持首次出现的顺序，重复项将被删除。
- 如需语义化名称，粘贴后可重命名变量。
- 所有处理在您的设备上进行，不上传任何数据。
常见问题
- 接受什么格式的输入？
- 包含十六进制代码的任意文本——空格分隔、逗号分隔或从样式表粘贴均可，非颜色文本会被忽略。
- 支持简写十六进制吗？
- 支持。3位十六进制（如 #abc）会自动展开为 #AABBCC。
- 可以修改变量名吗？
- 设置前缀来控制基础名称，编号会自动添加。如需语义名称，请编辑生成结果。
- Tailwind 输出是什么格式？
- 包含颜色的 module.exports 配置，颜色位于 theme.extend.colors 下，可直接合并到 tailwind.config.js。
- 颜色会上传吗？
- 不会。所有处理在浏览器中完成，不会离开您的设备。