Ideas de paletas de colores azul, verde y gris: 20 opciones con códigos hex

Una paleta de colores azul, verde y gris es una opción ideal cuando quieres que los diseños se sientan tranquilos, contemporáneos y fáciles de leer. Combina la confianza del azul, la frescura del verde-aguamarina y el equilibrio de los grises modernos y fríos.

A continuación, encontrarás 20 selecciones listas para usar de paletas azul, verde y gris con códigos HEX, además de consejos para combinaciones y ejemplos de uso real en UI, branding, impresión e interiores.

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

Las combinaciones de colores azul, verde y gris se sitúan en una zona “tranquila” del espectro, así que se sienten modernas sin ser estridentes. Por ello, son ideales para interfaces, páginas corporativas y diseños editoriales donde la claridad es importante.

El azul genera confianza, el aguamarina aporta energía limpia y el gris crea estructura para tipografía y espaciado. Juntos, dan soporte a la jerarquía (títulos, botones, fondos) sin depender de un contraste excesivo.

Estas paletas también funcionan bien en pantalla e impresión. Con el equilibrio adecuado de grises, puedes mantener diseños nítidos en UIs brillantes o suavizarlos para interiores y productos en papel.

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

1) Grafito Costero

HEX: #0b3a53 #1f7a75 #7aa6a6 #c7d1d6 #2b2f33

Estado de ánimo: tranquilo y moderno

Ideal para: panel de analítica UI

Tranquilo y moderno como un muelle ventoso con aguas profundas y barandillas de grafito. El azul oscuro ancla la navegación, mientras los tonos aguamarina y bruma marina mantienen los gráficos legibles sin reflejo. Combina con espacios en blanco nítidos y un acento cálido (como ámbar) para alertas. Sugerencia: reserva el grafito casi negro para títulos y cifras clave para mejorar la escaneabilidad.

Ejemplo de imagen de grafito costero generado con 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) Puerto Menta

HEX: #0f4c6e #2aa198 #bfe8de #d9dee2 #4a545c

Estado de ánimo: fresco y acogedor

Ideal para: identidad de marca de bienestar

Fresco y acogedor, como hojas de menta junto a agua de puerto en un día nublado. Esta paleta azul, verde y gris equilibra un azul océano seguro con el estímulo de menta, sostenidos por grises suaves para la tipografía. Combina con texturas naturales y papel sin recubrir para una sensación suave y premium. Sugerencia: usa la menta como color de realce (10 a 15 por ciento) para evitar apariencia deslavada.

Ejemplo de imagen de puerto menta generado con media.io

3) Laguna de Pizarra

HEX: #123b5a #2f6f73 #5f8f9a #b8c2c9 #3b4248

Estado de ánimo: estable y refinado

Ideal para: sitio web corporativo

Estable y refinado, como una laguna tranquila enmarcada por acantilados de pizarra. El aguamarina medio y el azul soportan jerarquía fuerte para encabezados, botones y enlaces, mientras los grises fríos mantienen el aspecto profesional. Combina con fotografía sencilla e iconos de línea delgada para conservar el ritmo limpio. Sugerencia: usa el gris claro como fondo de sección para que los bloques de contenido se sientan estructurados sin usar bordes pesados.

Ejemplo de imagen de laguna de pizarra generado con media.io

4) Salvia Ártica

HEX: #0e5675 #3aa6a1 #a8d5c8 #e3e8eb #6a747d

Estado de ánimo: aireado y relajante

Ideal para: guía de paleta para interior de spa

Aireado y relajante, como vapor de salvia en una mañana azul ártico. La menta suave y el gris pálido crean una base limpia para paredes y ropa de cama, mientras el azul profundo mantiene señalización y orientación legibles. Combina con roble claro, níquel cepillado y cerámica blanca mate. Sugerencia: repite el tono salvia en textiles pequeños para unificar la habitación sin necesidad de repintar.

Ejemplo de imagen de salvia ártica generado con media.io

5) Alga Cobre

HEX: #0b2f4a #1f7f7a #8fb9b1 #cfd6da #8a5a3c

Estado de ánimo: costero y terrenal

Ideal para: empaque de producto para cuidado de la piel

Costero y terrenal, como camas de algas sobre rocas con un toque de cobre calentado por el sol. El aguamarina y el azul se perciben limpios y acuáticos, mientras el marrón cobrizo añade calidez humana que se adapta al cuidado personal. Combina con tipografía sans-serif minimalista y mucho espacio negativo para un aspecto moderno en el estante. Sugerencia: imprime el cobre como foil o tinta para resaltar la sensación premium.

Ejemplo de imagen de alga cobre generado con media.io

6) Paseo Lluvioso

HEX: #0d4860 #2b8a84 #6fa8a8 #d7dde0 #40464c

Estado de ánimo: atmosférico y limpio

Ideal para: diseño de póster para evento

Atmosférico y limpio, como tablones mojados reflejando luces del puerto tras la lluvia. Estas combinaciones de azul, verde y gris funcionan bien para carteles que necesitan atmósfera sin perder legibilidad. Combina con tipografía condensada en negrita y formas geométricas para jerarquía inmediata. Sugerencia: usa gris medio para el texto y reserva pizarra oscura para títulos y fechas.

Ejemplo de imagen de paseo lluvioso generado con media.io

7) Fiordo Nublado

HEX: #12324b #2e6e8a #3c8f87 #b9c7cf #eef2f4

Estado de ánimo: brumoso y espacioso

Ideal para: doble página editorial de revista

Brumoso y espacioso, como un fiordo que desaparece entre nubes bajas. El gris-blanco pálido amplía los diseños, mientras el azul y el aguamarina crean una cadencia visual tranquila entre titulares y destacados. Combina títulos con serif y fotografía atenuada para un tono editorial premium. Sugerencia: usa el aguamarina en divisores para facilitar la navegación entre páginas.

Ejemplo de imagen de fiordo nublado generado con media.io

8) Eucalipto Acero

HEX: #0f3d52 #2f7f77 #9bc2b6 #aab3bb #2f353a

Estado de ánimo: práctico y sereno

Ideal para: pantallas de inicio en SaaS

Práctico y sereno, como hojas de eucalipto sobre acero cepillado. La mezcla de azul profundo y aguamarina da claridad a los CTA, y los grises fríos logran formularios ligeros. Combina con componentes redondeados y espacios generosos para un tono de producto amigable. Sugerencia: usa gris acero para marcos de campos y azul oscuro para los botones primarios, evitando sobresaturar con aguamarina.

Ejemplo de imagen de eucalipto acero generado con media.io

9) Hormigón Náutico

HEX: #0a2f45 #1c6d7c #3aa39b #c9cfd4 #5a646c

Estado de ánimo: urbano y náutico

Ideal para: portafolio de arquitectura web

Urbano y náutico, como agua azul junto a muelles de hormigón. Los neutros fríos resaltan la fotografía, mientras el aguamarina aporta un acento moderno para efectos hover y etiquetas. Combina con imágenes de proyectos en blanco y negro y una cuadrícula minimalista. Sugerencia: utiliza el gris hormigón como fondo dominante para que el aguamarina se perciba intencionado, no decorativo.

Ejemplo de imagen de hormigón náutico generado con media.io

10) Musgo Glaciar

HEX: #103e5b #2a7c8a #5aa78d #d5dde1 #6d7b82

Estado de ánimo: fresco y natural

Ideal para: lookbook de marca outdoor

Fresco y natural, como el deshielo corriendo junto a una piedra cubierta de musgo. Esta paleta transmite aventura sin verse neón, ideal para lookbooks limpios y destacar productos. Siendo una combinación de azul, verde y gris, queda especialmente bien con texturas recicladas, notas de papel kraft y fotografía outdoor de alto contraste. Consejo: usa el verde musgo en insignias e íconos para guiar la atención sin competir con las imágenes.

Ejemplo de imagen de musgo glaciar generado con media.io

11) Oficina Pino Azul

HEX: #0c3b57 #1f6f86 #2f8f7e #b7c0c6 #2a2f34

Estado de ánimo: enfocado y confiable

Ideal para: deck de presentación B2B

Enfocado y confiable, como las agujas del pino azul en una oficina ordenada. Los tonos oscuros aportan autoridad a títulos y gráficas, mientras el gris suave mantiene las diapositivas aireadas. Combina con visualización de datos simple y márgenes amplios para dar confianza. Consejo: utiliza el verde azulado consistentemente en una serie de datos para crear reconocimiento.

Ejemplo de imagen de oficina pino azul generado con media.io

12) Papel de Marea Suave

HEX: #1a4862 #2f8b8b #a7cfc8 #f1f4f6 #7b8790

Estado de ánimo: suave y etéreo

Ideal para: suite de invitación de boda

Suave y etéreo, como papel lavado por la marea con vidrios marinos. El fondo pálido mantiene la elegancia, mientras el azul y verde azulado agregan el color justo para monogramas y bordes. Acompaña con texturas de borde rasgado o acuarelas sutiles para un acabado romántico. Consejo: imprime solo el tono más oscuro en los nombres y detalles claves para conservar la suavidad.

Ejemplo de imagen de papel de marea suave generado con media.io

13) Espuma Marina Industrial

HEX: #0d3c54 #1d7a82 #7fc6c1 #c0c8ce #3d4349

Estado de ánimo: atrevido pero accesible

Ideal para: landing page de startup tech

Atrevido pero accesible, como pintura color espuma de mar en una puerta industrial. El aqua brillante resalta los CTA y microinteracciones, mientras el gris pizarra y carbón dan seriedad. Combina con ilustraciones geométricas y gradientes ligeros para un look tecnológico moderno. Consejo: reserva el aqua solo para botones y enlaces, el gris lleva el texto largo.

Ejemplo de imagen de espuma marina industrial generado con media.io

14) Bahía de Guijarros

HEX: #11435f #2d7f86 #4aa59a #d2d8dc #8b969e

Estado de ánimo: equilibrado y amigable

Ideal para: cabecera del blog y miniaturas

Equilibrado y amigable, como guijarros suaves bajo el agua clara de la bahía. Los tonos medios facilitan la creación de marcos uniformes para miniaturas, etiquetas y categorías sin mucho contraste. Combina con fotografía cálida y overlays simples para títulos legibles. Consejo: usa el gris claro como base de gradiente sutil para unificar imágenes mixtas.

Ejemplo de imagen de bahía de guijarros generado con media.io

15) Verde Azulado Profundo y Carbón

HEX: #062a3a #0f5d6a #1f8a8a #9fb0b8 #1f2327

Estado de ánimo: audaz y cinematográfico

Ideal para: arte de portada de álbum musical

Audaz y cinematográfico, como luz verde azulada atravesando niebla de carbón. Estas combinaciones de azul, verde y gris brillan en portadas donde quieres emoción antes que detalles. Combina con fotografía de alto contraste y tipografía mínima para un acabado impactante y contemporáneo. Consejo: usa texto en el tono acero claro para evitar bordes vibrantes sobre fondo oscuro.

Ejemplo de imagen de verde azulado profundo y carbón generado con media.io

16) Piscina Invernal

HEX: #154d6b #2f8f9d #86c7c2 #e6ecef #56626a

Estado de ánimo: fresca y optimista

Ideal para: folleto de viaje

Fresca y optimista, como una piscina climatizada en una mañana de invierno. El gris claro mantiene las páginas luminosas y la gama de azulados aporta un aire de vacaciones sin ser tropical. Combínalo con fuentes sans-serif limpias y márgenes anchos para una sensación premium. Consejo: usa el verde azulado medio en separadores para facilitar la lectura rápida.

Ejemplo de imagen de piscina invernal generado con media.io

17) Clínica Costera

HEX: #0f4a68 #1f7f85 #9ad9cf #f5f7f8 #9aa5ad

Estado de ánimo: limpia y tranquilizadora

Ideal para: interfaz de app sanitaria

Limpia y tranquilizadora, como una clínica luminosa con vista al mar en calma. El aqua suave aporta cuidado para los estados de estado y la UI de soporte, mientras el azul transmite confianza en las acciones principales. Combina con componentes redondeados y alta visibilidad en iconografía para accesibilidad. Consejo: deja los mensajes de éxito en aqua y reserva verde azulado para elementos interactivos para distinguir los estados.

Ejemplo de imagen de clínica costera generado con media.io

18) Minimal Piedra de Río

HEX: #0e3f59 #2c7c78 #6fb1a7 #dfe4e7 #707b83

Estado de ánimo: silencioso y minimalista

Ideal para: plantilla de currículum y carta de presentación

Silencioso y minimalista, como piedras de río alineadas en una orilla fría. Los colores sobrios mantienen la tipografía protagonista y el verde azulado añade una firma sutil a los encabezados. Combina con una sola familia tipográfica moderna y líneas finas para estructura. Consejo: usa verde azulado solo en títulos e íconos pequeños para que imprima limpio también en escala de grises.

Ejemplo de imagen de minimal piedra de río generado con media.io

19) Botánico Luz de Tormenta

HEX: #0b3b52 #2b7e84 #5ab3a4 #cfd7dc #f3f6f7

Estado de ánimo: fresco y artístico

Ideal para: set de ilustración botánica

Fresco y artístico, como la luz de tormenta atravesando un invernadero. La gama verde-azulada es perfecta para hojas y tallos vivos, y los grises fríos mantienen una composición aireada y moderna. Combínalo con líneas delicadas y lavados acuarelados suaves para un estilo natural y contemporáneo. Consejo: limita el azul más oscuro solo para sombras y así las plantas se ven claras y translúcidas.

Ejemplo de imagen de botánico luz de tormenta generado con media.io

20) Muelle Nocturno Neón

HEX: #061f2f #0b4f6c #00a6a6 #a9b6be #20262b

Estado de ánimo: eléctrica y elegante

Ideal para: overlay para stream de videojuegos

Eléctrica y elegante, como luces de neón brillando sobre un muelle nocturno. El alto contraste entre el casi negro y el verde azulado brillante hace que alertas, etiquetas y temporizadores resalten sin recargar. Combínalo con gradientes sutiles y tipografía sans-serif nítida para un aire competitivo. Consejo: mantén el neón solo en los elementos clave de la UI para que siga impactante durante todo el stream.

Ejemplo de imagen de muelle nocturno neón generado con media.io

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

Los acentos cálidos son la forma más sencilla de añadir contraste a una paleta azul, verde y gris. Prueba con ámbar, terracota, cobre o coral apagado para botones, destacadores, insignias o detalles impresos.

Para un look limpio y moderno, combina estos tonos con blanco puro, blanco cálido o un gris frío pálido. Esto mantiene el diseño liviano y ayuda a que el verde azulado luzca intencional, sin sobrecargar.

Si buscas un acabado más oscuro y cinematográfico, agrega carbón y casi negro más un solo verde azulado brillante como énfasis. Este combo funciona especialmente bien para overlays, secciones hero y gráficos tipo portada de álbum.

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

Comienza asignando roles: elige un azul profundo/carbón como ancla (navegación, encabezados), un verde azulado como acento interactivo (enlaces, CTAs), y deja que los grises claros sean el fondo y los espacios. Así mantienes la jerarquía consistente en todas las pantallas o páginas.

En UI, asegúrate de que el verde azulado saturado se use solo en pequeñas áreas y reserva los grises para textos largos por legibilidad. En impresión, considera papeles blanco cálido para evitar que la paleta se vea demasiado fría.

Para branding e interiores, repite un solo verde azulado de firma en todos los puntos (etiquetas, carteles, textiles) y deja el resto neutro. La repetición genera cohesión aunque cambie la fotografía o los materiales.

Crea visuales de paletas azul, verde y gris con IA

Si ya tienes los códigos HEX, puedes visualizarlos rápidamente en layouts como dashboards, pósters, tableros de marca e invitaciones. Generar algunas variaciones también ayuda a probar contraste y estilo antes de decidir un rumbo final.

Con las herramientas texto a imagen de Media.io, puedes describir tu diseño (formato, estilo y paleta) y recibir visualizaciones de concepto pulidas en minutos. Es una manera rápida de validar una paleta azul, verde, gris para UI, impresión o marketing.

Usa el botón abajo para comenzar a crear visuales de paletas azul, verde, gris gratis.

Siguiente: Paleta de colores gris azul oscuro