Suite 01 / Canvas Hub / aGo Palette

aGo Palette

Ingresa un color base y la herramienta calcula la paleta completa validada por contraste WCAG 2.2. Exporta a CSS, Tailwind o OKLCH.

WCAG AAAOKLCHTailwind ready LIVE
Abrir editor Pantalla completa, sin instalar, sin cuenta. Procesamiento local en tu navegador.
/// que hace
01

Contraste validado

Cada swatch valida WCAG 2.2 contra blanco y negro. Pasa AAA o se marca como advertencia.

02

OKLCH math

Calcula tints y shades en espacio OKLCH percepcionalmente uniforme. Mejor que HSL para paletas accesibles.

03

Export multi formato

Exporta a CSS variables, Tailwind config, OKLCH puro o JSON estructurado.

04

Sin servidor

Cálculo local en tu navegador. Tu marca no sale de tu computador.

/// preguntas frecuentes

Preguntas frecuentes

¿Qué es OKLCH?

Espacio de color percepcionalmente uniforme. A diferencia de HSL, dos colores con la misma L (lightness) se perciben con el mismo brillo. Ideal para paletas accesibles.

¿WCAG AAA es siempre necesario?

AAA es el nivel más estricto (ratio 7:1) y se recomienda para texto pequeño. AA (4.5:1) es el mínimo aceptable para texto normal.

¿Cómo exporto a Tailwind?

En el panel derecho selecciona la pestaña Tailwind y copia el bloque. Pégalo en tu tailwind.config.js dentro de theme.extend.colors.

¿Puedo elegir el nombre de la paleta?

Sí. El input "Nombre de la paleta" controla los prefijos en el export (--color-X-50, X: { 50: ... }, etc.).