Generador de paletas de colores

Una paleta de colores armoniosa en un momento

Este generador de paletas de colores te propone cinco colores que combinan entre sí, a partir del azar, de un color base o de una foto. Para cada color verás los códigos HEX, RGB y HSL, su contraste con el blanco y el negro y el color de texto que se lee bien encima. Todo se calcula en tu navegador: no se envía nada.

Cómo se usa

1. Pulsa «Generar una paleta» o la barra espaciadora. El menú «Armonía» elige la regla, de «Complementaria» a «Monocromática», o «Al azar».
2. ¿Te gusta un color? Haz clic en su candado: se queda fijo y los demás se calculan a partir de él.
3. Para partir de un color concreto, escríbelo en «Color base» y pulsa «Aplicar la armonía». «Cálculo de los tonos» cambia entre HSL y OKLCH, que mantiene una luminosidad más uniforme de un tono a otro.
4. Retoca un color con su selector o su campo HEX; arrastra el asa de cada muestra para cambiar el orden.
5. Haz clic en un código para copiarlo. «Exportar la paleta» te da variables CSS, un array JSON, una imagen PNG y un enlace que vuelve a abrir la paleta.

También puedes sacar una paleta de una foto, convertir un color en la «Escala de tonos de 50 a 900» y guardar favoritos y tus 20 últimas paletas en este dispositivo.

El círculo cromático y las armonías

En el círculo cromático, cada tono ocupa un ángulo: el rojo en 0°, el verde en 120° y el azul en 240°. Una armonía es una combinación de ángulos. Estos son los resultados en modo HSL partiendo del rojo puro #ff0000:

Los colores complementarios están enfrentados y ofrecen el contraste más fuerte. Los análogos son vecinos y transmiten calma. La paleta monocromática conserva un solo tono y juega con la luminosidad. Si una armonía tiene menos de cinco colores, la herramienta añade versiones más claras o más oscuras.

HEX escribe un color con tres pares de cifras hexadecimales (rojo, verde y azul), como #1d4ed8. RGB da los mismos valores de 0 a 255, rgb(29, 78, 216), y HSL los expresa en tono, saturación y luminosidad, hsl(224, 76%, 48%).

Cómo aplicar una paleta: la regla 60-30-10

La regla 60-30-10 reserva el 60 % de la superficie a un color dominante, a menudo neutro, el 30 % a un color secundario y el 10 % a un acento para lo que debe llamar la atención.

• Página web: fondo claro, color corporativo para los títulos y acento para los botones.
• Logotipo: dos o tres colores, probados en blanco y negro y en tamaño pequeño.
• Presentación: un fondo, un color para los títulos y uno o dos para los gráficos, con contraste alto porque el proyector apaga los colores.
• Decoración: las paredes se llevan el 60 %, los muebles el 30 % y los cojines y objetos el 10 %. La pintura nunca se ve como en pantalla: pide un bote de prueba.

Contraste, accesibilidad y daltonismo

Las pautas WCAG exigen un contraste mínimo de 4,5:1 para el texto normal y de 3:1 para el texto grande (nivel AA), y de 7:1 para el nivel AAA. El negro #000000 sobre blanco alcanza 21:1. El gris #777777 sobre blanco se queda en 4,48:1: no cumple para texto normal y la herramienta muestra «AA texto grande».

Se estima que alrededor del 8 % de los hombres y el 0,5 % de las mujeres de origen europeo tienen algún tipo de daltonismo, sobre todo dificultad para distinguir el rojo del verde. La «Simulación de daltonismo» muestra tu paleta con protanopía, deuteranopía y tritanopía. Si dos colores se confunden, añade un texto o un icono.

Preguntas frecuentes

¿Por qué el complementario cambia en OKLCH?

En HSL, el complementario de #ff0000 es #00ffff. En OKLCH el tono gira con la misma luminosidad percibida y da #009aac, más equilibrado frente al rojo.

¿Cómo conservo un color al generar de nuevo?

Haz clic en su candado. La barra espaciadora no hace nada mientras escribes en un campo.

¿Se suben mis fotos a algún sitio?

No. La imagen se analiza en tu navegador: los píxeles se agrupan por colores parecidos y cada grupo importante da un color.

¿Cómo comparto mi paleta?

«Copiar el enlace de la paleta» guarda los cinco códigos en la dirección, por ejemplo #ff0000-00ffff-….