Generador de paletas de colores
Introduce el color base en HEX, RGB o HSL o elígelo con el selector de color y luego escoge la armonía. El generador gira el tono en la rueda de color HSL y muestra cada color como muestra con su valor HEX, RGB y HSL listo para copiar.
Cómo se calcula
Cómo se generan las armonías de color
El generador convierte el color base al modelo HSL (tono H en grados, saturación S y luminosidad L en porcentaje, según CSS Color Module Level 4). Para cada armonía solo se gira el tono; la saturación y la luminosidad no cambian. Después, cada color se vuelve a convertir a sRGB y se redondea a valores enteros de 0 a 255.
| Armonía | Giro del tono | Colores |
|---|---|---|
| Complementaria | 0°, 180° | 2 |
| Análoga | −30°, 0°, +30° | 3 |
| Triádica | 0°, 120°, 240° | 3 |
| Complementaria dividida | 0°, 150°, 210° | 3 |
| Tetrádica (rectángulo) | 0°, 60°, 180°, 240° | 4 |
| Cuadrado | 0°, 90°, 180°, 270° | 4 |
| Monocromática | sin giro; luminosidad en 5 niveles | 5 |
Ejemplo: el rojo puro #FF0000 tiene H = 0°, S = 100 %, L = 50 %. Girado 180° da H = 180°: el cian #00FFFF, su color complementario. En la armonía triádica se añaden 120° (verde #00FF00) y 240° (azul #0000FF).
Paleta monocromática
En la opción «Monocromática» el tono no cambia. La luminosidad se modifica en dos pasos iguales hacia el negro y en dos pasos hacia el blanco. Con el color predeterminado #3B82F6 (L ≈ 60 %), los niveles quedan en torno al 20 %, 40 %, 60 %, 73 % y 87 %.
Texto legible sobre las muestras
El texto de cada muestra es negro o blanco, según cuál ofrezca más contraste con la fórmula de luminancia relativa de las WCAG. Así el texto alcanza siempre al menos 4,58:1. Para saber si dos colores de tu paleta funcionan como color de texto y de fondo, usa el comprobador de contraste.
Limitaciones
HSL es un modelo geométrico sencillo, no perceptualmente uniforme: con la misma L, el amarillo parece bastante más claro que el azul. Por eso las armonías calculadas son un punto de partida; el ajuste fino puedes hacerlo a ojo. Los grises no tienen tono: al girarlos se obtiene el mismo color.
Preguntas frecuentes
¿Cuál es el color complementario del azul?
En la rueda de color HSL está en el lado opuesto, a 180°. Para el azul #0000FF (H = 240°) es el amarillo #FFFF00 (H = 60°); para #3B82F6 (H ≈ 217°), un naranja en torno a #F6AF3B.
¿Qué formatos de entrada acepta el generador?
HEX de 3, 4, 6 u 8 dígitos (con o sin #), rgb() y rgba(), hsl() y hsla(), hsv()/hsb(), hwb() y también tres números como «59, 130, 246» (se interpretan como RGB). Funcionan tanto la sintaxis con comas como la de espacios de CSS Color 4.
¿Cómo paso los colores a CSS o a un programa de diseño?
Cada muestra tiene un botón para copiar su valor HEX. «Copiar como variables CSS» copia al portapapeles un bloque :root con --farbe-1, --farbe-2… Los valores RGB y HSL aparecen en la tabla de abajo.
¿Por qué algunas armonías parecen desequilibradas?
HSL mide la luminosidad de forma puramente matemática. Con el mismo valor de L, el amarillo y el cian parecen mucho más claros que el azul o el violeta. Si hace falta, ajusta la luminosidad de algunos colores o elige un color base menos saturado.
Fuentes y base legal
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
Última actualización:
Herramientas relacionadas
- Convertidor de colores: HEX, RGB, HSL, HSV, CMYKConvierte colores de HEX a RGB, de RGB a HEX, HSL, HSV, HWB y CMYK: escribe el color en cualquier formato o elígelo y copia el resultado. En tu navegador.
- Comprobador de contraste según WCAG 2.2Comprueba el contraste entre el color del texto y el del fondo: relación de contraste WCAG 2.2, niveles AA/AAA para texto normal, texto grande y componentes.
- Obtener el color de una imagen (cuentagotas)Saca el código de color de una imagen: carga la foto, haz clic en un punto y copia el valor HEX, RGB y HSL, además de los colores principales. Sin subir nada.
- Calculadora de 1RM (repetición máxima)Calcula tu 1RM a partir del peso y las repeticiones con las fórmulas de Epley y Brzycki, con tabla de %1RM de 1 a 10 repeticiones. En kg o lb.
- Calcula cuánta agua necesitas al día¿Cuánta agua beber al día? Ingesta de bebidas y agua total según edad, sexo, embarazo y lactancia, con los valores de referencia de la EFSA y de la DGE alemana.
- Calculadora de calorías quemadas haciendo ejercicioCalcula las calorías quemadas en 30 deportes y actividades a partir del MET, el peso y la duración, según el Compendium 2024, con corrección personal opcional.