调色板生成器 - 创建配色方案 在线
基于色彩理论创建和谐调色板。用交互式色轮生成互补色、类似色、三等分色和分裂互补色方案。
常见问题
什么是调色板生成器？
调色板生成器是一个基于色彩理论原理创建和谐色彩组合的在线工具。给定一个基础颜色，它使用色轮上的数学关系（如互补色、类似色或三角色和谐）来计算相关颜色，生成视觉上令人愉悦的调色板。
如何使用这个工具？
使用交互式色轮选择基础颜色，或输入HEX/RGB/HSL值。选择和谐模式（互补色、类似色、三角色、四角色、分裂互补或单色）。查看生成的调色板。锁定个别颜色并重新生成其他颜色。以CSS变量、Tailwind配置、JSON或SCSS变量格式导出。
我的颜色数据安全吗？
您的颜色数据100%安全，永远不会离开您的浏览器。所有颜色计算都使用客户端JavaScript执行。没有数据会传输到任何服务器，使此工具可安全用于探索品牌颜色。
什么是色彩和谐？
色彩和谐是基于色轮位置的美观色彩组合。六种主要和谐类型：互补色（高对比度）、类似色（宁静感）、三角色（平衡调色板）、四角色（丰富方案）、分裂互补（较少张力的高对比度）和单色（统一优雅外观）。
这个工具与颜色转换器有什么区别？
颜色转换器专注于颜色格式之间的转换。调色板生成器专为调色板创建而设计，具有交互式色轮、六种和谐模式、调色板锁定、明暗色阶生成和多种导出格式。
我可以在Tailwind CSS项目中使用生成的调色板吗？
可以。该工具提供Tailwind CSS配置导出，生成带有色阶值（50-900）的即用颜色对象。您可以复制输出并直接添加到tailwind.config.js文件的colors键中。
什么是明暗色阶？
明暗色阶从基础颜色生成10个变化，范围从非常浅（50）到非常深（900）。这遵循Tailwind CSS和流行设计系统使用的命名约定。浅色通过增加亮度创建，深色通过降低亮度创建。
代码示例
// Color Palette Generator
function hslToHex(h, s, l) {
s /= 100;
l /= 100;
const a = s * Math.min(l, 1 - l);
const f = (n) => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0');
};
return `#${f(0)}${f(8)}${f(4)}`;
}
function generatePalette(baseHue, saturation, lightness, harmonyType) {
let hues;
switch (harmonyType) {
case 'complementary':
hues = [baseHue, (baseHue + 180) % 360];
break;
case 'analogous':
hues = [(baseHue - 30 + 360) % 360, baseHue, (baseHue + 30) % 360];
break;
case 'triadic':
hues = [baseHue, (baseHue + 120) % 360, (baseHue + 240) % 360];
break;
case 'monochromatic':
return [15, 30, 50, 70, 85].map(l => hslToHex(baseHue, saturation, l));
default:
hues = [baseHue];
}
return hues.map(h => hslToHex(h, saturation, lightness));
}
const palette = generatePalette(220, 70, 50, 'triadic');
console.log(palette);