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

El azul gris claro se sitúa en ese punto ideal entre el tono neutro moderno y el color suave. Se percibe limpio y profesional, pero a la vez transmite calma, cercanía y frescura en proyectos digitales e impresos.

A continuación tienes 20 ideas seleccionadas de paletas de colores azul gris claro con códigos HEX, además de ejemplos prácticos que puedes generar con Media.io para UI, branding, interiores y más.

Por qué funcionan tan bien las paletas de azul gris claro

Las paletas azul gris claro se sienten instantáneamente “diseñadas” porque combinan la neutralidad del gris con la claridad del azul. Ese equilibrio hace que los diseños se vean ordenados, espaciosos y confiables sin resultar fríos o estériles.

También ayudan a una jerarquía visual fuerte. Los matices suaves y aireados funcionan bien en fondos y tarjetas, mientras que los tonos azul-gris más profundos aportan contraste confiable para títulos, navegación y llamadas a la acción.

Por último, estas combinaciones de tonos fríos se adaptan bien a materiales y medios: imprimen limpio, fotografían bien y pueden combinarse con acentos cálidos (madera, beige, latón) cuando se necesita más personalidad.

20+ Ideas de paletas de colores azul gris claro (con códigos HEX)

1) Niebla de Puerto

HEX: #E7F0F7 #CFDBE6 #9BB7CF #6F8FA8 #2F3B46

Sensación: calma y aireada

Ideal para: moodboard decorativo de casa costera

Calma y aire como la niebla sobre una marina tranquila, estos tonos se sienten frescos sin ser fríos. La mezcla equilibra azul gris claro suave con un ancla de carbón profundo para contraste. Funciona perfecto para interiores costeros, branding de estilo de vida y presentaciones donde se busca claridad. Combina con madera blanqueada, texturas de lino y un pequeño acento de latón, y reserva el tono más oscuro para títulos o bordes para evitar un resultado lavado. Esta paleta azul gris claro también luce bien en fondos grandes y abiertos.

Ejemplo de imagen de niebla de puerto generado con media.io

Media.io

Media.io es un estudio online de IA para crear y editar vídeo, imagen y audio directamente en tu navegador.

Pruébalo gratis ahora

2) Denim Escarchado

HEX: #F2F6FA #D6E2EE #A8C0D9 #7A9BB9 #465767

Sensación: fresco y moderno

Ideal para: diseño de lookbook de moda

Fresco y moderno como luz de invierno sobre denim, este conjunto se siente nítido y editorial. Los azules medios aportan estructura mientras la pizarra profunda mantiene la tipografía clara. Úsalo en lookbooks, guías de marca o landing pages que requieran un estilo refinado y minimalista. Acompaña con espacio off-white y un solo acento de tinta negra, y reserva el tono más oscuro para pies de página y numeración.

Ejemplo de imagen de denim escarchado generado con media.io

3) Concreto Tranquilo

HEX: #EEF3F7 #D4DDE6 #A6B3C2 #6F7F8E #39424A

Sensación: industrial y estable

Ideal para: sitio web de portafolio de arquitectura

Industrial y estable como una pared de concreto limpia tras la lluvia, estos neutros se mantienen firmes y profesionales. Los grises medios dan madurez, mientras el tono azul claro evita que se perciba apagado. Es ideal para portafolios de arquitectura, sitios de consultoría y propuestas donde la confianza es clave. Combina con fotografía de roble cálido o íconos de líneas de cobre, y usa el tono más claro para márgenes amplios que aumenten la legibilidad.

Ejemplo de imagen de concreto tranquilo generado con media.io

4) Estudio Iceberg

HEX: #F6F9FB #DBE9F5 #B3CDE3 #7EA8C8 #1F3B57

Sensación: brillante y enfocado

Ideal para: interfaz de app de productividad

Brillante y enfocado como el borde de un iceberg bajo el sol, esta mezcla es limpia y profunda. La base azul marino aporta contraste, mientras los azules suaves mantienen las pantallas aireadas. Úsalo en paneles, herramientas de análisis o onboarding de SaaS donde la jerarquía debe ser clara. Combina con gráficos de líneas simples y tarjetas redondeadas, y usa el tono más oscuro moderadamente en botones primarios para mantener la interfaz ligera.

Ejemplo de imagen de estudio iceberg generado con media.io

5) Marea Plateada

HEX: #F1F5F8 #D1DDE6 #8FB0C6 #4F7F9D #2B4A5A

Sensación: fresca y costera

Ideal para: paleta de branding para hotel

Fresca y costera como la luz del sol sobre agua ondulada, estos tonos se sienten acogedores y de alta gama. Los azules con matiz verde aportan personalidad mientras la base de pizarra mantiene el aspecto premium. Es perfecta para branding de hoteles boutique, menús de spa y señalizaciones donde la calma es parte de la promesa. Combina con arena, texturas de piedra y iconografía minimalista, y prueba la legibilidad en materiales impresos usando los tonos más profundos para bloques de texto.

Ejemplo de imagen de marea plateada generado con media.io

6) Ático Lluvioso

HEX: #F4F6F7 #D8DEE3 #B2C2CF #7D93A6 #3F4B56

Sensación: suave y urbano

Ideal para: diseño de póster minimalista

Suave y urbano como una ventana lluviosa en un ático, este conjunto se mantiene discreto pero elegante. La base gris facilita superponer texto y formas simples sin ruido visual. Funciona para pósters minimalistas, tarjetas de galería y material de conferencias donde se busca confianza discreta. Combina con un solo elemento geométrico audaz y mantén el contraste alto colocando texto pequeño solo sobre el tono más claro.

Ejemplo de imagen de ático lluvioso generado con media.io

7) Pop Glaciar

HEX: #F0F6FF #CFE3FF #9DC3FF #6A8BDC #2D3355

Sensación: enérgico y limpio

Ideal para: landing page de startup tecnológica

Enérgico y limpio como la luz intensa de un glaciar, estos azules son modernos y vibrantes. Los matices brillantes hacen que los CTAs destaquen mientras el índigo oscuro mantiene la composición equilibrada. Es ideal para combinaciones azul gris claro que siguen siendo audaces en startups, páginas de producto o actualizaciones. Usa espacio blanco y gradientes sutiles, y reserva el azul vivo para una acción primaria para evitar que la página se sienta recargada.

Ejemplo de imagen de pop glaciar generado con media.io

8) Planos en Tiza

HEX: #F7F7F5 #DBE2E8 #B6C6D6 #7F9BB3 #2C3A45

Sensación: técnico y ordenado

Ideal para: presentación de ingeniería

Técnico y ordenado como líneas de tiza en un plano, estos colores se sienten organizados y fiables. El blanco suave evita reflejos mientras el azul gris profundo facilita gráficos claros. Úsalo en presentaciones de ingeniería, documentación y diagramas que requieren ritmo estructurado y calmado. Combina con reglas finas, íconos monos y pocos resaltados, y mapea un tono de acento para cada tipo de gráfico para mantener consistencia.

Ejemplo de imagen de planos en tiza generado con media.io

9) Minimal Ceniza Azul

HEX: #FAFBFD #DDE7F0 #B7C9D8 #8299A8 #39444C

Sensación: tranquilo y minimalista

Ideal para: plantilla de currículum y portafolio

Tranquilo y minimalista como la ceniza pálida bajo el cielo matutino, estos tonos se perciben limpios y profesionales. La paleta te permite separar secciones suavemente sin marcos pesados. Es ideal para currículums, PDFs de portafolio y sitios personales donde el contenido debe ser protagonista. Usa una sola fuente sans moderna y emplea la pizarra oscura solo para títulos, manteniendo el texto principal sobre casi blanco para comodidad.

Ejemplo de imagen de Blue Ash Minimal generado usando media.io

10) Harbor Glass

HEX: #EDF6F7 #CFE3E7 #9FBFC9 #6B93A0 #2E4B54

Sensación: estilo spa y refrescante

Ideal para: diseño de embalaje para cuidado de la piel

Estilo spa y refrescante como el vidrio marino en una costa luminosa, esta mezcla se siente limpia y restauradora. Los tonos aqua aportan suavidad mientras que el azul verdoso profundo añade contraste premium. Úsalo para etiquetas de cuidado de la piel, páginas de productos de bienestar o señalización de salón. Combina con envases blancos mate e ilustraciones de líneas minimalistas, y imprime una pequeña prueba de color para evitar que la muestra más clara desaparezca en papel recubierto.

Ejemplo de imagen de Harbor Glass generado usando media.io

11) Moonlit Slate

HEX: #F3F4F7 #D7DBE3 #AEB6C8 #6E7A94 #2C3240

Sensación: melancólico y refinado

Ideal para: maquetación editorial de revista

Melancólico y refinado como la luz de la luna sobre la pizarra, estos tonos crean profundidad sin pesadez. El matiz lavanda gris agrega sofisticación para diseños extensos. Funciona para revistas, informes y estudios de caso donde se busca un tono moderno y serio. Combina con fotografías en blanco y negro de alto contraste y usa el tono medio para citas destacadas que guíen al lector.

Ejemplo de imagen de Moonlit Slate generado usando media.io

12) Soft Stormfront

HEX: #F5F8FB #D7E3EF #A0BDD6 #5F86A4 #2C3E50

Sensación: tormentoso y sereno

Ideal para: renovación de marca corporativa

Tormentoso y sereno como nubes de tormenta lejanas, estos tonos transmiten confianza y tranquilidad. La progresión de brillos a azul gris profundo facilita la jerarquía en impresión y web. Úsalo para cambios de marca corporativa, plantillas de propuestas y visuales de LinkedIn que requieran pulidez. Combina con neutros cálidos como avena y un sutil acento dorado, y reserva el tono más oscuro para logos o navegación para mantener la claridad.

Ejemplo de imagen de Soft Stormfront generado usando media.io

13) Pebble and Powder

HEX: #F8F9FA #E1E5EA #BCC7D1 #8795A3 #4A5560

Sensación: suave y equilibrado

Ideal para: set de invitaciones de boda

Suave y equilibrado como piedra en polvo y cielo pálido, esta mezcla transmite elegancia atemporal. Los tonos medios neutros mantienen la tipografía legible mientras que el carbón profundo agrega formalidad. Es ideal para papelería de bodas, anuncios de nacimiento y suites de eventos formales. Combina con bordes rasgados o grabado sutil, y usa el tono más oscuro solo para nombres para mantener un diseño aireado.

Ejemplo de imagen de Pebble and Powder generado usando media.io

14) Clinic Calm

HEX: #FFFFFF #E7F2FB #C1D9EE #7FA7C8 #3C5A73

Sensación: limpio y tranquilizador

Ideal para: interfaz web para salud

Limpio y tranquilizador como el lobby de una clínica luminosa, estos colores comunican claridad y cuidado. El blanco y el azul pálido proporcionan sensación higiénica mientras que los tonos profundos añaden contraste accesible para estados de UI. Es una opción fuerte para sitios de salud, portales de citas y materiales educativos para pacientes. Combina con componentes redondeados e íconos simples, y verifica el contraste en botones para que las acciones clave sean legibles para todos los usuarios.

Ejemplo de imagen de Clinic Calm generado usando media.io

15) Coastal Dusk

HEX: #F2F0ED #D7E1EA #9FB9C9 #5E7F95 #2F3D46

Sensación: fresco cálido y relajado

Ideal para: plan de pintura para sala de estar

Fresco cálido y relajado como el atardecer sobre el agua, esta paleta se siente acogedora más que fría. El neutro ligeramente cremoso evita que los azules se vean demasiado fríos. Úsalo para planes de pintura de salas, gabinetes y telas suaves donde buscas calma con profundidad. Combina con texturas tejidas y acentos terracota apagados, y prueba el tono medio en varias paredes ya que cambia según la luz del día.

Ejemplo de imagen de Coastal Dusk generado usando media.io

16) Skyline Accent

HEX: #F4F7FF #D8E2FF #A3B7FF #5B6FE6 #232A54

Sensación: elegante y de alto contraste

Ideal para: interfaz móvil fintech

Elegante y de alto contraste como luces de ciudad contra la niebla vespertina, estos azules aportan energía sin ser neón. El añil brillante es perfecto para estados interactivos y la base profunda transmite seguridad y confianza. Usa esta paleta azul gris claro para fintech, paneles de control o portales de cuentas donde la claridad y la confianza son clave. Combina con divisores sutiles y mucho espacio en blanco, y limita el acento vivo a acciones principales y KPIs clave.

Ejemplo de imagen de Skyline Accent generado usando media.io

17) Archive Bluegray

HEX: #F6F5F2 #E0E5EA #B3BECA #788694 #2F3841

Sensación: clásico y académico

Ideal para: diseño de folleto universitario

Clásico y académico como una biblioteca antigua con luz fría, estos tonos se sienten serios y pulidos. La base blanco cálido mantiene las páginas amigables mientras los azul griseros aportan autoridad. Use para folletos universitarios, informes de investigación y sitios departamentales. Combina con titulares en serifas e infografías sencillas, y reserva el tono más oscuro para encabezados de sección para mantener un ritmo de lectura claro.

Ejemplo de imagen de Archive Bluegray generado usando media.io

18) Winter Botanical

HEX: #F7FBFF #D6EAF7 #A8CFE3 #76A6C1 #2F4F5F

Sensación: fresco y botánico

Ideal para: set de ilustraciones de plantas en acuarela

Fresco y botánico como eucalipto en invierno, esta paleta se siente limpia y naturalmente reconfortante. Los tonos azules suaves crean un fondo gentil para verdes delicados y líneas con tinta. Úsalo para sets de ilustraciones en acuarela, papelería y plantillas sociales calmantes. Combínalo con salvia apagada y texturas de papel, y reserva el tono más oscuro para tallos o sombras agregando dimensión sin bordes duros.

Ejemplo de imagen de Winter Botanical generado usando media.io

19) Workweek Serenity

HEX: #F4F6FB #DBE2F2 #B3C0DD #7B88B6 #3A4061

Sensación: enfocado y sereno

Ideal para: interfaz para gestión de proyectos

Enfocado y sereno como un lunes por la mañana tranquilo, estos tonos fríos reducen la fatiga visual. El matiz azul lavanda ayuda a separar componentes manteniendo profesionalidad. Prueba en herramientas de gestión de proyectos, calendarios y paneles de equipo que requieren comodidad en sesiones largas. Combina con sombras suaves y trazos de ícona consistentes, y usa el tono medio para estados seleccionados de modo que los usuarios puedan escanear rápidamente.

Ejemplo de imagen de Workweek Serenity generado usando media.io

20) Granite Seafoam

HEX: #F0F5F4 #CFE1DF #9ABBB7 #5C8681 #2D4443

Sensación: terrenal y fresco

Ideal para: diseño de etiqueta de producto ecológico

Terrenal y fresco como espuma de mar sobre granito, esta mezcla se siente natural y discreta. Las notas azul verdoso aportan un giro orgánico manteniéndose cómodamente en la familia gris. Úsalo para etiquetas ecológicas, envases rellenables y sistemas de marca sostenible donde la credibilidad calmada importa. Combina con texturas de papel kraft y tipografía mínima, y usa el tono más oscuro para letras pequeñas para que se mantenga legible en materiales mate.

Ejemplo de imagen de Granite Seafoam generado usando media.io

¿Qué colores quedan bien con azul gris claro?

Los neutros cálidos son un compañero fácil para azul gris claro: marfil, avena, arena y beige cálido evitan que el esquema se sienta demasiado frío. Para interiores y empaques, tonos madera (roble, nogal) aportan suavidad y realismo al instante.

Para contraste en UI y branding, combina azul gris claro con azul marino, carbón o casi negro para tipografía y componentes clave. Si quieres un color de acento, latón dorado apagado, terracota o coral polvoriento agregan un toque moderno y complementario sin dominar la base tranquila.

Para mantener la paleta cohesionada, usa un solo acento fuerte a la vez y deja que los azul gris claros hagan el trabajo pesado como fondos, paneles y rellenos de soporte.

Cómo usar una paleta de azul gris claro en diseños reales

Empieza asignando roles: usa la muestra más clara para fondo, un tinte ligeramente más oscuro para tarjetas/secciones, un tono medio para bordes o gráficos, y el tono más oscuro para titulares e íconos. Mantiene la jerarquía consistente incluso cuando las composiciones se vuelven complejas.

En impresión, prueba tu muestra más clara en el papel real—azul grises muy pálidos pueden desaparecer en papel blanco brillante o recubierto. En digital, revisa el contraste para accesibilidad, especialmente en botones y etiquetas de formularios.

Finalmente, agrega textura o imágenes que refuercen el ambiente: lino y madera flotante para costeros, concreto y acero para industrial, o envases blancos mate para identidad de bienestar limpia.

Crea visuales de paleta azul gris claro con IA

Si tienes códigos HEX pero necesitas visuales alineados a la marca rápido, genera maquetas y tableros de inspiración con IA. Con Media.io, puedes transformar un concepto de paleta en páginas de aterrizaje, escenas de embalaje, tableros interiores o plantillas sociales en minutos.

Usa uno de los prompts anteriores como punto de partida y ajusta sujeto, iluminación y formato (como 16:9 para diapositivas o 9:16 para móvil). Mantener el prompt específico ayuda a que los tonos azul-gris permanezcan consistentes en las variaciones.

Siguiente: Paleta de colores retro de los años 80