Generador de Paletas de Colores - Crear Esquemas de Color Online
Crea paletas de colores armoniosas usando teoría del color. Genera esquemas complementarios, análogos, triádicos con rueda de colores interactiva.
Preguntas Frecuentes
¿Qué es un Generador de Paleta de Colores?
Un generador de paleta de colores es una herramienta en línea que crea conjuntos armoniosos de colores basados en principios de teoría del color. Dado un color base, calcula colores relacionados usando relaciones matemáticas en la rueda de colores (como armonías complementarias, análogas o triádicas) para producir paletas visualmente agradables.
¿Cómo uso esta herramienta?
Seleccione un color base usando la rueda de colores interactiva, o escriba un valor HEX/RGB/HSL. Elija un modo de armonía (Complementario, Análogo, Triádico, Tetrádico, Complementario Dividido o Monocromático). Vea la paleta generada como muestras de color. Bloquee colores individuales y regenere otros. Copie colores o exporte como variables CSS, configuración Tailwind, JSON o variables SCSS.
¿Mis datos de color están seguros?
Sus datos de color están 100% seguros y nunca salen de su navegador. Todos los cálculos de color se realizan del lado del cliente usando JavaScript. No se transmiten datos a ningún servidor, lo que hace que esta herramienta sea segura para explorar colores de marca propietarios.
¿Qué son las armonías de color?
Las armonías de color son combinaciones de colores estéticamente agradables basadas en sus posiciones en la rueda de colores. Los seis tipos principales son: Complementario (alto contraste), Análogo (sensación serena), Triádico (paleta equilibrada), Tetrádico (esquema diverso), Complementario Dividido (alto contraste con menos tensión) y Monocromático (aspecto elegante y unificado).
¿Cuál es la diferencia entre esta herramienta y el Convertidor de Color?
El Convertidor de Color se centra en la conversión entre formatos (HEX, RGB, HSL, CMYK). El Generador de Paleta de Colores está diseñado específicamente para la creación de paletas con una rueda de colores interactiva, seis modos de armonía, bloqueo de paleta, generación de escala de tonos y múltiples formatos de exportación.
¿Puedo usar las paletas generadas en mi proyecto Tailwind CSS?
Sí. La herramienta proporciona una exportación de configuración Tailwind CSS que genera un objeto de color listo para pegar con valores de tonos (50-900). Puede copiar la salida y agregarla directamente a su archivo tailwind.config.js.
¿Qué es una escala de tonos?
Una escala de tonos genera un rango de 10 variaciones de color desde muy claro (50) hasta muy oscuro (900). Esto sigue la convención de nombres de Tailwind CSS y sistemas de diseño populares. Los tintes se crean aumentando la luminosidad y las sombras disminuyéndola.
Ejemplos de Código
// 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);