CSS设计令牌生成器
从单一品牌hex颜色生成完整的50-950 OKLCH色板以及语义CSS自定义属性 — 主色、表面、边框、环等，带有可选的暗模式变体。
输入
选择一种颜色，或直接输入HEX值。
用作调色板键，例如 --color-brand-500。
现代输出oklch()值；Hex输出经典#rrggbb。
添加第二个块，具有深色友好的语义令牌覆盖。
缩放调色板饱和度。100保持品牌色的色度。
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-design-token-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"brandColor": "#464aff",
"tokenName": "brand",
"colorFormat": "oklch",
"includeDarkMode": "true",
"darkSelector": ".dark",
"chromaBoost": "100"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-design-token-generator` tool (CSS Design Token Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-design-token-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS设计令牌生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
什么是设计令牌？
设计令牌是命名的、可重用的值 — 颜色、间距、半径、字体大小 — 组成设计系统。与其在20个不同的组件中硬编码#3b3ff0，不如定义一次--color-primary并在任何地方引用它。改变令牌的值，使用它的每个组件都会一起更新。令牌是允许设计系统在增长时保持一致的原因，以及允许单个暗模式开关重新绘制整个产品的原因。
为什么CSS自定义属性是常见的目标格式
设计令牌可以导出到许多格式 — JSON、JS/TS对象、Sass变量 — 但CSS自定义属性(--my-token: value;)具有独特的优势：它们是浏览器原生的、在渲染时解析，并自动级联并由选择器覆盖。这就是使普通CSS主题成为可能的原因：在:root下定义您的令牌一次，然后在.dark（或@media (prefers-color-scheme: dark)）下覆盖它们的子集，消费var(--color-primary)的每个组件都会重新绘制，无需任何JavaScript或重建。此工具特别针对CSS自定义属性，因为这种级联和覆盖行为正是色彩系统所需的。
此工具如何构建调色板
从单一品牌hex颜色开始，该工具通过OKLCH — 感知均匀的色彩空间 — 插值以生成11档缩放(50到950)，这与Tailwind的默认调色板使用的形状相同。因为OKLCH亮度步长在感知上是均匀的，每个档都看起来是亮度的一致跳跃，而不是原始RGB或HSL插值时获得的不均匀跳跃。每个生成的档也被夹回到sRGB色域，所以它总是呈现为有效、可显示的颜色，即使对于高度饱和的品牌颜色也是如此。
在原始调色板之上，该工具映射固定的语义角色集 — --color-primary、--color-surface、--color-border、--color-ring等 — 到特定档（例如，primary→浅模式中的600，暗模式中的400）。这些语义名称是您的组件应该实际引用的；原始50–950缩放主要用于支持它们。
如何使用此工具
- 选择品牌色（或直接输入hex值）。
- 设置标记名称 — 它成为调色板的键，例如
--color-brand-500。为您的品牌或产品使用具体的名称，如acme或indigo。 - 选择格式：
oklch()用于现代的、宽色域就绪的值，或纯hex用于与旧工具的最大兼容性。 - 保持包括深色模式变体开启以获得第二个语义覆盖块，并选择与您的框架匹配的深色选择器 —
.dark类（Tailwind、shadcn）、[data-theme="dark"]属性或@media (prefers-color-scheme: dark)查询用于OS级主题，无需任何JavaScript切换。 - 调整色度以向上或向下缩放调色板的饱和度 — 100保持品牌色的原始强度，较低值产生更平静、更去饱和的调色板，较高值推向该亮度可显示的最饱和颜色。
- 复制生成的CSS，或将其下载为
.css文件，并将其放入您的样式表中。
输出在您调整任何控件时即时更新。
FAQ
为什么调色板同时包含原始档（--color-brand-600）和语义令牌（--color-primary）？
原始缩放是真实来源；语义令牌是其上的别名层。组件应该引用语义名称 — --color-primary、--color-border — 而不是直接的原始档，所以重新设计调色板（或交换品牌颜色）永远不需要接触组件代码。
色度滑块实际上做什么？ 它相对于您的品牌色本身的色度缩放每个生成档的饱和度（色度），同时将每个档重新夹回到sRGB色域。100尽可能接近地再现品牌色的饱和度，因为每个亮度档的色域允许；低于100的值产生更平静、更柔和的调色板；高于100的值推向该亮度可显示的最饱和颜色。
我应该选择哪个暗模式选择器？
如果您的框架（Tailwind、shadcn/ui和大多数组件库）在<html>或<body>上切换类，请使用.dark。如果您改为切换数据属性，请使用[data-theme="dark"]。如果您希望页面自动跟随操作系统主题，请使用@media查询，无需任何切换。
如果我需要支持较旧的浏览器，能否使用oklch()值？
oklch()在所有当前主要浏览器中都受支持，但如果您需要支持明显较旧的浏览器，请将格式切换为Hex — 无论如何都会生成相同的调色板和语义结构，只是使用#rrggbb值而不是oklch()。
隐私
一切都在您的浏览器中发生。您输入的任何颜色、令牌名称或设置都不会发送到服务器 — CSS在您键入时本地生成和更新。