预设
:root {
--color-1: #3b82f6;
--color-2: #f6af3b;
}功能说明
Color Palette Generator 用经典色彩理论规则把任意基础色变成和谐的调色板：互补色、分裂互补、类比色、三角、四角和单色。选一个颜色、选一种和谐关系，即可得到一组开箱即用的色板，并支持一键复制。整个调色板可以导出为 CSS 自定义属性、Tailwind 配置片段或纯 JSON。一切 100% 客户端运行：没有任何数据离开你的浏览器。
使用方法
- 用色板选择基础色，或在文本框中输入 hex 值（例如
#3B82F6）。点击 Randomize 掷出一个新的基础色。 - 选择一种和谐方案 - Complement、Split-Complement、Analogous、Triadic、Tetradic 或 Monochromatic。选 Monochromatic 时需设置步数（2-9）。
- 点击任意色板即可复制它的 hex - 值直接显示在颜色上，以黑色或白色呈现，取更清晰可读的那个。
- 在 Export 面板中选择 CSS / Tailwind / JSON，点击 Copy export 一次性获取整个调色板。
- 点击 Copy link 获取可分享的 URL - 基础色、方案和步数都编码在链接中，任何人打开它看到的都是你的精确调色板。
示例
红色的互补配色
基础色 #FF0000 → [ #FF0000, #00FFFF ] - 红与青，色轮上正对的两端。
Tailwind 导出
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
palette: {
'1': '#3b82f6',
'2': '#f59e0b',
},
},
},
},
};CSS 变量导出
:root {
--color-1: #3b82f6;
--color-2: #f59e0b;
}补充说明
- **Monochromatic（单色）**保持基础色的色相和饱和度，把亮度铺开到所选的步数上 - 非常适合构建 UI 色阶。
- 私密： 所有生成都在浏览器本地完成 - 对专有品牌颜色也是安全的。
- 可分享： 每个调色板都有自己的 URL - 基础色、和谐方案和步数保存在链接的
hashhashA one-way function that maps data of any size to a fixed-length digest. Same input, same digest; any change, different digest; not reversible.
中，因此收藏或分享都能重新加载出完全相同的调色板。 - 格式： hex 是唯一事实来源；HSL 仅供参考，并用于内部的和谐关系计算。
- 相关工具： 在 Color & Design 分类中查找渐变和对比度工具。