Paletas de colores blanco, azul y gris: 20 combinaciones con códigos hexadecimales

Una paleta de colores blanco, azul y gris es ideal para interfaces limpias, marcas tranquilas y espacios modernos. El blanco mantiene los diseños aireados, el azul aporta claridad y confianza, y los grises proporcionan estructura sin ruido visual.

A continuación encontrarás 20 combinaciones seleccionadas de colores blanco, azul y gris con códigos HEX, además de usos prácticos y prompts de IA que puedes reutilizar para generar imágenes visuales a juego.

Por qué funcionan tan bien las paletas blanco, azul y gris

Los tonos blanco, azul y gris son naturalmente legibles: el blanco ofrece espacio de contraste, el gris apoya la tipografía y los divisores, y el azul llama la atención sin la intensidad de tonos cálidos. Ese equilibrio hace que el esquema se sienta “diseñado” incluso con elementos mínimos.

El azul también transmite señales de confianza y claridad, por eso es común en IU, salud, finanzas y herramientas de productividad. Cuando se combina con grises neutros, la sensación es profesional en lugar de juguetona.

Lo más importante es que estas paletas son escalables. Puedes mantenerlo ultra minimalista para colores limpios, o intensificar los azules y ahumados para crear secciones principales y encabezados de alto contraste.

Más de 20 ideas de paletas blanco, azul y gris (con códigos HEX)

1) Mínimo Ártico

HEX: #ffffff #e9eef3 #b7c6d6 #4a7fb0 #2b3642

Ambiente: nítido, moderno, aireado

Ideal para: paneles ui para SaaS

Nítida y moderna como nieve fresca bajo un cielo despejado, esta mezcla mantiene las interfaces ligeras sin volverse estéril. Úsala en dashboards, pantallas de análisis y paneles de administración donde el contraste y la legibilidad son importantes. Combínala con un acento brillante como lima o ámbar para estados clave y alertas. Consejo: reserva el gris más oscuro solo para la tipografía para evitar bloques pesados.

Ejemplo de imagen de minimal ártico generado usando media.io

Media.io

Media.io es un estudio de IA en línea para crear y editar video, imagen y audio en tu navegador.

Pruébalo gratis ahora

2) Niebla Costera

HEX: #fbfdff #dfe8f2 #9fb6cc #3e6f98 #5a616b

Ambiente: calmado, costero, sutil

Ideal para: cabecera y landing page de sitio web

La niebla costera y los azules suaves del horizonte dan a esta paleta una sensación relajada y premium. Es perfecta para landing pages, portafolios y marcas de consultoría que buscan transmitir confianza tranquila. Añade neutros cálidos como arena o lino en la fotografía para evitar que los azules sean demasiado fríos. Consejo: usa el azul medio para los CTA y fondos casi blancos para velocidad y claridad.

Ejemplo de imagen de niebla costera generado usando media.io

3) Puerto de Acero

HEX: #f6f8fb #cfd8e3 #7f96ab #2f5f88 #1f2a33

Ambiente: industrial, estable, confiado

Ideal para: identidad de marca b2b

Estable e industrial como un puerto funcionando al amanecer, estos tonos transmiten fiabilidad y seriedad. Para sistemas de identidad b2b, el espacio blanco mantiene lo profesional mientras el azul oscuro aporta autoridad. Entre las combinaciones blanco, azul y gris, esta destaca cuando introduces un solo acento metálico como plata o efecto cromo sutil. Consejo: mantén los degradados al mínimo y deja que los bloques planos de color dominen.

Ejemplo de imagen de puerto de acero generado usando media.io

4) Oficina Nórdica

HEX: #ffffff #eef2f6 #c0c7cf #6b8fb2 #3a424c

Ambiente: limpio, práctico, organizado

Ideal para: presentación en diapositivas

Limpio y práctico como una oficina nórdica, los neutros mantienen el contenido ordenado mientras el azul refuerza la jerarquía. Úsalo en presentaciones, documentación interna y actualizaciones para inversores donde la estructura es clave. Combina con iconografía simple y espacio generoso para una sensación nítida. Consejo: reserva el azul para encabezados y cifras clave, no para texto largo.

Ejemplo de imagen de oficina nórdica generado usando media.io

5) Interfaz Glaciar

HEX: #fdfefe #e6f0fb #b8d2ee #3d78c2 #2d3440

Ambiente: fresco, tecnológico, optimista

Ideal para: pantallas ui para app móvil

Fresca y tecnológica como la luz sobre hielo glaciar, esta selección es energética sin ser estridente. Es ideal para pantallas de app móvil, onboarding y páginas de configuración donde se necesita claridad amigable. Úsala con componentes redondeados y sombras sutiles para mantener una interfaz acogedora. Consejo: usa el gris más oscuro para texto principal y el azul brillante solo para estados activos.

Ejemplo de imagen de interfaz glaciar generado usando media.io

6) Lino Pizarra

HEX: #fafbfc #e3e6ea #a8b0b9 #5d7893 #2e333a

Ambiente: suave, equilibrado, refinado

Ideal para: diseño de informe editorial

Suave y refinado como el lino sobre pizarra, estos tonos aportan una sensación premium discreta. Úsalos en informes anuales, PDFs extensos y maquetaciones editoriales donde la legibilidad es fundamental. Combina con tipografía serif en los titulares y fotografía monocromo para un acabado pulido. Consejo: mantén los fondos en un blanco roto y usa el gris medio para reglas, tablas y pies de foto.

Ejemplo de imagen de lino pizarra generado usando media.io

7) Horizonte Lluvioso

HEX: #f7fbff #d7e2ee #8ea3b8 #2e5f8f #3c4450

Ambiente: melancólico, urbano, elegante

Ideal para: sitio web de estudio creativo

Melancólica y urbana como un horizonte lluvioso, esta paleta de colores blanco, azul y gris transmite modernidad y sofisticación. Es ideal para webs de estudios, páginas de casos y portafolios que se apoyan en imágenes potentes. Combina con tipografía audaz y fotos en blanco y negro para un aire editorial. Consejo: añade una fina línea azul para guiar la mirada en páginas largas.

Ejemplo de imagen de horizonte lluvioso generado usando media.io

8) Tinta y Nieve

HEX: #ffffff #e8edf4 #c5ced8 #2a6aa6 #1b2430

Ambiente: alto contraste, nítido, enfocado

Ideal para: interfaz ui de inicio de sesión y autenticación

Nítida y enfocada como tinta sobre nieve fresca, esta selección ofrece claro orden jerárquico y gran legibilidad. Es ideal para pantallas de login, ajustes de cuenta y experiencias donde la confianza es clave. Combina con formularios sencillos, zonas generosas y sombras mínimas para un aspecto limpio. Consejo: usa la sombra más oscura para etiquetas y errores, y el azul solo para acciones primarias.

Ejemplo de imagen de tinta y nieve generado usando media.io

9) Marca Estallido de Nubes

HEX: #f9fcff #d9e9f9 #94b2cf #3b74ad #4b525d

Ambiente: brillante, confiable, amigable

Ideal para: anuncio social de servicio tecnológico

Brillante y confiable como un cielo despejado tras la lluvia, estos tonos transmiten amabilidad y capacidad. Úsalos en anuncios sociales, banners y gráficos de campaña donde la legibilidad rápida es esencial. Combina con un color cálido como coral u oro para aumentar la atracción al clic. Consejo: mantén el texto sobre fondos casi blancos y utiliza el azul profundo para botones y beneficios clave.

Ejemplo de imagen de la marca Cloudburst generada usando media.io

10) Hormigón Marino

HEX: #f5f7fa #d0d6dd #9aa4af #356a9a #2a2f36

Ambiente: sólido, pragmático, moderno

Ideal para: envase de producto para cuidado de la piel

Tan sólido y pragmático como el hormigón marino, los neutros fríos mantienen todo moderno y limpio. Funciona bien en envases cuando buscas un ambiente clínico y premium sin que resulte frío. Combina con acabados mate e iconos lineales minimalistas, y considera una etiqueta soft touch para agregar calidez. Consejo de uso: coloca el azul más intenso en un pequeño sello o insignia para transmitir calidad y no ruido.

Ejemplo de imagen de hormigón marino generada usando media.io

11) Denim en Polvo

HEX: #ffffff #eef5fb #c6d9ea #5a86b8 #39424e

Ambiente: suave, casual, accesible

Ideal para: plantilla de newsletter

Suave y accesible como mezclilla usada y algodón limpio, esta combinación se siente amigable y fácil de leer. Úsala para newsletters, actualizaciones de productos y anuncios comunitarios donde la claridad es más importante que el impacto visual. Combina con botones redondeados e ilustraciones simples para un tono acogedor. Consejo de uso: mantén el texto en gris carbón y usa el azul medio para los títulos de sección.

Ejemplo de imagen de denim en polvo generada usando media.io

12) Cerámica Invernal

HEX: #fbfbfd #e1e8ef #b0bccc #3f6f9e #2f3844

Ambiente: pulido, calmado, profesional

Ideal para: folleto para clínica de salud

Pulida y calmada como la cerámica invernal, estas tonalidades resultan higiénicas y tranquilizadoras. Como paleta de azul-blanco-gris, es ideal para folletos de salud, señalización de clínicas y portales de pacientes donde la confianza y claridad son clave. Combina con mucho espacio en blanco y pictogramas simples para que la información sea fácil de digerir. Consejo de uso: elige un estilo de foto con tonos de piel cálidos para equilibrar la paleta fría.

Ejemplo de imagen de cerámica invernal generada usando media.io

13) Plano Plateado

HEX: #f8fbff #dbe6f2 #a5b7c9 #2f6ea5 #2b3138

Ambiente: técnico, preciso, seguro

Ideal para: presentación de propuesta arquitectónica

Técnica y precisa como un plano plateado, esta paleta acompaña diseños estructurados y diagramas detallados. Úsala para propuestas, presentaciones de proyectos y fichas técnicas donde la precisión debe sentirse elegante. Combina con líneas finas y espaciado basado en cuadrícula para un aspecto coherente e ingenieril. Consejo de uso: mantén los diagramas solo en dos tonos y reserva el azul más oscuro para destacados.

Ejemplo de imagen de plano plateado generada usando media.io

14) Clínica Pulcra

HEX: #ffffff #edf3f8 #c9d4df #4c7fb3 #3a3f47

Ambiente: estéril, segura, tranquilizadora

Ideal para: interfaz de portal médico

Estéril pero tranquilizadora como una sala de exámenes impecable, estos colores permiten encontrar información crítica fácilmente. Son ideales para portales de pacientes, flujos de citas y páginas de resultados de laboratorio donde la calma es esencial. Combina con colores claros para estados como verde y ámbar restringidos a insignias. Consejo de uso: utiliza bordes sutiles en gris en vez de sombras fuertes para un diseño más limpio.

Ejemplo de imagen de clínica pulcra generada usando media.io

15) Hielo Nocturno

HEX: #f7fbff #d3e2f1 #90aed0 #245f98 #1a1f27

Ambiente: dramático, elegante, premium

Ideal para: landing page de ciberseguridad

Dramática y premium como el hielo de medianoche, los tonos profundos dan seriedad mientras que los azules pálidos mantienen el diseño limpio. Úsala para ciberseguridad, fintech o productos empresariales donde la confianza es clave. Combina con titulares de alto contraste y efectos de brillo sutiles en pequeñas dosis. Consejo de uso: evita grandes zonas oscuras, resérvalas para áreas principales y pies de página.

Ejemplo de imagen de hielo nocturno generada usando media.io

16) Grafito Suave

HEX: #fcfdff #e7eaee #b3b9c1 #4a7aa4 #2c323a

Ambiente: silencioso, maduro, versátil

Ideal para: plantilla de currículum profesional

Silenciosa y madura como grafito suave sobre papel blanco, esta paleta resulta pulida pero discreta. Ideal para currículums, hojas de vida y perfiles personales donde la tipografía debe destacar. Combina con una sola línea azul delgada y mucho espacio para un acabado moderno. Consejo de uso: encabezados en azul y texto principal en grafito para mejorar la legibilidad al escanear.

Ejemplo de imagen de grafito suave generada usando media.io

17) Azul Jay Neutro

HEX: #ffffff #eef1f5 #c2cbd4 #3b6fa8 #444a52

Ambiente: fresco, equilibrado, confiable

Ideal para: folleto inmobiliario

Fresco y confiable como un arrendajo azul entre ramas invernales, los colores se sienten limpios y generan confianza. La combinación blanco-azul-gris funciona especialmente bien para folletos inmobilarios, listados de propiedades y guías de barrios. Combina con acentos cálidos en madera o beige en la fotografía para una sensación acogedora. Consejo de uso: usa el azul para pestañas de secciones y destacados en el mapa para que la navegación sea sencilla.

Ejemplo de imagen de azul jay neutro generada usando media.io

18) Metro Escarchado

HEX: #f9fbfc #dee5ea #a1adb7 #4f7ea9 #2a3037

Ambiente: urbano, frío, eficiente

Ideal para: interfaz de app de transporte

Urbana y eficiente como una ventanilla de metro empañada, esta paleta es fresca, organizada y fácil de leer. Funciona bien en apps de transporte, herramientas de horarios y cualquier experiencia basada en mapas. Combina con un color brillante para líneas de ruta, así la información crítica resalta. Consejo de uso: mantén el fondo del mapa claro y utiliza gris oscuro para etiquetas para evitar el desorden visual.

Ejemplo de imagen de metro escarchado generada usando media.io

19) Observatorio Sereno

HEX: #ffffff #e5edf6 #b1c3d6 #3f73a6 #2f3640

Ambiente: reflexivo, silencioso, sofisticado

Ideal para: panel de visualización de datos

Reflexiva y tranquila como un observatorio sereno, la paleta favorece la concentración y la lectura cuidadosa. Úsala en dashboards de visualización de datos, portales de investigación y páginas de KPIs donde la claridad es clave. Combina con colores de gráfico consistentes y limita la saturación para facilitar la comparación de tendencias. Consejo de uso: gridlines en gris claro y el azul más intenso reservado para la serie principal.

Ejemplo de imagen de observatorio sereno generada usando media.io

20) Papel Náutico

HEX: #fbfeff #e2edf7 #c3d6e8 #2f6fae #3b4047

Ambiente: brillante, náutico, editorial

Ideal para: set de invitaciones de boda

Brillante y náutica como papel recién cortado y aire marino, esta paleta de azul-blanco-gris se percibe atemporal y elegante. Es una excelente opción para invitaciones, anuncios formales y papelería minimalista. Combina con efectos de papel texturizado y líneas delgadas grises para mayor refinamiento. Consejo de uso: usa azul de forma limitada para nombres o monogramas y deja que el espacio en blanco respire en el diseño.

Ejemplo de imagen de papel náutico generada usando media.io

¿Qué colores combinan bien con blanco, azul y gris?

Los acentos cálidos son la forma más fácil de equilibrar la frialdad de los neutros azul-gris. Prueba con coral, durazno, ámbar u oro suave para crear un punto focal claro en llamadas a la acción, insignias y destacados.

Para un estilo más tranquilo, combina tonos blanco azul gris con neutros suaves como beige, arena, lino o taupe cálido en imágenes y fondos. Así la paleta se mantiene minimalista pero más humana.

Si buscas un estilo más marcado y técnico, agrega acentos en negro o cian eléctrico brillante en pequeñas dosis. Mantén la saturación limitada para que la paleta base permanezca limpia y consistente.

Cómo usar una paleta blanco, azul y gris en diseños reales

Comienza asignando roles: blanco/extra-blanco para fondos, gris claro para superficies y divisores, gris medio para texto secundario, azul para estados interactivos y carbón oscuro para tipografía principal. Así se crea jerarquía instantánea y se reduce la duda al diseñar.

En UI, reserva el azul más intenso para “acción” (botón principal, pestaña activa, estado seleccionado) y mantén los neutros dominantes para conservar la calma en la interfaz. Para branding, usa azul como color icónico y deja que los grises sostengan la estructura, distribuciones y textos auxiliares.

En interiores o presentaciones, usa blanco como lienzo, gris como estructura (marcos, gráficos, tablas) y azul como ritmo (encabezados, destacados, acentos). El resultado es moderno sin sentirse frío.

Crea imágenes de paletas blanco, azul y gris con IA

Si necesitas maquetas coherentes y rápidas, genera visuales consistentes usando la misma paleta y un prompt reutilizable. Esto es especialmente útil para landing pages, conceptos de dashboards, folletos y variantes de anuncios sociales.

Con Media.io, puedes transformar tu idea en imágenes pulidas en minutos, luego iterar cambiando el “best for” (UI de app, branding, folleto) manteniendo la misma paleta blanco-azul-gris.

Siguiente: Paleta de colores durazno coral