Generador de paletas de colores
Elige un color base y obtén al instante una paleta armónica: complementaria, análoga, triádica, tetrádica, cuadrada, complementaria dividida o monocromática. Copia cada color con un clic o exporta la paleta como variables CSS, SCSS o JSON.
Cómo usar el generador de paletas
- Escribe el HEX de tu color principal (el de tu logotipo, por ejemplo) o elígelo con el selector. Si lo tienes en RGB o CMYK, conviértelo antes con el conversor de colores.
- Elige el tipo de armonía. La paleta se recalcula al momento.
- Pulsa cualquier muestra para copiar su HEX, o copia el bloque de código en el formato que uses en tu proyecto.
Si no tienes color de partida, prueba con un color aleatorio o extrae la paleta de una foto con colores de una imagen.
Cómo se calculan las armonías
El color base se pasa al modelo HSL (tono, saturación, luminosidad) y se gira su tono (H) alrededor del círculo cromático, conservando saturación y luminosidad:
| Armonía | Giros de tono | Carácter |
|---|---|---|
| Complementaria | 0°, 180° | Máximo contraste; ideal para destacar un botón |
| Análoga | −60°, −30°, 0°, +30°, +60° | Tranquila y natural; poco contraste de tono |
| Triádica | 0°, 120°, 240° | Viva y equilibrada; difícil de usar a partes iguales |
| Complementaria dividida | 0°, 150°, 210° | Contraste alto pero menos tenso que la complementaria |
| Tetrádica (rectángulo) | 0°, 60°, 180°, 240° | Rica; conviene que un color domine |
| Cuadrada | 0°, 90°, 180°, 270° | Cuatro tonos equidistantes, muy variada |
| Monocromática | 0° (cambia la luminosidad) | Sobria y coherente; perfecta para interfaces |
Las variantes claras y oscuras se obtienen moviendo la luminosidad de forma proporcional: un 50 % «más claro» recorre la mitad de la distancia que queda hasta el blanco (luminosidad 96 %), y un 45 % «más oscuro» recorre esa proporción hacia el negro (8 %). Así, un color ya oscuro no se convierte de golpe en negro.
Ejemplo con el rojo #E63946
El rojo #E63946 tiene tono 355°, saturación 78 % y luminosidad 56 %. Sus armonías principales son:
- Complementaria: el cian
#39E6D9(355° + 180° = 175°), con su versión clara#93F1EA. - Triádica: el verde
#46E639(115°) y el azul#3946E6(235°). - Monocromática: de un granate oscuro a un rosa pálido, ideal para fondos de alertas de error.
En una interfaz real, la complementaria pura suele ser demasiado estridente: usa el rojo para el botón de acción, el cian muy desaturado para fondos y deja la mayor parte de la superficie en neutros.
Consejos para usar la paleta
- Aplica la regla 60-30-10: un color dominante (a menudo un neutro), uno secundario y un acento para llamadas a la acción.
- Comprueba la legibilidad: antes de poner texto sobre un color de la paleta, mide su contraste con el comprobador de contraste.
- Piensa en el daltonismo: las paletas rojo-verde son las más problemáticas. Revisa tus diseños con el simulador de daltonismo.
- Usa variables CSS: si defines
--color-1en:rooty lo usas en todo el sitio, cambiar la paleta entera es cuestión de segundos. - Para transiciones suaves entre dos colores de la paleta, crea un fondo con el generador de degradados.
Si el color base es casi gris (saturación muy baja), girar el tono no produce colores distintos. En ese caso la herramienta te avisa: usa la paleta monocromática o parte de un color más saturado.
Preguntas frecuentes
¿Qué es una paleta complementaria?
La que combina un color con el opuesto en el círculo cromático (a 180°), por ejemplo rojo y cian o azul y naranja. Da mucho contraste, por lo que suele usarse un color como dominante y el otro solo para acentos.
¿Cuántos colores debe tener una paleta para una web?
Lo habitual es un color principal, uno o dos secundarios o de acento, y una escala de grises para texto, fondos y bordes. Más colores de marca suelen restar coherencia.
¿Qué es la regla 60-30-10?
Una pauta de reparto: el 60 % de la superficie con un color dominante (normalmente neutro), el 30 % con un secundario y el 10 % con el acento, que se reserva para llamadas a la acción.
¿Por qué los colores de la paleta no parecen igual de claros?
Porque el modelo HSL no es perceptualmente uniforme: con la misma luminosidad, un amarillo parece mucho más claro que un azul. Ajusta a ojo o comprueba la legibilidad con el comprobador de contraste.