Paleta de colores: generador de armonías online
Crea una paleta de colores equilibrada a partir de cualquier color base, con
armonías reales de la teoría del color: complementarios, análogos, triádicos y
más. Bloquea los colores que te gusten, presiona la barra espaciadora para mezclar el
resto y copia el resultado como variables CSS, JSON o lista de códigos
HEX. Todo se calcula en tu navegador: no se sube nada.
#000000 #000000 #000000 #000000 #000000 Matices y sombras de el color seleccionado
A la izquierda, las versiones más claras (matices); a la derecha, las más oscuras (sombras). Haz clic en cualquier casilla para copiar su código HEX: es justo lo que necesitas para estados hover, bordes y fondos del mismo tono.
Cómo usar el generador de paletas
- Elige el color base: selecciónalo en el recuadro, escribe un código HEX o presiona Mezclar para partir de un color al azar.
- Elige la armonía: análoga para un resultado tranquilo, complementaria para máximo contraste, triádica o tetrádica para más variedad, monocromática para un solo tono, o Automática para explorar.
- Bloquea y mezcla: haz clic en el candado de las casillas que quieras conservar y presiona la barra espaciadora para recalcular solo el resto.
- Copia o exporta: haz clic en una casilla para copiar su HEX, o exporta la paleta entera como variables CSS, JSON o lista de HEX.
Las armonías de color, explicadas
Todas parten de la misma idea: colocar los tonos en un círculo para que sus relaciones se vean. Los colores análogos son vecinos en la rueda y comparten casi siempre la misma temperatura, así que el conjunto se percibe sereno. Los complementarios están enfrentados, y esa oposición da el mayor contraste de tono posible: es lo que hace que un botón salte del fondo. Los triádicos reparten tres colores a la misma distancia alrededor del círculo, con lo que ninguno domina y el resultado es vivo pero equilibrado.
| Armonía | Posición en la rueda | Efecto y uso recomendado |
|---|---|---|
| Análoga | base ± 20–40° | Serena y unificada: naturaleza, marcas suaves, fondos. |
| Monocromática | un solo tono, distinta luminosidad | Elegante y sobria: marcas de un color, interfaces limpias. |
| Complementaria | base y +180° | Contraste máximo: llamadas a la acción, deporte, diseños enérgicos. |
| Complementaria dividida | base, +150°, +210° | Contraste fuerte, más fácil de equilibrar que la complementaria pura. |
| Triádica | base, +120°, +240° | Viva y equilibrada: marcas ilustradas, productos infantiles. |
| Tetrádica (cuadrado) | base, +90°, +180°, +270° | Rica y variada: usa un color principal y tres acentos. |
El generador solo gira el tono y deja casi intactas la saturación y la luminosidad: por eso el resultado parece una familia y no cinco elecciones sueltas.
HEX, RGB y HSL: tres formas de escribir el mismo color
En una pantalla, cualquier color se forma mezclando luz roja, verde y azul. RGB
lo dice tal cual: tres canales de 0 a 255, es decir 256 × 256 × 256 = 16.777.216 combinaciones.
HEX es lo mismo escrito en base 16, con dos dígitos por canal: en
#4F46E5, 4F es el rojo, 46 el verde y E5 el
azul. Son notaciones distintas del mismo número, así que convertir nunca cambia el color.
HSL describe el mismo color de otra manera: tono (el ángulo de 0° a 360° en la rueda), saturación (cuánta intensidad tiene) y luminosidad (cuánto se acerca al blanco o al negro). Ahí está su ventaja: en HEX o RGB, aclarar un color obliga a recalcular los tres canales a ojo, y casi siempre se desvía el tono por el camino. En HSL basta subir la luminosidad y el tono se mantiene. Las armonías también se vuelven aritmética simple, porque el tono es un ángulo: el complementario se obtiene sumando 180°, la tríada sumando 120° y 240°, y el cuadrado dando cuatro saltos de 90°. Por eso esta herramienta calcula en HSL y te entrega el resultado en HEX, que es lo que entienden CSS y las aplicaciones de diseño. Eso sí, HSL no es perceptualmente uniforme: un amarillo y un azul con la misma cifra de luminosidad no se ven igual de claros, así que toda paleta necesita un último ajuste a ojo.
La regla 60-30-10: la proporción importa tanto como la elección
Un error habitual es dar a los cinco colores de una paleta el mismo protagonismo. La regla más duradera viene del interiorismo: dedica alrededor del 60 % de la superficie a un color dominante (casi siempre un neutro o un matiz muy claro: fondos y grandes áreas), un 30 % a un secundario que lo acompañe y le dé profundidad, y solo un 10 % a un acento saturado que reserves para lo que de verdad quieres que se pulse: botones, enlaces y avisos. Las cifras exactas no son sagradas; la jerarquía sí.
Aplicado aquí: la casilla más neutra como fondo, un tono intermedio de la armonía como secundario y el más saturado como acento. La tira de matices y sombras cubre el resto —el hover del botón, el borde tenue, el gris del texto desactivado—, y al final casi siempre usarás menos tonos y más niveles de luminosidad de los que esperabas.
Accesibilidad: la armonía no garantiza que se lea
Una paleta puede ser perfectamente armónica e ilegible al mismo tiempo. La armonía describe cómo se relacionan los tonos; la accesibilidad, si una persona puede distinguir dos colores contiguos. La referencia son las Pautas de Accesibilidad para el Contenido Web (WCAG 2): para el nivel AA, el texto de tamaño normal necesita una relación de contraste mínima de 4,5:1 con su fondo, y el texto grande (unos 18 pt, o 14 pt en negrita) al menos 3:1. Dos tonos medios complementarios suelen fallar esa prueba cuando uno es texto sobre el otro, y un esquema monocromático falla a menudo porque sus luminosidades quedan demasiado cerca.
Comprueba en lugar de suponer. Asigna primero un papel a cada color —cuál es fondo, cuál lleva texto, cuál es el acento pulsable— y luego verifica cada pareja de texto y fondo contra el umbral de 4,5:1 (o 3:1) con nuestro comprobador de contraste WCAG. Y no confíes el significado solo al tono: quien no distingue el rojo del verde no verá la diferencia entre tu color de éxito y el de error, así que acompáñalo con un icono o una etiqueta.
Cómo elegir la paleta de una marca o una página web
Empieza por el ancla, no por el conjunto. Si ya tienes un color de marca, escribe su HEX en el
recuadro de arriba, bloquéalo y mezcla hasta que los acompañantes te convenzan;
si partes de cero, elige el tono que quieras que la gente recuerde y deja que la armonía haga el
resto. Después reparte los papeles con la regla 60-30-10, genera las escaleras de matices y
sombras de los dos o tres colores que conserves y añade un neutro. Para que ese neutro no parezca
prestado de otra paleta, evita #000000 y #FFFFFF puros: parte de tu
color principal y llévalo a una luminosidad muy alta para los fondos y muy baja para el texto.
Antes de darla por buena, pruébala en su sitio real y no en cinco cuadrados: aplícala a un botón, un titular y un párrafo largo, míralo en el móvil, y exporta las variables CSS para tener los colores definidos en un único lugar del código.
Preguntas frecuentes
- ¿Qué es una paleta de colores?
- Es el conjunto reducido de colores con el que se construye un diseño: un color dominante, uno o dos de apoyo, un acento y los neutros. Lo que convierte a un grupo de colores en una paleta es que sus tonos guardan una relación deliberada —normalmente una armonía de la rueda de color— y que cada uno tiene un papel asignado.
- ¿Cuántos colores debe tener una paleta?
- Lo habitual es un color principal, uno o dos secundarios, un acento y una familia de neutros. Aquí se generan cinco casillas porque es un punto de partida cómodo, pero rara vez conviene usar cinco tonos saturados con el mismo peso: en una interfaz real, la variedad sale de los niveles de luminosidad de la tira de matices y sombras, no de añadir más tonos.
- ¿Cómo bloqueo un color y mezclo el resto?
- Haz clic en el candado de la casilla que quieras conservar. Al presionar Mezclar o la barra espaciadora, las casillas sin bloquear se recalculan alrededor de un tono base nuevo y las bloqueadas se quedan igual. Es la forma más rápida de trabajar: bloquea el color que ya te gusta, mezcla hasta que el resto encaje y exporta.
- ¿Se sube algo a un servidor y es gratis?
- Es gratis, sin registro, y no se sube nada. Todos los cálculos —convertir entre HEX, RGB y HSL, girar el tono en la rueda y generar los matices y sombras— se ejecutan en tu navegador, así que sigue funcionando sin conexión una vez cargada la página y tus colores nunca salen de tu dispositivo.