Generador de paletas de colores y degradados

Crea combinaciones de colores a partir de un color base, genera paletas aleatorias y crea degradados para copiarlos como CSS o guardarlos como imagen PNG. Sirve para elegir los colores de un diseño, una presentación o una página web.

Cómo se usa

1. En «Paleta», escoge un «Color base» y elige una «Combinación». Si te gusta, pulsa «Usar esta combinación como paleta».
2. Pulsa «Generar (Espacio)» para obtener colores nuevos; bloquea los que quieras conservar y vuelve a generar.
3. Llévate los colores con «Copiar lista HEX», «Copiar variables CSS» o «Guardar como imagen», y pulsa «Conservar paleta» para guardarla para más adelante.
4. En «Degradado», ajusta el «Tipo», el «Ángulo» y las «Paradas de color», y copia el código CSS o pulsa «Guardar PNG».

Cómo funciona

• Las combinaciones giran el tono en la rueda de color HSL: complementaria 180°, análoga ±30°, tríada 120°, complementaria dividida 150° y 210°, cuadrada en pasos de 90°.
• Los niveles de contraste siguen WCAG 2.2: AA necesita 4,5:1, AAA 7:1 y el texto grande 3:1.
• La «Simulación de visión del color» es una aproximación basada en Machado et al. (2009). Solo cambia los colores en pantalla, no los valores copiados o guardados.
• Se guardan hasta 40 paletas conservadas en este navegador, en este dispositivo.

Preguntas frecuentes

¿Cómo encontrar el color complementario?

Es el color situado justo enfrente en la rueda de color, a 180°. Pon la «Combinación» en «Complementaria» para verlo, y toca la muestra para copiar su valor HEX.

¿Cómo se hace un degradado en CSS?

En «Degradado», toca la barra para añadir paradas y ajusta sus colores y posiciones. El recuadro CSS muestra el código, listo para copiar.

¿Por qué los colores intermedios de mi degradado se ven apagados?

Pon el «Espacio de interpolación» en OKLCH. Los colores intermedios se mantienen más vivos, y el CSS incluye además una línea alternativa para navegadores antiguos.

¿Cómo sé si un texto se leerá bien sobre este color?

Cada color muestra la relación de contraste y el nivel del color de texto más legible, blanco o negro. La relación es (L1 + 0,05) ÷ (L2 + 0,05), donde L1 y L2 son la luminancia relativa del color más claro y del más oscuro.