调色板生成器

从基础色出发，用互补、类似、三角、四角、正方形或单色方案生成调色板。可锁定颜色，并导出 CSS 和 Tailwind 代码。

调色板设置

基础色

配色方案

基础色相 + 相对色相（180°）。

色相旋转方式

锁定喜欢的颜色；点击“重新生成”会随机选择新的基础色，并保留已锁定的颜色。

导出

格式

令牌名称

调色板

#3b82f6

oklch(62.3% 0.188 259.8)

#b07d00

oklch(62.5% 0.129 79.9)

导出代码

:root {
  --palette-1: #3b82f6;
  --palette-2: #b07d00;
}

什么是调色板生成器？

使用经典的色轮配色方案，从一个基础色构建调色板。色相旋转可以在感知均匀的 OKLCH（保持感知明度一致）或经典的 HSL 中进行。重新生成之前可以锁定某些颜色，调色板可以导出为 CSS 变量、SCSS、Tailwind v3 配置、Tailwind v4 @theme 或 JSON。

如何使用调色板生成器

输入“基础色”（十六进制、rgb()、hsl() 或 oklch()），或点击“重新生成”得到一个随机颜色。
选择“配色方案”，以及色相是在 OKLCH 还是 HSL 中旋转。
锁定你想保留的颜色；之后“重新生成”只会替换未锁定的颜色。
点击色块即可复制其十六进制值。
选择导出“格式”和“令牌名称”，并复制代码。

示例

输入

Base #ff0000, Triadic, HSL

输出

:root {
  --palette-1: #ff0000;
  --palette-2: #00ff00;
  --palette-3: #0000ff;
}

何时使用调色板生成器

适合为品牌、界面主题或插画探索配色方案。配色方案只是起点，而不是无障碍检查：请另行验证文字与背景的对比度。要把单个颜色扩展为 50–950 色阶，请使用色阶生成器。

调色板生成器的工作原理

各方案按固定角度旋转基础色相，同时保持饱和度/色度和明度：互补 0°/180°，类似 0°/±30°/±60°，三角 0°/120°/240°，分裂互补 0°/150°/210°，四角 0°/60°/180°/240°，正方形 0°/90°/180°/270°。单色保持色相，并把明度改变 −30、−15、0、+15、+30（HSL %）或 ±0.15/±0.3（OKLCH L）。超出 sRGB 的 OKLCH 颜色会通过降低色度来映射到色域内。重新生成会随机选取一个基础色，色相 0–360°、饱和度 55–85%、明度 45–60%。