designrift
我们因自己需要而打造的颜色 Token 工具。
行业： 开发者工具、设计 | 技术栈： React、TypeScript、CSS、Tailwind、Radix | 状态： 已上线 | 访问 designrift
designrift 做什么#
选一种颜色。得到可直接投产的 CSS 自定义属性和一段 Tailwind CSS 配置。两种输出随您调整色板实时生成。亮色模式和暗色模式的 Token 一同输出，每一阶的对比度都满足 WCAG 标准，从「我需要一种蓝灰色主色」到拿到一份可以粘进项目里的文件，整个过程不到 30 秒。
designrift 是免费、开源的，无需注册账户。
每位前端开发者都熟悉的问题#
选一种颜色，算出色阶，写 CSS 自定义属性，把它们接到 tailwind.config.js 里，然后为暗黑模式再做一遍整套流程。接着发现 300 号色阶的对比度过不了 WCAG AA。从头再来。
这个循环每个项目都在重复：每个客户品牌、每次产品重设计、每次有人在上线前两周改变主意换主色。乏味的是它每次都一模一样。您不是每次都在解决新问题，只是在重做同一份工作，而且这件事足够容易出错，以至于通常是 QA 发现色阶不一致。
我们试过复制现成色板然后凭感觉调整十六进制值。那会得到一个没有可访问性保证的任意色阶。我们也试过通用的颜色生成器，它们有同样的问题。我们从来没有自律到每个项目都手工计算对比度。所以我们写了一个脚本。这个脚本后来变成了 designrift。
我们构建了什么#
带实时预览的可视化主题构建器#
输入一个基色（hex、RGB、HSL 或 OKLCH），选择一种色阶类型，即时看到完整的 12 阶色板渲染出来。预览会把每一阶应用到真实的 UI 元素上：按钮、背景、文本、边框。您在往项目里粘 200 行 CSS 之前，就能看出这套色板是否成立。
构建器在每一层都支持微调：背景色调、文本颜色、边框处理、圆角、间距、色阶分布。输出随您拖动滑块实时更新。
基于 Radix 颜色系统#
色阶建立在 Radix 颜色系统之上，这是一套 12 阶、感知均匀的色阶，每一阶都有明确的语义角色。第 1 阶是应用背景。第 3 到第 5 阶负责交互组件状态。第 6 和第 7 阶是边框。第 11 和第 12 阶是高对比度文本。
这样做的好处是：暗黑模式不再是另一个单独的问题。Radix 团队已经为您算清了在亮色和暗色语境中每一阶在 WCAG 对比度上的合规值。您不需要自己从头推导，直接用这个色阶就行。
designrift 内置 30+ 套 Radix 颜色调色板（gray、slate、sage、olive、sand、gold、bronze、tomato、red、crimson、pink、plum、purple、violet、iris、indigo、blue、cyan、teal、jade、green、grass、lime、mint、sky 以及更多），并配有对应的暗黑模式版本。
CSS 变量与 Tailwind 导出#
每套调色板都以两种格式导出：
CSS 自定义属性：干净、注释清晰的变量文件，使用 --color-[name]-[step] 命名约定。把它放进全局样式表或 CSS 模块即可。
Tailwind CSS 配置：既可以输出 v3 风格、用于 tailwind.config.js 的 JavaScript 对象，也可以输出 v4 风格、用于 Tailwind CSS 优先配置的 @theme 代码块。2025 年发布的 Tailwind v4 转向了 CSS 优先配置，通过 @theme 指令让 CSS 自定义属性成为扩展设计系统的原生方式。designrift 同时支持这两种格式。
其他导出格式还包括用于设计 Token 流水线的 JSON，以及可用于其他任意场景的原始数值。
24+ 主题预设#
对于想要一个起点的开发者，designrift 提供 24 个以上精心挑选的主题预设：Modern Minimal、Amethyst Haze、Catppuccin、Kodama Grove、Quantum Rose、Elegant Luxury 等。每个预设都是一个完整的主题：全部 12 阶色阶、暗黑模式 Token、语义分配。您可以在此基础上自定义，也可以直接导出使用。
内建 WCAG 可访问性#
每一对色阶组合都会显示对比度和 WCAG 合规等级（AA、AAA 或不合格）。在 Token 离开这个工具之前，您就能看到哪些色阶适合哪些 UI 角色。Radix 的基础意味着大多数组合本身已经合格，而对比度检查让少数不合格的组合一目了然。
输出格式#
导出的主题适用于 React、Vue、Angular、Svelte，或纯粹的 HTML/CSS。CSS 自定义属性是通用的；Tailwind 配置面向 Tailwind；JSON 导出可对接任意设计 Token 流水线，包括用于设计师交付的 Figma 插件。
成果#
designrift 已在 designrift.dev 上线，免费、开源，无需注册账户。它内置 30+ 套 Radix 颜色调色板、24+ 主题预设、Tailwind v3 和 v4 导出，以及自动的 WCAG 对比度合规。
它最初是一个内部脚本。当我们意识到自己每次都在从零解决同一个问题、而其他人也是如此时，它就变成了一个面向公众的工具。它并不覆盖复杂设计系统中的所有边角情况，但对那些本来就机械重复的部分，它能胜任。
需要设计系统工具或 UI 工程？了解我们的 UX/UI 设计服务，或预约免费的自动化审计。
