¿Cómo elegir colores que combinen?
Una armonía es una regla de posición en el círculo cromático, nada más misterioso. Se parte de un tono y se deducen los demás con un ángulo fijo. Es reproducible, y es lo que hace esta herramienta.
La armonía elegida determina el efecto: dos colores opuestos chocan a propósito, cinco vecinos calman. Estas son las seis reglas disponibles:
| Armonía | Ángulo en el círculo | Efecto |
|---|---|---|
| Complementario | 180° | contraste máximo, ideal para un botón de acción |
| Análogo | ±20° y ±40° | suave y coherente, sin punto de tensión |
| Triada | 120° | viva y equilibrada, tres polos de igual fuerza |
| Tétrada | 90° | rica pero difícil: un color debe dominar |
| Complementario dividido | 150° y 210° | la fuerza del complementario, sin la brusquedad |
| Monocromático | 0°, luminosidad variable | un solo tono, ningún riesgo de desentonar |
¿Por qué una paleta bonita puede ser ilegible?
Porque el ojo juzga la armonía, no la legibilidad. Dos colores pueden quedar preciosos juntos y formar un texto que nadie puede leer. El criterio no es estético, es un número: la relación de contraste definida por WCAG 2.1.
Va de 1:1 (dos colores idénticos) a 21:1 (negro sobre blanco). Los umbrales oficiales:
| Uso | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande (18 pt, o 14 pt en negrita) | 3:1 | 4,5:1 |
| Elementos de interfaz, iconos | 3:1 | — |
¿De verdad hay que preocuparse por la accesibilidad?
En Europa es una obligación legal, no solo buena práctica. La directiva 2016/2102 impone la accesibilidad a las webs del sector público, y el European Accessibility Act extiende la obligación a numerosos servicios privados desde junio de 2025. El contraste del texto forma parte de ello.
Más allá de la norma, el contraste decide si tu texto sigue siendo legible en la pantalla de un móvil a pleno sol. No es cosa de una minoría: nos afecta a todos, tarde o temprano.
¿Qué ve una persona daltónica de tu paleta?
Alrededor del 8 % de los hombres y el 0,5 % de las mujeres tiene una deficiencia en la visión del color. La más frecuente, la deuteranopía, dificulta distinguir el rojo del verde — justo la pareja que todo el mundo usa para «error» y «correcto».
La herramienta simula las tres formas principales con las matrices publicadas por Machado, Oliveira y Fernandes (2009), aplicadas en el espacio RGB lineal. Si tus colores se parecen en alguna de esas vistas, la información transmitida solo por el color se pierde: hace falta una segunda señal, un icono o una palabra.
¿Cómo llevo la paleta a mi código?
Cuatro formatos a un clic: variables CSS, variables SCSS, configuración de Tailwind y JSON. Texto listo para pegar, sin cuenta y sin descargas.
Un consejo que ahorra muchas correcciones: nombra tus colores por su función (fondo, acento, alerta) y no por su tono. Una variable llamada «azul» que seis meses después es verde es una trampa en la que todo el mundo cae una vez.
Preguntas frecuentes
¿Qué es exactamente la relación de contraste?
Un número entre 1 y 21 que compara la luminancia relativa de dos colores. La fórmula procede de la especificación WCAG 2.1: aplica una corrección gamma a cada canal y luego pondera el rojo, el verde y el azul según la sensibilidad del ojo (el verde cuenta un 71 %).
¿Por qué mi rojo y mi verde dan mal contraste si son tan distintos?
Porque el contraste WCAG mide la claridad, no el tono. Un rojo y un verde con la misma luminosidad quedan cerca de 1:1: son indistinguibles en escala de grises y para buena parte de las personas daltónicas.
¿Se envían mis colores a algún sitio?
No. Todos los cálculos ocurren en tu navegador. No se transmite ni se guarda nada.
¿Puedo partir de un color impuesto por mi manual de marca?
Sí, es el uso principal: introduce tu color corporativo como color base y la herramienta construye el resto a su alrededor.
¿Es exacta la simulación del daltonismo?
Es una aproximación reconocida, no un render médico. Basta de sobra para detectar dos colores que se van a confundir; no sustituye una prueba con personas reales.