Generador de Tonos de Color - Tintes, Sombras y Tonos desde Cualquier Color Online
Genera tintes, sombras y tonos a partir de un solo color base. Exporta como variables CSS, configuración Tailwind, JSON o SCSS — 100% del lado del cliente.
Preguntas Frecuentes
¿Qué es un Generador de Tonos de Color?
Un Generador de Tonos de Color es una herramienta en línea que crea variaciones sistemáticas de color a partir de un solo color base. Produce tintes (versiones más claras mezclando con blanco), sombras (versiones más oscuras mezclando con negro) y tonos (versiones desaturadas reduciendo la saturación).
¿Cómo uso esta herramienta?
1. Ingrese un color base usando el campo HEX o el selector de color. 2. Elija un modo de vista: Todo, Tintes, Sombras, Tonos o escala Tailwind. 3. Ajuste los pasos (5-25). 4. Seleccione el formato de salida (HEX, RGB o HSL). 5. Haga clic en cualquier muestra para copiar o use las opciones de exportación.
¿Están seguros mis datos de color?
Sus datos de color son 100% seguros y nunca salen de su navegador. Todos los cálculos se realizan completamente del lado del cliente usando operaciones matemáticas de JavaScript. No se transmiten datos a ningún servidor.
¿Cuál es la diferencia entre tinte, sombra y tono?
Un tinte es un color mezclado con blanco (más claro). Una sombra es un color mezclado con negro (más oscuro). Un tono es un color con saturación reducida (más apagado). Estas tres operaciones son las formas fundamentales de crear variaciones manteniendo la identidad del matiz.
¿Cuál es la diferencia con el Generador de Paletas de Color?
El Generador de Paletas crea paletas armoniosas multicolor usando relaciones de teoría del color. El Generador de Tonos se enfoca en variaciones de un solo color. Use el Generador de Paletas para múltiples colores relacionados; use el Generador de Tonos para variaciones de luminosidad/saturación de un color.
¿Puedo usar la paleta en mi proyecto Tailwind CSS?
Sí. La herramienta proporciona una vista Tailwind dedicada con la convención de nombres 50-950. Puede exportar la escala como objeto de configuración Tailwind CSS y pegarlo directamente en su archivo tailwind.config.js.
¿Cómo se calculan los porcentajes?
Los tintes se calculan interpolando linealmente cada canal RGB hacia 255 (blanco). Las sombras interpolan hacia 0 (negro). Los tonos reducen el valor de saturación HSL manteniendo el matiz y la luminosidad constantes.
Ejemplos de Código
// 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));