Respuesta corta: La paleta de colores de una web es el pequeño grupo de colores que usa tu sitio y el papel de cada uno. Empieza con dos o tres: un color dominante neutro, uno secundario también neutro y un acento reservado para tu llamada a la acción principal. Usa cada color igual en todas partes y nunca dependas solo del color.
Para qué sirve una paleta de colores
Nielsen Norman Group dice que el color es una de las herramientas con más influencia que tiene un diseñador. Una paleta marca el tono de la marca, atrae la atención y hace el sitio más fácil de usar. Funciona cuando los colores combinan y significan lo mismo en cada página.
NN/g también advierte contra la psicología del color: hay poca investigación real que pruebe un efecto universal de un color sobre las emociones.
Armonías de color para empezar
| Armonía de color | Cómo se forma | Qué te da |
|---|---|---|
| Monocromática | Tonos y matices de un solo color | Un aspecto sereno con pocas decisiones |
| Análoga | Colores vecinos en el círculo cromático | Poco contraste de color |
| Complementaria | Colores opuestos en el círculo | Mucho contraste de color |
| Complementaria dividida | Un color con los dos vecinos de su opuesto | Un contraste algo más suave que la complementaria |
| Triádica | Tres colores separados 120 grados | Tres colores distintos que equilibrar |
Del artículo de Nielsen Norman Group sobre el uso del color en el diseño, en inglés, consultado el 3 de noviembre de 2026.
Cómo armar una paleta que funcione
- Parte de los colores de tu marca si los tienes; si no, mira los colores que ya usas.
- Elige una armonía y quédate al principio con dos o tres colores.
- Haz que el dominante y el secundario sean bastante neutros, y guarda el acento para la llamada a la acción principal.
- Aplica la regla 60-30-10 como primer borrador: dominante, secundario y acento.
- Usa cada color para una sola función en todas partes, como un mismo azul para cada llamada a la acción.
- Nunca uses el color como única forma de dar información; agrega texto, un icono o un subrayado.
- Revisa el contraste y el daltonismo, y prueba la paleta en modo oscuro si tu sitio lo tiene.
Nuestra guía del contraste de color explica el paso del contraste. La guía del manual de marca explica dónde dejar escritos tus colores.
Cómo funciona nuestra paleta
Leímos nuestra página de inicio el 3 de noviembre de 2026, como visitantes, en modo claro y oscuro. En modo claro el fondo es blanco, el texto es un azul marino casi negro (#0A0D13) y el acento es un azul (#3F71D1). Nuestro botón principal empieza en ese mismo azul.
En modo oscuro el fondo pasa a casi negro (#0A0B12), el texto a blanco roto (#ECEDF2) y el botón principal va del violeta al azul.
En una captura completa de nuestra página de inicio en modo claro, el blanco ocupa el 64.8% de los píxeles y el gris claro el 27.9%. Queda cerca del 60 y el 30 de la regla. Los dos son neutros, como aconseja NN/g para el color dominante y el secundario. Nuestro azul de acento ocupa el 0.5%, muy por debajo del 10%, porque lo guardamos para lo que debe destacar, como el botón principal. El texto y las formas oscuras ocupan el 0.8% y todo lo demás el 6.1%.
Antes de quedarte con tus colores
- La paleta tiene dos o tres colores principales.
- El acento se reserva para lo que más debe destacar.
- Cada color significa lo mismo en todas las páginas.
- Ningún enlace, error o estado depende solo del color.
- El texto pasa el contraste sobre cada fondo en el que aparece.
- El modo oscuro, si lo tienes, tiene su propia paleta revisada.
RecuerdaDos o tres colores, los neutros llevando la página, un acento para la acción y el mismo significado en todas partes.
Si quieres una paleta que encaje con tu marca y pase el contraste, nuestro servicio de diseño web puede hacerla contigo.
Respuestas rápidas sobre la paleta de colores de una web
¿Cuántos colores debe tener una web?
Empieza con dos o tres, como sugiere NN/g: un color dominante, uno secundario y uno de acento. Si el dominante y el secundario son neutros, el acento queda libre para marcar lo más importante, como tu llamada a la acción principal.
¿Qué es la regla 60-30-10?
Una proporción que NN/g describe para dar equilibrio: el 60% del diseño en el color dominante, el 30% en el secundario y el 10% en el de acento. NN/g lo trata como un primer borrador que se ajusta: nuestra página de inicio se acerca al 60 y al 30 con el blanco y el gris claro, y deja su azul de acento muy por debajo del 10%.
¿Los colores tienen un significado fijo para los visitantes?
No de forma fiable. NN/g señala que hay poca investigación real que pruebe un efecto universal de un color sobre las emociones. Algunos colores sí tienen significados estándar, como el rojo para parar y el verde para avanzar.
¿Puedo usar solo el color para marcar un enlace o un error?
No. Las WCAG dicen que el color no debe ser el único medio visual para transmitir información, indicar una acción o pedir una respuesta. Agrega texto, un icono o un subrayado, para que quien no distingue los colores reciba el mensaje.
¿Mi web debe tener modo oscuro?
Puede seguir lo que elige el visitante. Los navegadores indican si alguien pidió un tema claro u oscuro con la característica prefers-color-scheme, que se ajusta en el sistema operativo o en el navegador. Cada modo necesita su propia paleta revisada.
Fuentes
Consultadas el 3 de noviembre de 2026, en inglés. Nielsen Norman Group: Using Color to Enhance Your Design (6 de junio de 2021). W3C Web Accessibility Initiative: Understanding SC 1.4.1 Use of Color. MDN Web Docs: prefers-color-scheme CSS media feature. Nuestro caso: nuestra página de inicio en modo claro y oscuro a 1,440 píxeles, leída como visitantes el 3 de noviembre de 2026.