Teoría del color para diseño web: guía práctica (2026)

El círculo cromático, explicado rápido

Para diseñar en pantalla solo necesitas tres números, los mismos que usa el modelo HSL:

• Tono (hue): la posición en el círculo, de 0 a 360 grados. 0 es rojo, 120 verde y 240 azul. El tono es la identidad del color: lo que llamas «violeta» o «turquesa».
• Saturación: cuánto color hay, del 0 % (gris) al 100 % (color puro). Es el volumen.
• Luminosidad: cuánta luz tiene, del 0 % (negro) al 100 % (blanco). Es lo que decide si un color sirve de fondo o de texto.

El hexadecimal (#8b7bff) es un formato de transporte: perfecto para copiar, inútil para razonar. Nadie sabe qué sale si le suma 30 grados de tono. En HSL sí: partes de hsl(248 100% 74%), sumas 30 y obtienes un magenta con la misma luz. Decide en HSL y exporta en hexadecimal.

La regla operativa cabe en una línea: cambia el tono para buscar armonías, la saturación para bajar el ruido y la luminosidad para construir escalas. En el generador de paletas ves los dos valores a la vez, así que puedes moverte en HSL sin perder el hex que vas a pegar en el CSS.

Las armonías y cuándo usar cada una

Una armonía es una fórmula para elegir tonos que conviven bien. No son leyes, son puntos de partida fiables. Estas cuatro cubren casi cualquier proyecto web.

Análoga: tonos vecinos (±30°)

Calma y coherencia: todo parece de la misma familia porque lo es. Funciona en portafolios, blogs, servicios profesionales y salud. Su punto débil es la jerarquía: si el botón principal es vecino del fondo, nadie lo ve. Reserva un tono mucho más saturado u oscuro para las acciones.

Complementaria: opuestos a 180°

Máxima tensión visual. Es la armonía de las landings de conversión, donde una sola acción tiene que ganar. Con una condición: uno manda y el otro aparece solo en el acento. Nunca al 50 % cada uno, porque dos opuestos saturados en superficies grandes vibran y cansan la vista.

Tríada: tres tonos a 120°

Vibrante y equilibrada. Su terreno son los productos con varias categorías y los paneles con gráficas, donde hay que distinguir series sin parecer un semáforo. Truco: deja uno a plena saturación y desatura los otros dos un 20-40 %.

Complementaria dividida: la base y los dos vecinos de su opuesto

El contraste de la complementaria sin la agresividad. Es la opción más segura cuando no hay dirección de arte detrás: un acento que destaca de verdad y un tercer tono para estados secundarios. Si dudas, empieza aquí.

Esto se decide viendo, no leyendo: mete el color de tu marca en el generador de paletas y compara las armonías calculadas desde ese mismo tono.

La regla 60-30-10 aplicada a interfaces

En decoración se explica con paredes, muebles y cojines. En una interfaz se traduce así:

• 60 % — dominante. Fondo de página y superficies grandes. Casi nunca es el color de marca: suele ser un neutro (blanco roto, gris muy claro, tinta oscura). Si tu color corporativo ocupa el 60 %, la web grita.
• 30 % — secundario. Tarjetas, cabeceras, bordes, texto secundario y fondos de sección. Aquí sí vive tu color de marca, teñido: el mismo tono con poca saturación.
• 10 % — acento. Botón primario, enlaces, anillo de foco y estados activos. Poco y muy visible.

La regla práctica que evita discusiones: si el acento aparece en más del 10 % de la pantalla, deja de ser acento. Cuando todo destaca, no destaca nada.

Un ejemplo con los colores de este sitio: fondo casi negro (60 %), superficies de violeta muy desaturado y líneas finas (30 %), turquesa saturado solo en el botón y el enlace activo (10 %). Es lo que puedes comprobar en colores en vivo: cambias los colores y ves al instante si la proporción aguanta sobre una maqueta completa.

Por qué necesitas escalas de tono y no solo cinco colores

Piensa en lo que pide una interfaz real para un único color de marca: fondo de página, fondo de tarjeta, borde normal, borde en hover, texto secundario, texto principal, botón, botón en hover y botón pulsado. Nueve decisiones. Una paleta de cinco hexadecimales no cubre ninguna: cubre «el color» y te deja improvisando.

Por eso los sistemas de diseño trabajan con escalas: once pasos por familia, del 50 (casi blanco) al 950 (casi negro), variando la luminosidad y ajustando la saturación en los extremos. Un reparto que funciona:

• 50-100: fondos sutiles, franjas de sección, filas alternas de tablas.
• 200-300: bordes, separadores y estados deshabilitados.
• 400-600: el color «real» de la marca; el 500 es el de referencia.
• 700-800: hover y estado pulsado de los botones, enlaces sobre fondo claro.
• 900-950: texto de máximo contraste y fondos oscuros.

Con una escala, los estados dejan de improvisarse: hover es un paso más oscuro y pulsado son dos. Nunca inventes un hexadecimal nuevo para un hover. Guárdala como variables CSS (--violeta-500, --violeta-700): el día que cambie la marca, cambias once líneas.

Generarla a mano es tedioso y sale desigual. El generador de paletas la crea desde un solo color y la devuelve en variables CSS o en formato Tailwind, con el contraste de cada peldaño calculado.

Contraste y accesibilidad: los números que importan

Aquí se acaban las opiniones y empiezan las matemáticas. El contraste es la relación entre la luminancia de dos colores y va de 1:1 (idénticos) a 21:1 (negro sobre blanco). Las WCAG piden:

• Nivel AA — 4.5:1 para texto normal y 3:1 para texto grande. Es el mínimo que reclaman las normativas de accesibilidad.
• Nivel AAA — 7:1 para texto normal y 4.5:1 para texto grande.
• 3:1 para elementos no textuales que informan: iconos, bordes de campos e indicadores de foco.

¿Qué cuenta como texto grande? A partir de 24 px (18 pt), o desde 18,66 px (14 pt) si está en negrita. Por eso un titular puede permitirse un color que un párrafo no.

Dos consejos que ahorran rehacer pantallas. Mide sobre el fondo real: da igual que el texto pase el contraste sobre el fondo de página si va dentro de una tarjeta de otro color. Y cuando el acento no pasa —casi nunca pasa; un turquesa bonito sobre blanco anda por 1,8:1—, no cambies de color, cambia de paso: usa el 700 para el texto y deja el 400 para el fondo del botón.

Y un detalle que se olvida: el color nunca puede ser el único portador de información. Un error en rojo necesita también icono y texto, porque cerca del 8 % de los hombres tiene algún tipo de daltonismo. En colores en vivo tienes el ratio de cada combinación en pantalla mientras editas.

Errores comunes con el color en una web

• Saturación uniforme. Cinco colores al 100 % pelean entre sí. Baja la saturación de los de soporte y reserva el máximo para el acento.
• Gris puro para el texto. Un #808080 sobre un fondo de marca se ve sucio. Tiñe los grises: el tono de tu color principal con un 6-12 % de saturación.
• Acento en exceso. Botón violeta, título violeta, icono violeta, borde violeta. Decide qué importa en esa pantalla y pinta solo eso.
• El mismo color para lo clicable y lo decorativo. Si el color de los enlaces también aparece en ilustraciones y fondos, nadie sabe qué se puede pulsar.
• Copiar una paleta bonita sin comprobar el contraste. Las de las galerías se diseñan para lucir en una imagen cuadrada, no para sostener texto de 14 px.
• Modo oscuro por inversión. No basta con dar la vuelta a los valores: baja la saturación, evita el negro puro y no uses blanco puro en el texto, que deslumbra.

Preguntas frecuentes

¿Cuántos colores debe tener una web?

Con tres familias basta: un neutro, el color de marca y un acento. Súmales los semánticos (éxito, aviso, error) solo si el producto los necesita. Lo importante no es el número de familias, sino que cada una tenga su escala completa: es preferible un solo color con once pasos que seis colores sueltos sin variantes.

¿Sirve para web la teoría del color que se enseña en pintura?

En parte. El círculo tradicional (RYB) mezcla pigmentos y da complementarios distintos: el opuesto del rojo es el verde en RYB y el cian en RGB. La pantalla trabaja con luz, así que conviene razonar en HSL sobre el círculo RGB. Los conceptos de armonía, proporción y jerarquía sí se trasladan tal cual.

¿Cómo elijo el color principal de una marca?

Mira primero el sector y la competencia: si todos son azules, el azul te vuelve invisible. Después comprueba dos cosas prácticas: que el tono aguante una escala completa sin volverse barro en los pasos oscuros, y que algún paso supere 4.5:1 sobre blanco para poder usarlo en texto y enlaces.

Mi color corporativo no pasa el contraste, ¿tengo que cambiarlo?

No hace falta. Un color de marca puede funcionar como fondo —con texto blanco o negro encima, el que mejor contraste dé— aunque no sirva para texto pequeño. Para textos y enlaces usa un paso más oscuro de su misma escala: sigue siendo tu color y cumples el 4.5:1 del nivel AA.