Blog Diseño web
Paletas de colores para páginas web: cómo elegir la tuya
Las paletas de colores para páginas web que funcionan tienen pocas piezas: un color que manda, uno que acompaña y uno que señala dónde hacer clic. Con eso, y con un contraste que se pueda leer en el celular al sol, la mayoría de los negocios tiene resuelto el color. Lo demás es elegir bien esos tres.
Esta guía va en ese orden: cómo se reparte una paleta, cómo se comprueba que se lea, cinco paletas listas para negocios de Colombia, y los errores que se repiten.
La regla 60-30-10
Es una proporción que viene del diseño de interiores y en la web funciona igual. El 60 % de lo que se ve es el color de fondo, casi siempre claro o casi negro. El 30 % es el secundario: cabeceras, tarjetas, pie de página. El 10 % es el acento: botones, enlaces, la cifra que quieres que se vea.
Lo que ordena es el 10 %. Si el acento aparece en todos lados, deja de señalar. Un botón naranja destaca cuando es el único naranja de la pantalla.
El contraste se mide, no se adivina
La norma de accesibilidad WCAG, en su nivel AA, pide una relación de contraste mínima de 4,5:1 entre el texto y su fondo, y de 3:1 para el texto grande (W3C, criterio 1.4.3). Texto grande es, a grandes rasgos, el de 24 píxeles en adelante, o el de 18,5 en negrita.
Qué significa en la práctica: negro sobre blanco da 21:1 y pasa de sobra. Un gris claro como
#999999 sobre blanco da 2,8:1 y no pasa. Un naranja como #F97316 sobre blanco da lo mismo:
sirve para un botón grande con letra oscura, no para un párrafo.
Se comprueba con un medidor de contraste: pegas los dos códigos hex y te da el número. El de WebAIM es gratuito y es el más usado. Hazlo con cada combinación de texto y fondo antes de aprobar la paleta, no después.
Cómo elegir el color principal
Tres criterios, en orden:
- Lo que ya tienes. Si el logo, el letrero del local y los uniformes son verdes, la página es verde. Cambiarlo cuesta más de lo que vale.
- Lo que hace tu sector. Los bancos van al azul, la comida al rojo y al amarillo, lo ecológico al verde. Puedes seguirlo para que te reconozcan o romperlo para que te distingan, pero se decide sabiendo.
- Cómo se ve en el celular. Un color que en el monitor se ve elegante puede volverse barro en una pantalla barata con el brillo al mínimo.
Cinco paletas de colores para páginas web, por tipo de negocio
Cada una trae el fondo, el secundario, el acento y el color del texto, con su código hex, y la relación de contraste del texto sobre el fondo. Todas pasan el mínimo de 4,5:1. Úsalas tal cual o cámbiales el acento.
| Negocio | Fondo (60 %) | Secundario (30 %) | Acento (10 %) | Texto | Contraste |
|---|---|---|---|---|---|
| Contador o abogado en Bogotá | #FFFFFF |
#1F3A5F azul marino |
#D97706 ámbar |
#1A1A1A |
17,4:1 |
| Panadería o restaurante | #FFF8F0 crema |
#7A2E1F terracota oscuro |
#E2711D naranja |
#2B1D14 |
15,5:1 |
| Ferretería o taller | #1C1C1C |
#2E2E2E |
#F5B700 amarillo |
#F2F2F2 |
15,2:1 |
| Gimnasio | #0F0F10 |
#1E1E22 |
#E63946 rojo |
#FAFAFA |
18,4:1 |
| Inmobiliaria o academia de idiomas | #FFFFFF |
#2F5D50 verde |
#C9A227 dorado |
#1B1B1B |
17,2:1 |
Dos notas sobre los acentos. El ámbar y el naranja no aguantan letra blanca encima: con
#D97706 de fondo, el blanco da 3,2:1 y el texto oscuro #1A1A1A da 5,5:1. Y el rojo
#E63946 con letra blanca da 4,2:1: sirve para un botón con letra grande, no para un enlace en
un párrafo.
Errores que se repiten
- Texto gris sobre fondo blanco. Se ve fino en el boceto y no se lee en el celular. Si quieres bajar la fuerza del texto, oscurece el gris hasta pasar 4,5:1.
- Cinco acentos. Rojo para el botón, verde para los enlaces, azul para los títulos. Al final, nada destaca.
- Texto sobre foto sin capa. La foto tiene zonas claras y oscuras, y el texto se pierde en alguna. Se pone una capa oscura encima o se saca el texto de la foto.
- Copiar la paleta de una marca grande. A ellos les funciona porque los reconocen. A ti te deja una página que se parece a otra.
- Aprobar en el monitor. Se aprueba en el celular, con brillo bajo, al sol de mediodía.
La paleta y el resto del diseño
El color es una de las cinco partes del diseño; las otras cuatro (estructura, tipografía, imágenes y movimiento) están en qué es el diseño web. La paleta también depende del tipo de sitio: una landing de campaña aguanta un acento fuerte que en una tienda de cien productos cansa. En tipos de páginas web están las diferencias, y en la estructura de una página web, dónde va cada bloque que el color tiene que ordenar.
Si estás armando todo desde cero, empieza por qué es una página web. Y si prefieres que la paleta salga del logo y del local, medida antes de aprobarse, así se trabaja en nuestro servicio de diseño de páginas web.
Las paletas de colores para páginas web no se eligen por gusto. Se eligen por quién las va a leer, desde qué pantalla y con qué luz.
Preguntas frecuentes
¿Cuántos colores debe tener una página web?
Entre tres y cinco: fondo, secundario, acento y uno o dos tonos de texto. Más que eso, y la página deja de tener un orden que el ojo pueda seguir.
¿Qué colores usar en una página web para vender?
Los que contrasten con el fondo en el botón de compra y en el precio. No hay un color que venda solo: vende el que se distingue del resto de la pantalla.
¿Cómo saco el código hex de un color de mi logo?
Abre el logo en cualquier editor de imágenes, usa el cuentagotas sobre el color y copia el código de seis caracteres. Si tienes el manual de marca, ya viene escrito ahí.