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 de paleta de colores 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.
Fuente: CSS Color 4, § 7, W3C – CSS Color Module Level 4: HSL colors. Actualizado: .
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.
Cómo crear una paleta de colores
- Introduce un color base en HEX, RGB o HSL, o elígelo con el selector.
- Elige una armonía: complementaria, análoga, triádica o monocromática.
- Copia los colores con sus valores HEX, RGB y HSL.
Ejemplo: al girar el azul hsl(217, 91 %, 60 %) 180° en el círculo cromático se obtiene el complementario hsl(37, 91 %, 60 %), un naranja cálido de aproximadamente #F6AF3C.
| 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.
Más herramientas de color: el conversor de colores, el comprobador de contraste y el cuentagotas para sacar un color de una foto.
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.
¿Qué colores combinan entre sí?
Combinan los colores situados a distancias fijas en el círculo cromático: complementarios (180°) para mucho contraste, análogos (tonos vecinos) para paletas tranquilas y triádicos (a 120°) para combinaciones coloridas equilibradas.
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: · Principios editoriales
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 de colores 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 IMC según la OMSCalculadora de IMC: índice de masa corporal con estatura y peso, categoría de la OMS en una escala de colores, peso normal para tu estatura y BMI Prime.
- Calculadora de caloríasCalculadora de calorías: indique edad, sexo, estatura, peso, actividad y objetivo semanal y obtenga las calorías diarias para bajar, mantener o subir de peso.
- Generador de color aleatorioGenera un color aleatorio o una paleta: totalmente al azar, pastel, vivo, oscuro, tonos de un color o armonía. Con HEX, RGB, HSL y color de texto legible.
- Calculadora de ayuno intermitente y temporizadorAyuno intermitente: elige el inicio de tu ventana de comidas (16/8, 14/10, 18/6, 20/4) y mira horas de comida y ayuno y el temporizador de la fase actual.
- Calculadora de discos para barraCalculadora de discos para barra: introduce peso objetivo y de la barra y mira qué discos van a cada lado, en kg o lb, con series de calentamiento.
- Convertidor del calendario mayaCalendario maya al instante: pasa cualquier fecha a la cuenta larga, al día tzolk’in y a la fecha haab’, o una cuenta larga a nuestra fecha (correlación GMT).