El generador de paletas de colores convierte un tono inicial en un conjunto terminado de colores armónicos. Eliges un modo de armonía y un tono base, y el generador coloca los colores compañeros por ti: la vista por defecto es un par complementario, el azul #428CD7 y el naranja #D78C42, calculado en el instante en que se carga la página. Todo funciona en el navegador, así que las paletas que construyes se quedan en tu dispositivo.
Cinco modos de armonía, un control
Los cinco botones de modo son el corazón de la herramienta. Complementario da 2 colores, el tono base y el tono a 180 grados. Análogo da 4, a 30 y 60 grados de un lado y 30 grados del otro. Triádico da 3, separados 120 grados. Tetrádico da 4, a 90, 180 y 270 grados. Complementario dividido da 3, a 150 y 210 grados. El control de tono va de 0 a 360 y por defecto está en 210, un azul medio, y todas las desviaciones dan la vuelta a la rueda, así que una base de 340 en modo análogo produce tonos en 340, 10, 40 y 310.
Saturación y luminosidad fijas, 65 y 55
No hay controles de saturación ni de luminosidad, porque ambas son constantes: cada color que genera la herramienta se calcula con 65% de saturación y 55% de luminosidad, y solo cambia el tono, de un modo a otro y al arrastrar el control. Eso mantiene todos los colores de la paleta con el mismo peso visual, así que el conjunto se lee como una familia y no como un montón aleatorio. La conversión en sí es el algoritmo estándar de HSL a hexadecimal, y el resultado siempre es un código hex de 7 caracteres en mayúsculas, como #428CD7.
La paleta se actualiza en vivo
No hay botón de generar. La paleta se recalcula cada vez que haces clic en un botón de modo o mueves el control, así que las muestras siguen tu entrada sin paso intermedio. Haz clic en tetrádico y de inmediato tienes cuatro muestras en vez de dos; mueve el tono unos grados y todas las muestras se desplazan en la misma dirección. Eso hace la exploración rápida: puedes barrer toda la rueda en segundos y parar donde el conjunto se vea bien.
El botón de aleatorizar
El botón de dados elige un tono entero entre 0 y 359, salta el control a ese valor y conserva el modo que ya habías elegido, y entonces la paleta se recalcula exactamente como si hubieras arrastrado el control hasta allí tú mismo. Es una forma rápida de sacudirse un color al que sigues volviendo: tira un par de veces hasta que un tono base encaje, y después afina a mano con el control.
Copiar colores, uno a uno o todos de golpe
Hacer clic en cualquier muestra copia ese valor hex a tu portapapeles, por ejemplo #8C42D7 del conjunto análogo en tono 210. El botón copiar todo copia en cambio la paleta completa como una lista separada por comas, como #428CD7, #D78C42 para el par complementario por defecto. Los valores siempre son hex de seis dígitos en mayúsculas, que se pegan directamente en CSS, en archivos de diseño o en un mensaje de chat sin ningún reformato.
Por qué la etiqueta de una muestra cambia entre blanco y oscuro
Cada muestra muestra su valor hex al pasar el ratón, con texto blanco o casi negro según qué tan clara sea la base. La comprobación es una puntuación simple de luminancia: los canales rojo, verde y azul se ponderan 0.299, 0.587 y 0.114, y si la puntuación es estrictamente mayor que 186 la etiqueta usa texto oscuro, en caso contrario blanco. Es una heurística rápida de brillo, no una relación de contraste WCAG: mantiene la etiqueta legible, pero no te dice si el texto sobre ese color pasaría los umbrales de accesibilidad.
Qué guarda la herramienta, y a dónde ir a continuación
No se guarda nada y nada sale de tu navegador; el modo y el tono viven solo en la página, y una recarga reinicia la herramienta al modo complementario en tono 210. Cuando tengas una paleta que te guste, ponla a trabajar: usa el Convertidor de colores para pasar los valores hex a rgb() o hsl() en tu hoja de estilos, pasa las combinaciones de primer plano y fondo por el Verificador de contraste WCAG antes de convertirlas en texto definitivo, y entrega el conjunto al Generador de degradados CSS si quieres estirarlo en un banner. Para el método completo detrás de esas comprobaciones, la guía del verificador de contraste recorre los cuatro umbrales paso a paso.