Cómo elegir la paleta de colores de una web
Para elegir la paleta de colores de una web, parte de la identidad de la marca (o de una imagen de referencia), define un color primario, uno secundario y uno de acento, crea una escala de neutros y los colores de estado, reparte todo con la regla 60-30-10 y solo entonces revisa el contraste, el daltonismo y el modo oscuro. El resultado final no es una lista de cinco HEX bonitos, sino un pequeño sistema de tokens que cubre fondos, textos, bordes, botones y mensajes.
Esta guía paso a paso sigue un ejemplo concreto de principio a fin: la web de una empresa con el azul como color principal. Puedes sustituir los valores por los de tu marca y seguir los mismos pasos.
1. Parte de la marca o de una imagen
Si la marca ya tiene un manual de identidad, usa los colores oficiales como punto de partida y anota los códigos exactos. Si todavía no existe o solo tienes un logotipo, elige una referencia visual que represente el tono que buscas: una foto del producto, del espacio, un moodboard.
- Con una imagen a mano, usa el extractor de colores para obtener sus colores dominantes en HEX. Te ayuda a pasar de “es como un azul verdoso” a un valor concreto.
- Con un color base definido, genera combinaciones en el generador de paletas de colores y prueba esquemas análogos, complementarios o triádicos.
En esta etapa piensa también en la personalidad de la marca. La guía de psicología del color explica por qué la adecuación a la marca y al público pesa más que las listas de significados.
2. Define el primario, el secundario y el acento
Tres funciones bastan para la mayoría de las webs:
| Función | Ejemplo | Dónde usarlo |
|---|---|---|
| Primario | #1D4ED8 | Enlaces, botones principales, cabeceras de sección, elementos de marca |
| Secundario | #0F766E | Zonas de apoyo, iconos, sellos, variación visual entre secciones |
| Acento | #F97316 | Una única acción muy importante, insignias, avisos puntuales |
El primario de este ejemplo tiene una relación de contraste de 6,7:1 con el blanco, así que funciona como color de enlace y como fondo de botón con texto blanco. El secundario, un verde azulado oscuro, llega a 5,47:1. El naranja de acento, en cambio, solo alcanza 2,8:1 con el blanco: sirve como fondo de botón con texto oscuro (#0F172A sobre #F97316 da unos 6,4:1), pero no como color de texto sobre fondo claro.
El acento debe ser escaso. Si aparece por todas partes, deja de llamar la atención.
3. Crea los neutros y los colores semánticos
La mayor parte de lo que ve un visitante en una web son neutros: fondo, texto, bordes, separadores. En lugar de grises puros, usa grises ligeramente teñidos con el tono del primario. Resultan más armónicos y menos apagados. Una escala de grises azulados de ejemplo:
- #F8FAFC: fondo de la página
- #E2E8F0: separadores y fondos de tarjetas
- #64748B: texto secundario y bordes de campos (4,76:1 sobre blanco)
- #334155: texto de apoyo
- #0F172A: texto principal (17,85:1 sobre blanco)
Los colores semánticos comunican estados y deben ser coherentes en toda la web:
| Estado | Tono para texto e icono (fondo claro) | Contraste con blanco |
|---|---|---|
| Éxito | #15803D | 5,02:1 |
| Error | #B91C1C | 6,47:1 |
| Advertencia | #B45309 | 5,02:1 |
| Información | #0369A1 | 5,93:1 |
Observa que los tonos más vivos y populares, como un verde #16A34A (3,3:1) o un ámbar #D97706 (3,19:1), no alcanzan 4,5:1 con el blanco. Pueden usarse en iconos grandes o fondos, pero el texto necesita el tono más oscuro.
Fondos suaves para mensajes
Las alertas y los mensajes de formulario suelen combinar un fondo muy claro con texto e icono en el tono oscuro del mismo estado. Para información, por ejemplo, un fondo #EFF6FF con texto #1D4ED8 funciona bien. Define estos pares una vez para cada estado y reutilízalos en toda la web: así, una alerta de error se verá igual en el proceso de pago o en la página de contacto.
4. Aplica la regla 60-30-10 y crea escalas
La regla 60-30-10, heredada del diseño de interiores, es un punto de partida para repartir el peso visual:
- 60% para el color dominante, normalmente los neutros claros del fondo;
- 30% para el color secundario, o el primario en zonas de apoyo como cabecera, pie de página y tarjetas;
- 10% para el acento, en botones y elementos que necesitan atención.
No es una medida exacta en píxeles, sino un recordatorio de jerarquía: pocos colores fuertes y mucho espacio neutro.
En el ejemplo, esto se traduce en un fondo #F8FAFC y tarjetas blancas ocupando la mayor parte de la pantalla, el azul #1D4ED8 en la cabecera, los enlaces y los botones principales, y el naranja #F97316 solo en el botón “Solicitar presupuesto”. En un panel de administración con mucha información, la proporción de neutros puede ser aún mayor; en una landing de campaña, el color de marca puede ocupar más espacio.
Escalas del 50 al 900
Cada color de marca necesita variaciones para hover, fondos suaves, bordes y modo oscuro. La convención más usada es una escala del 50 (casi blanco) al 900 (muy oscuro). Para el primario del ejemplo:
50 #EFF6FF · 100 #DBEAFE · 200 #BFDBFE · 300 #93C5FD · 400 #60A5FA · 500 #3B82F6 · 600 #2563EB · 700 #1D4ED8 · 800 #1E40AF · 900 #1E3A8A
Puedes generar los tonos claros mezclando el color base con blanco y los oscuros mezclándolo con negro (o con un azul muy oscuro, para conservar la saturación) en el mezclador de colores. Después ajústalos a mano: los pasos deben parecer visualmente regulares, no ser matemáticamente idénticos.
5. Planifica el modo oscuro
El modo oscuro no consiste en invertir los colores. Una inversión directa convierte el texto #0F172A en un blanco casi puro sobre negro, lo que deslumbra, y deja los colores de la marca demasiado saturados sobre el fondo oscuro.
- Evita el negro puro. Usa un fondo muy oscuro y ligeramente teñido, como #0F172A. Las superficies elevadas (tarjetas, menús) se aclaran un poco, como #1E293B.
- Evita el blanco puro en el texto. Un gris claro como #E2E8F0 alcanza 14,48:1 sobre #0F172A, más que suficiente y más cómodo.
- Reduce la saturación y aclara los colores de marca. El azul #1D4ED8 queda demasiado oscuro sobre fondo oscuro; en modo oscuro, usa el 400 de la escala, #60A5FA, que llega a 7,02:1 sobre #0F172A.
- Recalcula los estados. Los tonos semánticos también suben en la escala: un verde #4ADE80 o un rojo #F87171 funcionan bien sobre #0F172A.
6. Revisa el contraste y el daltonismo
Con la paleta en borrador, prueba cada combinación real de texto y fondo, no solo los colores por separado. WCAG pide 4,5:1 para texto normal, 3:1 para texto grande y 3:1 para bordes de campos, iconos y otros componentes de la interfaz. Mide cada par con el comprobador de contraste.
Después, simula cómo ven la interfaz las personas con daltonismo en el simulador de daltonismo. Pares como el verde de éxito y el rojo de error pueden verse casi iguales con deuteranopía y protanopía, así que acompaña el color con iconos, textos o patrones. Los enlaces dentro del texto merecen el mismo cuidado: si lo único que los distingue del texto que los rodea es el color, mantén el subrayado. La guía de contraste de color y accesibilidad detalla los criterios.
7. Convierte la paleta en tokens CSS
Separa dos niveles: los tokens primitivos, que guardan los valores de la escala, y los tokens semánticos, que indican para qué sirve cada color. Los componentes usan solo los semánticos; así, cambiar de tema es modificar unas pocas líneas.
:root {
/* primitivos */
--blue-400: #60A5FA;
--blue-700: #1D4ED8;
--slate-50: #F8FAFC;
--slate-200: #E2E8F0;
--slate-500: #64748B;
--slate-800: #1E293B;
--slate-900: #0F172A;
--orange-500: #F97316;
/* semánticos */
--color-bg: var(--slate-50);
--color-surface: #FFFFFF;
--color-text: var(--slate-900);
--color-text-muted: var(--slate-500);
--color-primary: var(--blue-700);
--color-accent: var(--orange-500);
--color-success: #15803D;
--color-danger: #B91C1C;
}
.button-primary { background: var(--color-primary); color: #FFFFFF; }Para el modo oscuro, la función light-dark() define los dos valores en el mismo token. Requiere la propiedad color-scheme:
:root {
color-scheme: light dark;
--color-bg: light-dark(#F8FAFC, #0F172A);
--color-surface: light-dark(#FFFFFF, #1E293B);
--color-text: light-dark(#0F172A, #E2E8F0);
--color-primary: light-dark(#1D4ED8, #60A5FA);
}Si necesitas dar soporte a navegadores más antiguos, la alternativa clásica es la media query:
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0F172A;
--color-surface: #1E293B;
--color-text: #E2E8F0;
--color-primary: #60A5FA;
}
}Errores comunes
- Demasiados colores sin función definida. Si no sabes explicar para qué sirve un color, probablemente sobra.
- Grises neutros puros junto a una marca muy saturada, lo que deja la interfaz fría y desconectada.
- Bordes de campo casi invisibles, como #E2E8F0 sobre blanco (1,23:1), que suspenden el criterio de contraste no textual.
- Texto blanco sobre colores de marca claros, como naranja, amarillo o verde vivo.
- Modo oscuro por inversión, con negro puro, blanco puro y colores saturados que parecen vibrar.
- Valores HEX sueltos en el código en lugar de tokens, lo que convierte cualquier ajuste de marca en una tarea de buscar y reemplazar.
Próximos pasos
Revisa tu paleta en este orden: marca y referencia, funciones de los colores, neutros y estados, reparto 60-30-10 y escalas, modo oscuro, contraste y daltonismo, tokens. Para ponerlo en práctica:
- Genera y compara combinaciones en el generador de paletas de colores.
- Valida cada par de texto y fondo con el comprobador de contraste.
- Crea las escalas del 50 al 900 en el mezclador de colores.
- Profundiza en los esquemas con la guía de armonía de colores y consulta referencias como el azul marino y el gris marengo.