颜色阴影生成器 - 从任意颜色生成色调、阴影和色度 在线
从单一基础颜色生成色调、阴影和色度变体。导出为CSS变量、Tailwind配置、JSON或SCSS — 100%客户端处理。
常见问题
什么是颜色阴影生成器？
颜色阴影生成器是一个在线工具，可以从单一基础颜色创建系统化的颜色变体。它生成色调（与白色混合使其变亮）、阴影（与黑色混合使其变暗）和色度（降低饱和度使其柔和）。
如何使用这个工具？
1. 使用HEX输入或颜色选择器输入基础颜色。2. 选择视图模式：全部、色调、阴影、色度或Tailwind色阶。3. 调整步数（5-25）。4. 选择输出格式（HEX、RGB、HSL）。5. 点击色块复制或使用导出选项。
我的颜色数据安全吗？
您的颜色数据100%安全，永远不会离开浏览器。所有计算完全在客户端使用JavaScript数学运算执行。
色调、阴影和色度有什么区别？
色调是与白色混合的颜色（更亮）。阴影是与黑色混合的颜色（更暗）。色度是降低饱和度的颜色（更柔和）。这三种操作是在保持核心色相特征的同时创建变体的基本方法。
这个工具和颜色调色板生成器有什么区别？
颜色调色板生成器使用色彩理论关系创建多色和谐调色板。颜色阴影生成器专注于单一颜色的变体。需要多种相关颜色时使用调色板生成器，需要从一种颜色获取亮度/饱和度变体时使用阴影生成器。
可以在Tailwind CSS项目中使用吗？
可以。工具提供使用标准50-950命名约定的专用Tailwind视图。您可以将色阶导出为Tailwind CSS配置对象。
色调和阴影的百分比是如何计算的？
色调通过将每个RGB通道向255（白色）线性插值计算。阴影向0（黑色）插值。色度降低HSL饱和度值。
代码示例
// Color Shades Generator
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) return null;
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
};
}
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0'))
.join('');
}
function generateTints(hex, steps = 10) {
const rgb = hexToRgb(hex);
if (!rgb) return [];
const tints = [];
for (let i = 1; i <= steps; i++) {
const factor = i / (steps + 1);
tints.push(rgbToHex(
rgb.r + (255 - rgb.r) * factor,
rgb.g + (255 - rgb.g) * factor,
rgb.b + (255 - rgb.b) * factor,
));
}
return tints;
}
function generateShades(hex, steps = 10) {
const rgb = hexToRgb(hex);
if (!rgb) return [];
const shades = [];
for (let i = 1; i <= steps; i++) {
const factor = 1 - i / (steps + 1);
shades.push(rgbToHex(
rgb.r * factor,
rgb.g * factor,
rgb.b * factor,
));
}
return shades;
}
// Usage
const base = '#3b82f6';
console.log('Tints:', generateTints(base, 5));
console.log('Shades:', generateShades(base, 5));