Rotación del tono
H_k = (H + δ_k) mod 360
δ vale 180° (complementaria), ±30° (análoga), 120° y 240° (triádica), 150° y 210° (complementaria dividida), 90°, 180° y 270° (tetrádica).
Generador de paletas de colores
Elige un color base y una armonía: la paleta aparece en muestras HEX y HSL para copiar, con sus variables CSS.
- Portapapeles
Color base
Código HEX, rgb() o hsl(); la transparencia se ignora.
Color no reconocido: escribe un código HEX, un valor rgb() o hsl().
Paleta
Variables CSS
¿Te ha resultado útil esta herramienta?
¿Cómo funciona esta herramienta?
Una paleta armónica se basa en colores situados a ángulos precisos del círculo cromático: opuestos para un contraste fuerte, vecinos para un ambiente suave, repartidos en triángulo para un conjunto equilibrado. Este generador parte de un color base, el tuyo o el de una marca, y calcula seis armonías clásicas listas para copiar en HEX, en HSL o como variables CSS.
Escribe el color base en HEX, rgb() o hsl(), o elígelo en el selector. Se convierte en tono, saturación y luminosidad (HSL); la transparencia, si la hay, se ignora.
En las armonías de tono, la saturación y la luminosidad son las del color base y solo gira el tono: Complementaria añade el color a 180°, Análoga los vecinos a −30° y +30°, Triádica los colores a 120° y 240°, Complementaria dividida los de 150° y 210°, Tetrádica (cuadrado) los de 90°, 180° y 270°. Monocromática conserva tono y saturación y crea cinco luminosidades, de −30 a +30 puntos, limitadas entre el 5 y el 95 %.
Cada muestra indica su código HEX y su valor HSL, con texto negro o blanco elegido según la luminancia para que se lea bien. Un clic copia el código HEX; el bloque Variables CSS recoge toda la paleta como --color-1, --color-2…
Cómo utilizar esta herramienta
Elige el color base
Escribe un código como #3366FF o usa el selector de color.
Selecciona la armonía
Complementaria, análoga, triádica, complementaria dividida, tetrádica o monocromática: la paleta se actualiza al instante.
Copia los colores
Pulsa una muestra para copiar su código HEX o copia el bloque de variables CSS.
Cálculo de las armonías
El color base se convierte a HSL; las armonías desplazan el tono un ángulo fijo o desplazan la luminosidad.
Luminosidades monocromáticas
L_k = mín(95, máx(5, L + λ_k))
λ vale −30, −15, 0, +15 y +30 puntos porcentuales.
- H, L
- tono (en grados) y luminosidad (en %) del color base
- δ_k
- desplazamiento de tono del k-ésimo color
- λ_k
- desplazamiento de luminosidad del k-ésimo color monocromático
Casos de uso
Ampliar un color de marca
Encuentra un acento complementario o tonos vecinos alrededor del azul de un logotipo.
Crear matices de interfaz
Genera cinco luminosidades de un mismo tono para fondos, bordes y estados al pasar el ratón.
Colorear un gráfico
Obtén tres o cuatro colores bien distintos para las series de un gráfico o un mapa.
Ejemplos
Armonía complementaria y triádica de un azul
225 + 180 = 405, es decir 45°: un amarillo dorado. En triádica, 225 + 120 = 345° (rosa frambuesa) y 225 + 240 = 465, es decir 105° (verde). Saturación y luminosidad siguen en 100 % y 60 %.
Entrada
Color base #3366FF (hsl(225, 100%, 60%)), armonía Complementaria y luego TriádicaResultado
Complementaria: #3366FF y #FFCC33; triádica: #3366FF, #FF3366 y #66FF33Paleta monocromática del mismo azul
La luminosidad del 60 % pasa a 30, 45, 60, 75 y 90 %: dos tonos oscuros para texto o botones y dos claros para fondos.
Entrada
Color base #3366FF, armonía MonocromáticaResultado
#002699, #0039E6, #3366FF, #809FFF, #CCD9FFConsejos y buenas prácticas
- Una paleta complementaria muy saturada vibra mucho: reserva el segundo color para acentos (botones, enlaces) y no para grandes superficies.
- Parte de un color poco saturado para obtener una paleta más sobria: todas las armonías de tono heredan su saturación.
- Comprueba el contraste del texto sobre cada color antes de usarlo para contenido y prueba la paleta con el simulador de daltonismo.
- Las armonías se calculan en el círculo HSL: dos colores con la misma luminosidad HSL pueden parecer más o menos claros a la vista (un amarillo parece más luminoso que un azul).
Fuentes y referencias
- W3C, CSS Color Module Level 4 (se abre en una pestaña nueva)Página en inglés
Preguntas frecuentes
¿Cuántos colores tiene cada paleta?
Dos en complementaria, tres en análoga, triádica y complementaria dividida, cuatro en tetrádica y cinco en monocromática. El color base siempre se incluye.
¿Qué armonía elijo?
Complementaria para un contraste marcado, análoga para un ambiente homogéneo, triádica o tetrádica para varios colores distintos y monocromática para una interfaz sobria.
¿Por qué todos los colores tienen la misma saturación?
Las armonías de tono solo giran el tono; la saturación y la luminosidad se toman del color base, lo que mantiene un conjunto coherente.
¿Los códigos copiados son exactos?
Sí. Cada color se calcula en HSL y se convierte a HEX con canales redondeados a enteros, en un formato que aceptan todos los navegadores.
¿Cómo uso las variables CSS?
Pega el bloque :root en tu hoja de estilos y usa var(--color-1), var(--color-2)… en tus reglas.
¿Se guarda o se envía mi color?
No. La paleta se calcula en tu navegador y no se conserva nada al cerrar la página.
Herramientas relacionadas
Continúa con estas herramientas
Herramientas similares o complementarias a esta.
Herramientas similares
Convierte un color entre HEX, RGB y HSL con sus valores equivalentes.
Imágenes y diseño gráficoUsar esta herramienta
Extrae una paleta de colores dominante de una imagen sin subirla a un servidor.
Imágenes y diseño gráficoUsar esta herramienta
Previsualiza una imagen como puede percibirse con distintos tipos de daltonismo.
Imágenes y diseño gráficoUsar esta herramienta
También te puede interesar
GuíaBuenas prácticasPrincipiante
¿Cómo crear una paleta de colores a partir de una imagen?
Extrae los colores dominantes de una imagen, asigna funciones y construye una paleta coherente sin confundir frecuencia e importancia visual.
31 de agosto de 202615 min
GuíaBuenas prácticasPrincipiante
Cómo optimizar 50 imágenes para la Web de una sola vez
Redimensiona un lote de imágenes, conviértelo a WebP y elimina metadatos con un único Pipeline.
6 de septiembre de 20262 min
TutorialBuenas prácticasPrincipiante
Optimizar imágenes para la Web sin perder calidad
Redimensiona, comprime y elige entre WebP, AVIF y otros formatos con un flujo práctico que reduce peso sin degradar innecesariamente la imagen.
30 de agosto de 20262 min
ActualidadFormatosIntermedio
WebP, AVIF, JPEG XL: ¿qué formatos de imagen elegir en 2026?
WebP, AVIF y JPEG XL responden a necesidades distintas. Compara compatibilidad, compresión, transparencia, HDR y estrategias de fallback en 2026.
30 de agosto de 20263 min