La mayoría de los consejos sobre "esquema de color para un sitio web" se desmoronan en cuanto abres un archivo de diseño real. Eliges tres muestras bonitas de un generador, las sueltas en un diseño y en menos de una hora estás improvisando un cuarto color para el mensaje de error, un quinto para el texto de subtítulo apagado y un sexto porque el azul de marca original es ilegible sobre blanco. El problema no es tu gusto. Es que un sitio web no necesita una paleta de colores bonitos: necesita un sistema pequeño y por capas en el que cada color tenga un cometido.
He sacado adelante suficientes interfaces como para conocer la distancia entre "me encantan estos colores" y "este sitio es usable". Esta guía es el método que uso de verdad para ir de lo uno a lo otro, y cómo montarlo a partir de una paleta que generas en vez de adivinar a ciegas.
Cuántos colores necesita realmente un sitio web
Muchos menos de los que la gente piensa, y bastantes más de tres.
La confusión viene de confundir tonos con colores usados en la interfaz. Un sitio limpio puede construirse a partir de solo dos o tres tonos —digamos un azul de marca y un gris cálido— pero esos se expanden a quince o más valores reales una vez que tienes en cuenta fondos, bordes, texto en distintos niveles de énfasis, estados hover y demás. Así que la respuesta honesta es: apunta a uno o dos tonos reales más un conjunto disciplinado de neutros y luego deriva todo lo demás.
Si te encuentras buscando un tono genuinamente nuevo y sin relación, párate. Nueve de cada diez veces no necesitas otro color: necesitas una versión más clara o más oscura de uno que ya tienes. Ese único hábito evita el aspecto embarrado de carpa de circo que grita a aficionado.
El conjunto por capas: asigna un cometido a cada color
Piensa en capas, no en una fila plana de muestras. Esta es la estructura que construyo siempre, de arriba abajo.
1. El color primario / de marca
Este es el color que un visitante nombraría si le preguntaras qué "es" tu sitio. Carga con la personalidad y debería aparecer en las cosas que más quieres que se noten: el logo, los botones principales, la navegación activa. Elige este primero, porque todo lo demás reacciona a él.
Una advertencia desde la experiencia: un color de marca saturado casi nunca es legible como texto de cuerpo ni usable como fondo grande. El morado de Stripe, el verde de Spotify, el casi negro de GitHub: en la práctica estas marcas usan su tono característico con moderación y se apoyan en neutros para el otro 90 % de la superficie. Tu color de marca es una especia, no el plato. Si estás eligiendo el tono desde cero, las asociaciones emocionales importan, y La psicología del color en el branding es mejor sitio para razonar qué tono que cualquier vista previa de un generador.
2. Una rampa de neutros / fondo
Este es el héroe anónimo de todo sitio con aspecto profesional, y la capa que los principiantes se saltan. Quieres una rampa de neutros —no un gris, sino un degradado de cinco a ocho pasos desde casi blanco hasta casi negro—. Algo como #FFFFFF, #F7F8FA, #EBEDF0, #D2D6DC, #9AA0A8, #4B5159, #23272E.
El gris puro (R, G, B iguales) está bien, pero un neutro teñido se siente más intencionado: empuja el tono unos grados hacia tu color de marca y baja la saturación a alrededor del 5–10 %. Un gris que tira a azul bajo una marca azul se lee como "diseñado"; un gris neutro muerto se lee como "Bootstrap por defecto". Usa estos pasos para fondos de página, superficies de tarjetas, divisores y estados deshabilitados. Vale la pena entender bien la mecánica de generar una rampa consistente: consulta Tintes, sombras y matices explicados.
3. Colores de texto legibles (y la regla de contraste que los gobierna)
El texto de cuerpo rara vez es negro puro sobre blanco puro: #000000 sobre #FFFFFF puede sentirse áspero y provocar un efecto vibrante y fatigoso para algunos lectores. Yo suelo fijar el texto principal en torno a #1A1D21 y definir dos niveles más: texto secundario cerca de #5A6068 para subtítulos y metadatos, y un gris de deshabilitado/marcador de posición cerca de #9AA0A8.
Pero la verdadera restricción aquí no es estética, es medible. Según las directrices WCAG del W3C, el texto de cuerpo de tamaño normal necesita una proporción de contraste de al menos 4.5:1 frente a su fondo para cumplir el nivel AA; el texto grande (alrededor de 24px, o 18,66px en negrita) solo necesita 3:1. ¿Ese gris secundario que te gustaba? Compruébalo. El fallo de accesibilidad más habitual que veo es texto gris claro "sutil" sobre blanco que se queda en torno a 2.8:1: bonito en el mockup, ilegible a plena luz. Pasa cada par de texto sobre fondo por el verificador de contraste WCAG de el generador de paletas de color antes de comprometerte. Si quieres entender qué mide realmente la proporción y por qué 4.5:1 es la línea, Las proporciones de contraste WCAG explicadas profundiza más.
4. Un color de acento / CTA
Aquí va un movimiento contraintuitivo: tu color de llamada a la acción a menudo no es tu color de marca. Si tu marca es azul y tus botones principales también son azules, el botón de "Comprar ahora" compite con todos los enlaces y cabeceras por la atención. Un acento distinto —con frecuencia un tono complementario o complementario dividido— hace que la única acción que te importa salte de la página.
Genéralo de forma deliberada. Suelta tu tono de marca en la rueda, cambia a una armonía complementaria o complementaria dividida y obtendrás un candidato lo bastante tenso como para atraer el ojo sin chocar. Un azul de marca (#2563EB) combina con limpieza con un acento ámbar cálido o coral (#F59E0B / #F97316) para el CTA principal. Reserva este color casi por completo para los momentos de conversión: en cuanto lo uses para decorar, deja de significar "haz clic aquí".
5. Colores de estado semánticos
Toda interfaz real acaba necesitando decir éxito, advertencia, error e información. La mayoría toma prestados los valores por defecto evidentes —verde, amarillo, rojo, azul— y se queda ahí, lo que causa dos problemas.
Primero, el rojo y el verde de manual chocan con colores de marca elegidos con cuidado y parecen un lenguaje de diseño aparte y más ruidoso pegado a la fuerza. La solución es acercar esos tonos a la saturación y la calidez generales de tu paleta para que se sientan como familia. Apunta a algo como éxito #16A34A, advertencia #D97706, error #DC2626, información #2563EB, y luego ajusta la saturación para que case con tus otros colores.
Segundo —y esto importa más—, nunca te fíes solo del color para comunicar un estado. Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen alguna forma de deficiencia en la visión del color, y el rojo/verde es la confusión clásica. Acompaña siempre el color de estado con un icono, una etiqueta o una forma. Un borde rojo y un mensaje de "✕ Campo obligatorio". Una marca verde y la palabra "Guardado". Esto es un requisito de la WCAG, no un detalle, y es el hábito de accesibilidad de mayor impacto que puedes desarrollar. Si tu público o tu producto son sensibles al color, Paletas amigables para el daltonismo cubre cómo probar esto directamente.
6. Colores de enlace, hover y foco
La capa más pequeña, y la que separa los sitios pulidos de los descuidados.
- Los enlaces suelen tomar el color de marca, pero verifica el contraste frente a la superficie sobre la que se asientan: un color de marca afinado para botones suele ser demasiado claro para enlaces de texto en línea.
- El hover debería ser una sombra derivada, no un color nuevo: coge la base y baja la luminosidad un 8–12 % en HSL. Consistente, predecible, gratis.
- Los anillos de foco son innegociables para los usuarios de teclado. La WCAG 2.1 también exige que los componentes de la interfaz y sus estados alcancen una proporción de contraste no textual de 3:1, así que un contorno de foco tenue que "queda limpio" pero apenas se ve es un fallo. Hazlo evidente.
Montarlo a partir de una paleta generada
Este es el flujo de trabajo que convierte la salida de un generador en el sistema de arriba, en lugar de cinco muestras que tienes que rescatar después.
Empieza fijando tu tono de marca en la rueda. Usa una regla de armonía para proponer, no para dictar: análoga si quieres una sensación calmada y cohesionada; complementaria o complementaria dividida si necesitas un acento contundente. (Si dudas entre esquemas, Paletas complementarias divididas vs triádicas desglosa las contrapartidas.) Copia el hex de marca y el hex de acento; esas son las capas 1 y 4.
Luego construye los neutros de forma deliberada. Coge tu tono de marca, baja la saturación a alrededor del 8 % y usa la lectura HSL para escalonar la luminosidad desde ~98 % hasta ~14 % en cinco o seis pasos. Esa es toda tu rampa de neutros —la capa 2— y, como comparte el tono de la marca, se sentirá unificada en vez de injertada. Deriva los colores de texto del extremo oscuro de esa rampa (capa 3) y comprueba cada uno frente a su fondo con la herramienta de contraste hasta que todas las combinaciones superen 4.5:1.
Para los estados semánticos, genera verde/ámbar/rojo/azul por separado y luego empuja su saturación en los campos HSL para que se sienten junto a tu paleta en lugar de gritar por encima de ella. Por último, deriva los valores de hover y foco desplazando la luminosidad de colores que ya tienes: sin tonos nuevos.
La razón para trabajar en HSL en todo momento es que convierte "un poco más claro" o "un pelín menos saturado" en un cambio de un solo número en vez de un juego de adivinanzas a través de tres canales RGB. Si esa representación es nueva para ti, Códigos de color HEX, RGB y HSL explicados merece diez minutos.
Un paso que te ahorra un rediseño
Antes de enamorarte de cualquier esquema, pega tus valores finales en un wireframe gris, denso en texto —encabezados reales, párrafos reales, botones reales— y míralo durante un minuto entero. El color siempre seduce en una cuadrícula de muestras y decepciona en un diseño, porque el contexto, los neutros que lo rodean y la proporción lo cambian todo. La regla 60-30-10 te da proporciones que conviene respetar aquí: mayoritariamente neutro, una cantidad significativa de marca, una pequeña sacudida de acento.
Un esquema de color para un sitio web no es un conjunto de colores que te gustan. Es un conjunto de decisiones —qué es marca, qué es superficie, qué es legible, qué es haz clic aquí, qué es "algo salió mal"— cada una asignada, probada y reutilizada con disciplina. Acierta con los cometidos y casi cualquier paleta con buen gusto funcionará. Sáltate los cometidos y hasta una paleta preciosa se peleará contigo en cada pantalla.
Preguntas frecuentes
¿Cuántos colores debería usar un sitio web?
Apunta a uno o dos tonos reales —un color de marca primario más un acento— apoyados en una rampa de cinco a ocho neutros derivados de un único gris. Esos pocos tonos se expanden a unos 15 valores reales una vez que tienes en cuenta fondos, bordes, niveles de texto, estados hover y colores semánticos. Si te encuentras buscando un tono genuinamente nuevo y sin relación, casi siempre lo que necesitas en realidad es una versión más clara o más oscura de un color que ya tienes.
¿Debería mi botón de llamada a la acción usar el color de mi marca?
A menudo no. Si tu color de marca es también el color de tus enlaces, de tu cabecera y de tus botones, tu CTA principal no tiene nada contra lo que destacar. Un acento distinto —con frecuencia un tono complementario o complementario dividido respecto a tu marca— hace que la única acción que te importa resalte. Reserva ese acento casi en exclusiva para los momentos de conversión, para que siga significando 'haz clic aquí'.
¿Qué proporción de contraste necesitan los colores de texto de mi web?
Según el nivel AA de la WCAG 2.1/2.2, el texto de cuerpo normal necesita una proporción de contraste de al menos 4.5:1 frente a su fondo, y el texto grande (unos 24px, o 18,66px en negrita) necesita al menos 3:1. Los componentes de la interfaz de usuario y sus estados, como los anillos de foco y los bordes de los campos, necesitan al menos 3:1. Comprueba cada combinación de texto sobre fondo con un verificador de contraste antes de comprometerte: el texto gris claro 'sutil' sobre blanco es el fallo más habitual.
¿Cómo hago que mis colores de error y de éxito encajen en mi paleta?
Parte de los tonos convencionales (verde, ámbar, rojo, azul) pero acerca su saturación y su calidez al resto de tu paleta para que se lean como familia y no como un conjunto añadido a la fuerza. Y lo crucial: nunca te fíes solo del color para señalar un estado; acompaña cada color de estado con un icono, una etiqueta o una forma, para que el significado sobreviva para aproximadamente 1 de cada 12 hombres con deficiencia en la visión del color. Eso es un requisito de la WCAG, no solo buena educación.
¿Por qué construir mis neutros a partir del color de mi marca en lugar de un gris liso?
Una rampa de gris puro parece el valor por defecto sin tocar de un framework. Si coges el tono de tu marca, bajas la saturación a alrededor del 5–10 % y vas escalonando la luminosidad para crear tus grises, los neutros hacen eco sutilmente de la marca y toda la interfaz se siente intencionada y cohesionada. Trabajar en HSL hace de esto un ajuste de un solo número en lugar de un malabar con tres canales RGB.
¿Quieres experimentar con los colores?
Prueba nuestro generador gratuito de paletas de color para encontrar tu armonía perfecta, con un comprobador de contraste WCAG integrado.
Abrir el generador