Diseño de páginas web para inspirarse por colores

Colección de ejemplos de páginas web para que te inspires, agrupados por colores. Muchas veces hay que diseñar una web con unos colores ya fijados, o siguiendo el logotipo del cliente. Y hay días en que la inspiración no llega. Para esos días tienes aquí, color por color, una paleta lista para copiar y las combinaciones que funcionan. También marcas reales que usan ese color en su web.

¿Buscas qué transmite cada color y cuándo usarlo? Lo tienes en mi guía sobre el uso de los colores en diseño web. Aquí vamos a lo práctico: ver y copiar.

Respuesta rápida: elige un color principal, acompáñalo de uno o dos neutros (blanco, gris o negro) y reserva un color de acento para botones y enlaces. Más abajo tienes, para cada color, cinco tonos en HEX que funcionan juntos y ejemplos de webs reales que lo usan.

Diseños web verdes para inspirarse

El verde es el color de la naturaleza, la salud, la sostenibilidad y la energía limpia. Funciona muy bien en webs corporativas, farmacias, alimentación y empresas de energía.

Combinaciones que funcionan: verde con mucho blanco (la más segura), verde oscuro con crema para un aire natural, o verde intenso sobre negro para un estilo tecnológico.

Ejemplos reales: Iberdrola combina fondo blanco con elementos en verde, una fórmula que funciona muy bien en webs de empresa. Cruz Verde usa el verde en la cabecera, y Spotify lo usa como acento sobre fondo negro.

Diseños web en rosa para inspirarse

El rosa se asocia a lo dulce y lo cercano, pero da mucho más juego: agencias creativas, apps, moda y marcas que quieren parecer amables y atrevidas a la vez.

Combinaciones que funcionan: rosa intenso con negro para un estilo editorial, rosa pastel con gris oscuro para algo suave pero serio, o rosa con azul marino.

Ejemplos reales: Dribbble usa un rosa intenso como color de marca, y T-Mobile hace del magenta su seña de identidad.

Diseños web en naranja para inspirarse

El naranja transmite energía, cercanía y acción. Es habitual en banca de consumo, telecomunicaciones, comida y botones de compra, porque llama la atención sin la agresividad del rojo.

Combinaciones que funcionan: naranja y blanco, naranja con gris muy oscuro, o naranja con azul marino, su complementario, para un contraste fuerte.

Ejemplos reales: ING y Orange construyen toda su web alrededor del naranja, siempre con mucho blanco para que respire.

Diseños web en marrón para inspirarse

El marrón es cálido, artesanal y fiable. Encaja en cafeterías, chocolate, madera, productos naturales, decoración y moda de cuero.

Combinaciones que funcionan: marrón con crema y un toque de amarillo o teja, o marrón oscuro con verde oliva para un aire natural.

Ejemplos reales: UPS es el caso más conocido de marca marrón. Si diseñas para hostelería, tienes más ejemplos en estas páginas web de cafeterías.

Diseños web azules como inspiración

El azul es el color de la confianza: por eso lo usan tantos bancos, aseguradoras, redes sociales y empresas tecnológicas. Es la opción segura cuando la web tiene que dar seguridad.

Combinaciones que funcionan: azul con blanco (la clásica), azul marino con un acento naranja o amarillo para los botones, o varios tonos de azul en degradado.

Ejemplos reales: Booking.com, LinkedIn y PayPal usan el azul como color principal.

Páginas web en amarillo para inspirarse

El amarillo es alegre, optimista y muy visible. Combina genial con el negro, una de las parejas con más contraste que existen, y funciona en marcas que quieren parecer cercanas y desenfadadas.

Combinaciones que funcionan: amarillo y negro, amarillo con azul (complementarios) o amarillo suave de fondo con texto gris oscuro. Ojo: el texto amarillo sobre blanco casi no se lee.

Ejemplos reales: Mailchimp hizo del amarillo su marca, e IKEA lo combina con su azul.

Páginas web en negro para inspirarse

El negro transmite elegancia, lujo y misterio. Lo usan mucho la arquitectura, la moda, la joyería, la fotografía y el deporte. Cuando el fondo es negro, los colores llamativos o el blanco le dan luz a la web sin parecer fuera de lugar.

Combinaciones que funcionan: negro y blanco con un solo color de acento, como en esta paleta. Para fondos oscuros, mejor un negro con un punto de gris que el negro puro, que cansa la vista.

Ejemplos reales: la web de los All Blacks, la selección de rugby de Nueva Zelanda, lleva el negro en el nombre y en el diseño.

Estas son otras webs en negro que me gustan:

Diseño de páginas web en violeta para inspirarse

El violeta se asocia a la creatividad, el lujo y la tecnología. Lo usan plataformas digitales, cosmética y marcas que quieren diferenciarse del azul de siempre.

Combinaciones que funcionan: violeta oscuro con blanco, violeta con verde menta para un aire fresco, o violeta con amarillo como acento.

Ejemplos reales: Twitch y Yahoo usan el morado como color de marca.

Sitios web en blanco para inspirarse

En diseño web se usa mucho el fondo blanco, porque se lee fácil y combina con cualquier color. Da una claridad que otros fondos no consiguen, y es la base del diseño minimalista.

Combinaciones que funcionan: blanco con gris muy oscuro para el texto (más suave que el negro puro) y un solo color de marca para los botones.

Ejemplos reales: Apple es el ejemplo clásico de web blanca con mucho aire. Tienes más ideas en el diseño web minimalista y en el color del año, Cloud Dancer de Pantone, un blanco roto.

Diseños web en gris para inspirarse

El gris rara vez es protagonista: es el neutro que deja brillar al resto. En tonos muy oscuros es la base de los modos oscuros, y en tonos claros, de los fondos de tarjetas y secciones.

Combinaciones que funcionan: gris con un único color de acento intenso, o grises cálidos con tonos tierra. Comprueba siempre el contraste del texto gris: es el fallo de accesibilidad más común.

Ejemplos reales: Linear es una buena referencia de interfaz en gris muy oscuro. Tienes más en mi selección de dashboards y paneles de administración.

Páginas web con colores llamativos para inspirarse

Los colores llamativos causan muy buena impresión si se usan bien. Si no, distraen y esconden lo importante, como el menú o el botón de compra. La clave es que haya un orden: un color manda y los demás acompañan.

Combinaciones que funcionan: varios colores vivos sobre fondo blanco o negro, con mucho espacio entre ellos. Si quieres los tonos de moda, mira estas 10 paletas de dopamine design para webs alegres.

Ejemplos reales: Duolingo combina su verde lima con colores vivos e ilustraciones, sin perder la claridad. Y si buscas webs en rojo, las tienes en la guía del uso de los colores.

Cómo elegir los colores de tu web

• Regla 60-30-10: un 60 % de color de fondo, casi siempre un neutro. Un 30 % de color secundario y un 10 % de acento para botones y enlaces.
• Parte de la marca: saca el color principal del logotipo y genera los demás con un generador de paletas.
• Comprueba el contraste: el texto normal necesita 4,5:1 como mínimo (WCAG AA). Tienes cómo medirlo en la guía de diseño web accesible.
• Busca más paletas: si te gustan los tonos suaves, tienes 10 paletas de colores naturales listas para copiar.

Preguntas frecuentes

¿Qué colores combinan bien en una página web?

Lo más seguro es un color principal, uno o dos neutros y un acento. Las parejas con más contraste son azul y naranja, amarillo y negro, y violeta y amarillo. Si dudas, deja que un neutro ocupe la mayor parte de la pantalla.

¿Cómo saco la paleta de una web que me gusta?

Con un cuentagotas: los navegadores lo traen en las herramientas de desarrollo, y muchos generadores de paletas extraen los colores de una captura. Si programas, también puedes sacar el color de una imagen con JavaScript.

¿Dónde veo más páginas web para inspirarme?

En galerías de diseño web como las que reúno en 20 sitios de inspiración para diseño web, y en estos ejemplos de páginas web originales.

¿Cuántos colores debe tener una web?

Entre tres y cinco: uno principal, uno o dos neutros, un acento y, como mucho, un color de apoyo. Más colores suelen restar claridad.

Conclusión

Elige tu color, copia la paleta y mira cómo lo usan las marcas reales antes de empezar. Recuerda que el color no va solo: un neutro que deje respirar y un acento bien elegido hacen más que diez colores juntos. ¿Echas de menos algún color? Cuéntamelo en los comentarios y lo añado.

Este artículo incluye algún enlace de afiliado: si compras a través de él, recibo una pequeña comisión sin coste adicional para ti.