TodoEnUnClick

Flechas para moverte, Enter para abrir y Esc para cerrar. Atajos: / o Ctrl + K.

 EN

Generador de paletas de colores

Paletas armónicas con comprobación de contraste accesible.

Se procesa en tu navegador

Colores vecinos en la rueda cromática: combinación tranquila y natural.

  • Aa14,2:1

    #75E3FF

    AAcon texto negro

  • Aa8,2:1

    #759FFF

    AAcon texto negro

  • Aa6:1

    #8E73FF

    AAcon texto negro

  • Aa7,8:1

    #D675FF

    AAcon texto negro

  • Aa8,9:1

    #FF75E3

    AAcon texto negro

Variables CSS

:root {
  --color-1: #75E3FF;
  --color-2: #759FFF;
  --color-3: #8E73FF;
  --color-4: #D675FF;
  --color-5: #FF75E3;
}

Comprobar contraste entre dos colores

Título de ejemplo

Así se leería un párrafo con esta combinación de colores.

Relación de contraste: 2,35:1

AA texto normal (4,5:1)AA texto grande (3:1)AAA texto normal (7:1)

Qué hace: Generador de paletas de colores

Crea una paleta de cinco colores a partir de uno base usando reglas de armonía cromática: análoga, complementaria, triádica, complementaria dividida, tetrádica o monocromática.

Cada color indica si se lee mejor con texto blanco o negro y si cumple el contraste WCAG AA. Con el comprobador puedes validar cualquier combinación de texto y fondo antes de usarla.

Cómo usarla

  1. Elige un color base o pulsa «Color aleatorio».
  2. Selecciona el tipo de armonía.
  3. Revisa el contraste de cada color y copia las variables CSS.
  4. Comprueba las combinaciones de texto y fondo que vayas a usar.

Ejemplos

Paleta para una web

Parte de tu color de marca, elige «Complementaria dividida» y usa el complementario solo para botones y enlaces.

Interfaz sobria

La armonía monocromática genera fondos, bordes y textos del mismo tono con distinta luminosidad.

Límites, fórmulas y supuestos

  • Las armonías se calculan girando el tono en el espacio HSL; el resultado es un punto de partida, no una regla estricta.
  • El contraste se calcula con la fórmula de luminancia relativa de WCAG 2.x.
  • No dependas solo del color para transmitir información: acompáñalo de texto o iconos.

Preguntas frecuentes

¿Qué contraste necesito?

Para texto normal, al menos 4,5:1 (AA). Para texto grande (unos 24 px, o 19 px en negrita) basta con 3:1.

¿Por qué algunos colores de la paleta no cumplen AA?

Los colores medios (ni muy claros ni muy oscuros) tienen poco contraste tanto con blanco como con negro. Úsalos para elementos decorativos o ajusta su luminosidad.

¿Puedo usar las paletas en proyectos comerciales?

Sí. Los colores no tienen derechos de autor y la paleta generada es tuya.

Guías relacionadas