kigen Color Generator

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 以及其它设计软件中使用。