Loading...
Loading...
从一个基础色相生成协调配色,或描述一种氛围让你自己的 AI 引擎给出建议,再导出为 CSS、Tailwind 或 token。
好的配色组合在色环上遵循可预测的关系,但靠肉眼去凑既慢又容易出错。这个生成器用互补、邻近、三角和单色等规则,从一个基础色相搭出协调配色,再用规范的浅色和深色梯度把它补全。
如果你更想从一种感觉而非十六进制值出发,描述一种氛围,让你自己配置的 AI 引擎提出一组配色供你打磨。无论哪种方式,你都能把结果导出为 CSS 变量、一段 Tailwind 配置或设计 token JSON,粘贴进项目即用。配色运算在你的浏览器里完成,可选的 AI 一步使用你自己的 API key。
用真实的色环关系,从一个基础色相生成互补、邻近、三角和单色配色。
每个颜色都扩展成一整套由浅到深的台阶,正是你做背景、边框和悬停态时需要的那种。
输入像「平静的海边清晨」这样的词,让你配置的 AI 引擎给出一组起始配色,再由你微调。
复制一段现成的自定义属性,直接放进样式表,立刻基于它做主题。
得到一个为 tailwind.config 准备好的 colors 对象,让你的配色无需手敲就接入工具类。
生成设计 token JSON,便于交付给设计师,或导入消费结构化 token 格式的工具。
先定中性色和背景色,再加一个强调色。大多数精致界面用到的颜色远比人们以为的少,所以别急着把每个槽位都填满。
选一个基础色相,或描述一种氛围让 AI 给出起点。
挑一条和谐规则(互补、邻近、三角或单色)来生成配色。
查看浅色和深色梯度,调到对比度看起来合适为止。
导出为 CSS 变量、一段 Tailwind 配置或 token JSON,粘贴进你的项目。
几分钟内搭出一套完整的配色系统,连色阶梯度都齐了,而不必逐个数值手挑。
快速切换各种和谐规则与氛围,在锁定单一品牌色之前先找到方向。
把一个已确定的品牌色,扩成设计系统所需的整套背景、表面和边框台阶。
按你技术栈期望的确切格式导出 token,让配色无误地落进代码,免去手动誊抄出错。
基于 React 与 TypeScript 构建,完全在客户端运行。和谐运算与梯度生成都在浏览器里完成,可选的氛围功能则直接调用你自己的 OpenAI 兼容端点,中间没有我们的任何服务器。
你的颜色和导出内容从不离开浏览器。唯一会发往别处的数据,是你选择发给 AI 的氛围描述,而它直接发往你配置的端点。
配色生成和导出都是即时的,因为它们只是本地完成的简单运算。唯一耗时的环节是可选的 AI 建议,这取决于你服务商的速度。