kigen Color Generator

kigen Color Generator是什么？

Kigen Color Generator是一个在线配色方案生成工具，专为设计师、前端开发者和内容创作者打造，在这里，您可以快速生成您所需的Tailwind CSS 体系渐变色阶、色彩变量以及视觉对照色方案，然后在线查看色阶、导出多种格式的 CSS 变量，极大提升设计一致性与落地效率。

核心功能

• 色阶生成：自动生成 50–950 阶层次的配色，例如 Aquamarine Blue 系列色（从 #c7fafb 到 #051313）
• CSS 变量导出：一键导出 Tailwind CSS / SCSS / HSL / RGBA / OKLCH 的变量代码块
• 命名支持：支持色阶命名规则如 aquamarine-blue-50 / -100 等
• 对比度与可读性调整：可设置对比度偏移值，便于打造高可读性界面
• SVG/Figma 支持：提供 SVG 格式输出，便于在设计工具如 Figma 中使用
• 本地复制：无需注册即可在线生成并复制完整配色代码片段 

适用场景与人群

• UI/UX 设计师：快速生成符合设计系统的主题配色
• 前端开发者：构建 Tailwind 样式或 CSS 变量体系
• 品牌创作者：打造统一色彩语言并输出至 Figma 或网页
• 壁纸/图像作者：根据主题生成主辅色，提升视觉协调度 

kigen Color Generator官网及使用教程

官网网址：https://kigen.design/color

1. 打开工具页面：访问Kigen Color Generator官网，进入配色生成器界面。

2. 配置参数

3. 预览色阶：自动生成一层层由亮到深的色阶列表，每层都有对应的 Hex 颜色值，例如：

--aquamarine-blue-50: #c7fafb  --aquamarine-blue-500: #479091  --aquamarine-blue-950: #051313  

你可以逐阶查看并确认配色的完整性和渐变效果。

4. 导出配色方案：点击下方导出格式，直接复制对应代码Tailwind CSS、SCSS/CSS 变量、RGBA / HSL / OKLCH、SVG 矢量格式（Figma）。

例如 CSS 变量输出为：

:root {  --aquamarine-blue-50: #c7fafb;  --aquamarine-blue-100: #7aedef;  ...}

5. 应用到项目：把色阶的代码片段复制粘贴到我们的样式文件中，完成配色系统搭建。或者把 SVG 导入 Figma 或其他设计软件。

常见问题解答（FAQ）

Q1：Kigen Color Generator 是否免费使用？
A1：是的，Kigen是一个完全免费使用的网站工具，无需登录就可以使用并复制配色码。

Q2：支持导出的格式有哪些？
A2：输出格式的配色变量（Tailwind CSS、SCSS / 原生 CSS、RGBA / HSL / OKLCH、SVG 矢量格式- Figma）。

Q3：是否可以自定义主色？
A3：当然可以，你只需要在最上方的输入框里面填写你需要的主色 Hex 值（例如 #7aedef)，剩下的交给我们的工具来生成整个色阶就好。

Q4：如何控制色阶的明暗程度？
A4：你还可以改“对比度偏移”(0.1)，改变单色间的明暗临界线，使颜色更加分明。

Q5：是否支持导出至设计软件？
A5：支持。您可以将制作的色阶导出 SVG 格式，在 Figma、Sketch 以及其它设计软件中使用。