Para elegir colores para una página web, empieza por tres decisiones: qué fondo facilita la lectura, qué color tendrá el texto y cómo distinguirás las acciones importantes. Después incorpora los colores de marca y comprueba que las combinaciones funcionen en botones, enlaces, formularios y pantallas pequeñas.
Una paleta atractiva no basta si el visitante no puede leer el contenido o identificar dónde hacer clic. Tampoco existe un color que convierta mejor en todas las webs: importan su contexto, el contraste y el uso coherente.
Cómo elegir una gama de colores para tu web
Parte de la identidad de marca
Si ya tienes colores corporativos definidos, úsalos como referencia. No significa aplicar el color del logotipo a todos los textos o botones: quizá necesites variantes más claras u oscuras para garantizar contraste. Documenta esas variantes para que la web conserve una apariencia consistente.
Si aún no hay una identidad definida, reúne referencias relacionadas con el proyecto y describe qué necesitas comunicar. Evita reglas como «este color es para hombres» o «este tono siempre transmite lujo». Las asociaciones cambian con el contexto y no sustituyen una decisión de diseño.
Asigna una función a cada color
- Fondo: la superficie sobre la que se leerá el contenido.
- Texto: títulos, párrafos y etiquetas con contraste suficiente.
- Acción principal: botones y elementos que ayudan a completar la tarea.
- Superficies secundarias: tarjetas, separadores y bloques de apoyo.
- Estados: errores, confirmaciones, selección y foco de teclado.
No hay un máximo universal de tres colores. Una web puede necesitar varios tonos funcionales. Lo importante es evitar que cada sección invente su propio sistema y que todos los elementos compitan por la atención.
Tres combinaciones de colores con códigos HEX
Estas paletas son propuestas orientativas para probar en un diseño, no normas de marca ni combinaciones vinculadas de forma obligatoria a un sector.
1. Fondo blanco y azul de acento
- Fondo:
#FFFFFF. - Texto:
#1F2937. - Botón principal:
#1D4ED8, con texto#FFFFFF.
Puede servir como base para una web con información extensa y acciones bien diferenciadas. Reserva el azul para elementos que tengan una función consistente. El blanco sobre ese azul ofrece una relación de contraste aproximada de 6,70:1.
2. Fondo crema y verde oscuro
- Fondo:
#FAF7F0. - Texto:
#263B2F. - Botón principal:
#176B48, con texto#FFFFFF.
Es una alternativa a un fondo blanco puro. Puede combinarse con fotografía sin que cada bloque necesite un color adicional. El texto blanco sobre el verde del botón tiene un contraste aproximado de 6,50:1.
3. Fondo oscuro y acento luminoso
- Fondo:
#111827. - Texto:
#F9FAFB. - Botón principal:
#A3E635, con texto#111827.
Un fondo oscuro puede ser legible si se eligen bien los contrastes. En esta propuesta, el texto oscuro sobre el botón tiene una relación aproximada de 11,77:1. No sustituyas ese texto por blanco sin comprobar de nuevo la combinación.
Los valores se han calculado para colores sólidos, sin transparencias. Una fotografía de fondo, una capa semitransparente o un estado distinto del botón pueden cambiar el resultado. Que estas parejas superen un umbral de contraste no certifica la accesibilidad de toda una página.
Contraste: qué comprobar antes de publicar
El criterio de contraste mínimo de WCAG 2.2 establece, para nivel AA, al menos 4,5:1 para texto normal y 3:1 para texto grande, con las excepciones que detalla la norma. No basta con que dos colores parezcan diferentes: hay que evaluar la pareja de texto y fondo.
Comprueba párrafos, menús, texto dentro de botones, etiquetas y mensajes de error. Repite la revisión en los estados de interacción. El texto pequeño gris sobre blanco puede dar problemas aunque el resto de la página tenga colores intensos.
Además, no uses el color como único medio para comunicar información. Un campo incorrecto necesita un mensaje comprensible, no solo un borde rojo. Un enlace dentro de un párrafo debe poder identificarse sin depender únicamente del tono.
Cómo combinar colores sin perder claridad
Una gama monocromática utiliza variaciones de un mismo tono; una combinación análoga reúne colores próximos; una complementaria utiliza colores opuestos en la rueda cromática. Pueden ayudarte a explorar opciones, pero ninguna asegura por sí sola legibilidad o facilidad de uso.
Empieza con pocas funciones bien resueltas y prueba la paleta en una página completa. Revisa si el botón principal destaca por su posición, forma y texto, además del color. Si todos los bloques son llamativos, la acción puede perderse.
En las páginas web minimalistas, reducir colores puede ayudar a ordenar la información. Aun así, no elimines estados, enlaces reconocibles o avisos necesarios para mantener una estética uniforme.
Herramientas para crear y revisar la paleta
La rueda de color de Adobe permite explorar armonías y extraer combinaciones. Para revisar parejas concretas de texto y fondo, puedes utilizar el comprobador de contraste de WebAIM.
Introduce los valores reales que utilizará la web. No des por válido un resultado obtenido con un tono parecido. Después comprueba la página en el navegador, porque tamaño de letra, imágenes y estados de interacción también influyen en la experiencia.
Lista de revisión de los colores de una web
- Los colores respetan la identidad y tienen funciones definidas.
- El texto se lee sobre cada fondo utilizado.
- Botones, enlaces y foco de teclado son identificables.
- Los errores incluyen texto y no dependen solo del rojo.
- Las fotografías no ocultan títulos ni llamadas a la acción.
- Las versiones móvil y escritorio mantienen la claridad.
La paleta forma parte del conjunto de buenas prácticas de diseño web. Si necesitas aplicarla a una estructura completa, puedes consultar el servicio de diseño web de Inboost.
