Genera paletas de colores y comprueba el contraste

Cómo usar Paleta de colores y contraste

1. 1

   Empieza con un color

   Escribe o elige un color base y selecciona una armonía, como análogos, triádico o complementario dividido, o mezcla una paleta aleatoria.

2. 2

   Bloquea y ajusta

   Bloquea las muestras que te gusten antes de volver a mezclar, edita cualquier muestra directamente o extrae los cinco colores dominantes de una foto.

3. 3

   Comprueba la legibilidad

   Abre Contraste para probar texto sobre fondo con WCAG 2.2 AA y AAA, aplica una corrección sugerida y previsualiza la paleta con daltonismo.

4. 4

   Exporta

   Copia variables CSS, un tema de Tailwind v4 o una configuración de v3, SCSS o JSON con tonalidades 50–950, o descarga unas muestras en PNG.

Acerca de Paleta de colores y contraste

El generador de paletas de color crea un esquema de cinco colores y todo lo que un sistema de diseño necesita a su alrededor. Las armonías giran el tono base en la rueda de color HSL: los análogos avanzan 30° a cada lado, el complementario añade el tono opuesto, el complementario dividido toma los dos tonos junto al opuesto, el triádico reparte tres tonos separados 120°, el tetrádico usa un cuadrado de 90° y el monocromo mantiene un solo tono en cinco niveles de luminosidad. El modo aleatorio respeta las muestras bloqueadas y la opción de imagen agrupa los píxeles de una foto en OKLab para encontrar sus cinco colores distintos más habituales.

Para cada color, la pestaña Tonalidades genera una escala de 11 pasos, de 50 a 950, en OKLCH, donde el paso más cercano a tu color es el valor exacto, o bien los 13 tonos del sistema HCT de Material 3 junto con las cinco paletas clave que derivaría un tema Material. El comprobador de contraste usa la fórmula de luminancia de WCAG 2.2, nunca redondea una relación hacia arriba y sugiere el color más cercano que cumple cambiando solo la luminosidad y conservando el tono. Una cuadrícula muestra la relación de cada pareja de la paleta, además de frente a blanco y negro.

Las simulaciones cubren protanopía, deuteranopía, tritanopía y acromatopsia con las matrices de Machado, y señalan las muestras que se confunden entre sí. Las exportaciones nombran los colores según su tono y admiten tus propios nombres. La herramienta no juzga si los colores encajan con una marca, y las simulaciones aproximan cómo ven las personas con deficiencia de visión del color; no sustituyen las pruebas con ellas.

Características

Paleta de colores y contraste: preguntas frecuentes