Cómo usarla
- 1Introduce el color base con el selector o en HEX/RGB, o pulsa «Color aleatorio» para inspirarte.
- 2Elige el modelo de color: OKLCH mantiene igual la luminosidad percibida y HSL usa el círculo cromático clásico.
- 3Revisa las paletas complementaria, análoga, triádica, complementaria dividida, tetrádica, cuadrada y monocromática; haz clic en una muestra para convertirla en el nuevo color base.
- 4Pulsa «Exportar esta paleta» y cópiala como variables CSS o lista HEX; abre el verificador de contraste para revisar pares de texto y fondo.
Tipos de armonía de color
La armonía complementaria usa dos colores opuestos en el círculo (180°) y da un contraste fuerte. La análoga combina vecinos (±30°) y resulta tranquila y natural. La triádica divide el círculo en tres a 120°; la complementaria dividida toma los dos vecinos del complementario (150° y 210°) y logra un equilibrio más suave. Las armonías tetrádica (rectángulo) y cuadrada ofrecen paletas ricas de cuatro colores, y la monocromática usa versiones más claras y oscuras de un mismo tono.
¿HSL u OKLCH?
Al girar el tono en HSL, la luminosidad percibida cambia mucho: un amarillo parece bastante más claro que un azul con la misma saturación y luminosidad. OKLCH es un modelo perceptual que mantiene constantes la luminosidad y el croma al girar el tono, por lo que la paleta resulta más equilibrada. Los colores que no caben en sRGB se ajustan reduciendo el croma. Usa HSL para resultados cercanos al círculo tradicional del pintor y OKLCH para paletas de interfaz y de marca.
Contraste y accesibilidad
Bajo cada muestra aparece la relación de contraste WCAG con texto blanco (◻) y negro (◼): 4,5:1 o más cumple AA para texto normal (verde), de 3:1 a 4,5:1 solo vale para texto grande (ámbar) y por debajo es insuficiente para texto (rojo). Si la paleta va a una web, comprueba los pares reales de texto y fondo en el verificador de contraste. Todo se calcula en tu navegador.
Preguntas frecuentes
¿Cómo encuentro el color complementario?
Girando el tono 180° en el círculo cromático. La herramienta lo hace en HSL u OKLCH y te da el valor HEX.
¿Qué colores combinan entre sí?
Los que están a ángulos concretos en el círculo: opuestos (complementarios), vecinos (análogos), a 120° (triádicos) o a 90° (cuadrados). Las paletas monocromáticas siempre armonizan.
¿Puedo exportar la paleta a CSS?
Sí. Pulsa «Exportar esta paleta», elige variables CSS y copia; obtendrás un bloque :root con variables --color-…. También hay una lista HEX.
¿Muestra cómo se mezclan las pinturas?
No, trabaja con colores de pantalla (RGB). Para ver cómo se mezclan pigmentos reales, usa la herramienta para mezclar colores.
¿No te convencen los resultados?
Habla con Webin Agency sobre webs rápidas y optimizadas para SEO, e-commerce y gestión de Google Ads.