Las mejores combinaciones de azul, verde y negro: 23 ideas con hex y IA

Una paleta de colores azul y verde oscuro combina la estabilidad de los azules profundos con la calma arraigada de los verdes bosque. El resultado es un aspecto sofisticado y elegante que funciona bien en branding, interfaces, carteles y packaging.

A continuación encontrarás más de 20 ideas de paletas azul y verde oscuro listas para usar, con códigos HEX y prompts para imágenes con IA que puedes copiar para crear visuales a juego rápidamente.

Por qué funcionan tan bien las paletas azul y verde oscuro

El azul aporta claridad y confianza, mientras que el verde oscuro suma una presencia natural y estable. Juntos, transmiten confianza sin ser estridentes, por lo que son populares en interfaces, tecnología, finanzas y marcas de exteriores.

Esta combinación también maneja bien el contraste: el azul marino profundo puede anclar la tipografía y los títulos, y el verde oscuro puede definir estados (hover, éxito, navegación) sin generar sensaciones de “advertencia” como lo haría un rojo brillante.

Por último, los esquemas azul-verde-oscuro combinan fácilmente con neutros—grises fríos para interfaces modernas o cremas cálidos para impresión—por lo que tus diseños pueden pasar de minimalistas a lujosos solo cambiando el fondo.

20+ Ideas de Paletas de Color Azul y Verde Oscuro (con Códigos HEX)

1) Alga Marina de Medianoche

HEX: #071a2f #0b3b2e #0f5b6b #2a4f7a #d7e3ee

Estado de ánimo: oscuro, costero, refinado

Ideal para: panel saas ui

Tonos costeros y oscuros como el agua nocturna y los bosques de algas transmiten una vibra calma y premium. Usa el azul marino profundo para encabezados, el verde oscuro para estados de navegación y el verde azulado como un pequeño acento. Combina con fondos gris claro frío para mantener la legibilidad alta. Consejo: reserva el verde azulado para iconos activos y botones principales para que la interfaz se sienta intencionada.

Ejemplo de imagen de alga marina de medianoche generada con media.io

Media.io

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

Pruébalo gratis ahora

2) Biblioteca de Mar Profundo

HEX: #0a1633 #103a33 #1f6a7a #4f6f8a #f2f6f8

Estado de ánimo: tranquilo, académico, elegante

Ideal para: maquetación de revista editorial

Tranquilos y eruditos, estos tonos evocan una sala de lectura nocturna junto al mar. El azul marino oscuro y el verde siempreverde generan títulos confiados, mientras el azul pizarra más suave apoya el texto principal y los destacados. Deja mucho espacio en blanco para que la paleta se perciba nítida en vez de pesada. Consejo: utiliza el verde azulado con moderación en marcadores de sección o números de página para guiar la lectura.

Ejemplo de imagen de biblioteca de mar profundo generada con media.io

3) Puerto Tormentoso

HEX: #0b203f #0e3f35 #2d6f85 #7c94a6 #e6edf2

Estado de ánimo: dramático, moderno, seguro

Ideal para: sistema de identidad de marca

Los azules portuarios dramáticos y los verdes profundos aportan la energía del viento, el acero y el agua salada. Como paleta azul y verde oscuro, transmite confianza para marcas de tecnología, finanzas o exteriores sin volverse fría. Combina los tonos oscuros con grises niebla suaves para que los logos y la tipografía destaquen. Consejo: haz del gris claro tu lienzo principal y deja que el azul marino lleve la fuerza en los encabezados.

Ejemplo de imagen de puerto tormentoso generada con media.io

4) Pino Ártico

HEX: #0a1f3a #0c4a3a #2b7a8a #8fb3c7 #f4fbff

Estado de ánimo: fresco, natural, limpio

Ideal para: sección principal de sitio web de viajes

Fresca y natural, evoca aire nevado frente a pinos oscuros y cadenas montañosas lejanas. Usa el tono helado claro como fondo espacioso; luego, azul marino para títulos y verde profundo para botones. Un toque de verde azulado mantiene el aspecto animado sin perder calma. Consejo: añade gradientes suaves solo entre los dos colores más claros para evitar que se vea turbio.

Ejemplo de imagen de pino ártico generada con media.io

5) Tinta y Enebro

HEX: #08152a #123c2f #165f6c #3c5876 #d9d5cd

Estado de ánimo: clásico, botánico, sobrio

Ideal para: envase de cuidado de la piel de lujo

Clásico y botánico, evoca bocetos de tinta sobre ramas de enebro. El blanco cálido suaviza los tonos oscuros, haciendo que el empaque se vea premium en vez de severo. Combina con acabados mate y tipografía minimalista para destacar en el estante. Consejo: utiliza el verde azulado solo en pequeños sellos o acentos de ingredientes para mantener la etiqueta elegante.

Ejemplo de imagen de tinta y enebro generada con media.io

6) Denim Aurora Boreal

HEX: #0c2140 #0f4b3a #1f7785 #4c86b5 #eaf1f6

Estado de ánimo: energizado, nítido, contemporáneo

Ideal para: anuncio de producto deportivo

Nítido y energizado, parece la aurora boreal sobre verdes oscuros y denim desgastado. Usa el azul protagonista para el fondo principal, después utiliza verde para destacar productos y verde azulado para líneas de movimiento. Deja el texto en casi blanco para buen contraste y legibilidad. Consejo: añade un solo degradado de azul denim a verde azulado para dar profundidad sin añadir más colores.

Ejemplo de imagen de denim aurora boreal generada con media.io

7) Pizarra Oceánica

HEX: #0a1d33 #0d3f34 #2a6a78 #6e8796 #f0f3f5

Estado de ánimo: minimalista, equilibrado, profesional

Ideal para: presentación corporativa

Minimalista y equilibrada, estos tonos recuerdan acantilados de pizarra junto al agua profunda. Usa gris azul pizarra para gráficos y separadores, azul marino para títulos y verde siempreverde para números clave. Un fondo pálido mantiene las diapositivas limpias y aptas para juntas directivas. Consejo: limita cada diapositiva a dos tonos dominantes más un acento para evitar el desorden visual.

Ejemplo de imagen de pizarra oceánica generada con media.io

8) Siempreverde Náutico

HEX: #061a36 #0a4636 #0f6375 #3e6f9c #fff4e6

Estado de ánimo: náutico, audaz, acogedor

Ideal para: diseño de carta para restaurante

Náutica y acogedora, evoca cuerda, vidrio marino y una costa siempreverde. Esta paleta de azul y verde oscuro es perfecta para menús con apariencia premium sin llegar a ser demasiado formal. Combina los tonos oscuros con un fondo crema cálida y tipografía con serifas simples. Consejo: usa verde azulado en encabezados de sección para que los clientes localicen rápidamente.

Ejemplo de imagen de siempreverde náutico generada con media.io

9) Crepúsculo Alpino

HEX: #0d1b3a #114336 #2b5f86 #6aa1a9 #e9efe8

Estado de ánimo: sereno, aventurero, equilibrado

Ideal para: cartel de evento al aire libre

Sereno como el atardecer sobre lagos alpinos, la mezcla equilibra azules fríos con un verde bosque terroso. Usa azul marino para el título del cartel y deja que el fondo aireado en menta grisácea ayude a que se lea desde lejos. El verde azulado funciona bien para fechas, distintivos de ubicación e iconos pequeños. Consejo: añade una silueta sencilla de dos tonos de montaña usando los dos colores más oscuros para un tema instantáneo.

Ejemplo de imagen de crepúsculo alpino generado con media.io

10) Musgo Marino

HEX: #091a2e #0f3e2f #1a6c79 #5e7fa7 #dfe7e3

Estado de ánimo: natural, calmado, reparador

Ideal para: interfaz de app de bienestar

Natural y reparador, evoca musgo marino meciéndose bajo agua cristalina. Usa el gris verdoso claro como base y añade azul marino para el texto para mantener la accesibilidad. El verde azulado es ideal para anillos de progreso y acentos suaves, mientras que el azul apagado apoya tarjetas secundarias. Consejo: mantén las animaciones lentas y sutiles para que la paleta transmita calma, no deportividad.

Ejemplo de imagen de musgo marino generado con media.io

11) Bosque Petróleo

HEX: #0b2036 #0b4a39 #1e6f7d #2f4f6f #c9d1d9

Estado de ánimo: industrial, fuerte, moderno

Ideal para: página de aterrizaje de producto

Fuerte e industrial, sugiere metal azul petróleo con un fondo profundo de bosque. Usa los dos tonos más oscuros para encabezado y pie de página, y abre las áreas de contenido con gris claro frío. El verde azulado es un acento agudo y moderno para enlaces y características clave. Consejo: añade iconos lineales sutiles en azul pizarra para mantener la página informativa sin sobrecargarla.

Ejemplo de imagen de bosque petróleo generado con media.io

12) Parque Urbano Lluvioso

HEX: #0a2039 #0f3b31 #2b6273 #86a3b1 #f5f7f6

Estado de ánimo: suave, urbano, introspectivo

Ideal para: diseño de portada de libro

Suave e introspectiva, evoca aceras mojadas y siempreverdes en un parque de la ciudad. Usa azul marino para el título y llamar la atención, mientras que el azul grisáceo brumoso sirve para los bloques de fondo. El verde oscuro añade un acento terroso para el nombre del autor o motivos pequeños. Consejo: mantén las texturas sutiles, como un grano fino, para que la paleta se conserve moderna.

Ejemplo de imagen de parque urbano lluvioso generado con media.io

13) Estudio Vintage Verde Azulado

HEX: #0b1a34 #124236 #1b6a72 #6f8b7e #f1e6d6

Estado de ánimo: vintage, acogedor, intelectual

Ideal para: kit de marca para cafetería

Vintage y acogedor, evoca una sala de estudio verde azulado con cuadernos gastados y papel cálido. El beige cremoso suaviza los tonos fríos, ideal para logotipos, etiquetas y señalización pequeña. Combina con tipografía clásica con serif y sencillos dibujos lineales en azul marino. Consejo: usa verde oscuro para sellos o distintivos y así añadir un toque artesanal.

Ejemplo de imagen de estudio vintage verde azulado generado con media.io

14) Mármol de Laguna Profunda

HEX: #071b33 #0c4537 #1a7a88 #3d6a8f #e8ecef

Estado de ánimo: lujoso, fresco, pulido

Ideal para: empaquetado de producto de joyería

Lujoso y fresco, sugiere mármol de laguna profunda con bordes nítidos y pulidos. Usa el gris claro como base de la caja y añade azul marino para el logo para una impresión definida. El verde oscuro aporta riqueza, mientras el verde azulado es perfecto para detalles en foil o patrones internos en papel tisú. Consejo: mantén los acabados consistentes, como exterior mate con un solo color brillante en detalle.

Ejemplo de imagen de mármol de laguna profunda generado con media.io

15) Marea Cósmica

HEX: #08122d #0d3c33 #136d8a #3b5aa6 #d9e6ff

Estado de ánimo: futurista, vívido, profundo

Ideal para: volante de festival de música

Futurista y profundo, se siente como una marea cósmica deslizándose bajo la luz de las estrellas. Estas combinaciones azules y verdes oscuros destacan en flyers cuando usas un contraste fuerte con un matiz helado brillante. Combina con tipografía sans-serif en negrita y formas geométricas simples en cobalto para energía. Consejo: deja los fondos mayormente azul marino para que los acentos en verde azulado y hielo resalten a distancia.

Ejemplo de imagen de marea cósmica generado con media.io

16) Plano Esmeralda

HEX: #0b1f3a #0e4a3b #0f6f7a #5b86a6 #f6fbff

Estado de ánimo: preciso, tecnológico, confiable

Ideal para: onboarding para app fintech

Preciso y tecnológico, recuerda a un plano dibujado con tonos marinos. Usa el matiz más claro para las pantallas de onboarding y crear cercanía, y refuerza pasos clave con encabezados azul marino. El verde esmeralda puede señalar estados de éxito, mientras que el verde azulado resalta elementos interactivos. Consejo: utiliza iconos monocromáticos para mantener la claridad del plano.

Ejemplo de imagen de plano esmeralda generado con media.io

17) Pasto Marino Noir

HEX: #050f1f #0b3228 #145b66 #2f4b63 #cfd6d2

Estado de ánimo: oscuro, cinematográfico, elegante

Ideal para: cartel de película

Oscuro y cinematográfico, parece siluetas de pasto marino frente al agua casi negra. Usa el azul marino casi negro como fondo y tipografía en gris pálido para legibilidad. El verde azulado y verde profundo funcionan como acentos luminosos mínimos o formas gráficas pequeñas. Consejo: utiliza grandes espacios negativos para que el cartel se perciba intencionado y sofisticado.

Ejemplo de imagen de pasto marino noir generado con media.io

18) Terciopelo Abeto Azul

HEX: #0a1e3c #0f3f34 #1f6f8b #3f6b85 #efe8de

Estado de ánimo: lujoso, invernal, elegante

Ideal para: set de invitación de boda

Lujosa e invernal, se siente como terciopelo azul combinado con ramas de abeto. El marfil cálido mantiene la suite romántica, mientras que el azul marino y el verde profundo le suman formalidad. El verde azulado puede usarse para bordes sutiles o monogramas sin restar protagonismo. Consejo: elige detalles en letterpress o repujados en el tono más oscuro para un acabado táctil.

Ejemplo de imagen de terciopelo abeto azul generado con media.io

19) Niebla del Puerto

HEX: #0b1d36 #103e33 #2c6d7f #9db0bf #fbfcfd

Estado de ánimo: aireado, calmado, moderno

Ideal para: interfaz web de portafolio

Aireado y calmado, retrata la niebla deslizándose sobre un puerto tranquilo. Construye la página sobre blanco casi puro y azul grisáceo claro, usando azul marino para títulos y verde oscuro para estados hover. El verde azulado es mejor como pequeño acento en enlaces o etiquetas. Consejo: mantén las imágenes desaturadas para armonizar los tonos brumosos.

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

20) Botánica Aguamarina Oscura

HEX: #0a1b35 #0b4532 #167a86 #5e90a2 #e7f2ea

Estado de ánimo: exuberante, fresca, calmante

Ideal para: ilustración botánica en acuarela

Exuberante y calmante, evoca sombras de aguamarina oscura bajo hojas brillantes. Esta paleta de azul y verde oscuro es ideal para trabajos botánicos cuando buscas profundidad sin llegar al negro puro. Usa el azul marino más profundo para los contornos, verde para los cuerpos de las hojas y lavados en verde azulado para reflejos acuosos. Consejo: deja la menta clara como áreas de papel sin pintar para mantener el aire ligero.

Ejemplo de imagen de botánica aguamarina oscura generado con media.io

21) Taller Mareal

HEX: #081c34 #0f3f33 #1c6b84 #477193 #e3e9ef

Estado de ánimo: práctico, creativo, enfocado

Ideal para: landing page de evento taller

Práctico y enfocado, transmite la idea de un taller mareal con herramientas ordenadas junto al agua. Los tonos base oscuros añaden estructura a cabeceras y navegación, mientras que el gris claro hace que los formularios sean accesibles. El verde azulado es un acento fuerte para botones de registro y pasos clave. Consejo: usa azul apagado para tarjetas secundarias y así destacar la llamada principal.

Ejemplo de imagen de taller mareal generado con media.io

22) Bosque de Zafiros

HEX: #0a1a3f #0c3e35 #1b6f7f #2f63b6 #e9f0ff

Estado de ánimo: audaz, juvenil, vibrante

Ideal para: diseño de carrusel para redes sociales

Audaz y juvenil, mezcla matices de zafiro con la base verde de un bosque. Usa el azul vibrante para diapositivas principales y equilibra con azul marino y verde oscuro en los textos. El verde azulado sirve para iconos y pequeños divisores dando cohesión al carrusel. Consejo: limítate a un color protagonista más neutros por diapositiva para mantener el ritmo visual limpio.

Ejemplo de imagen de bosque de zafiros generado con media.io

23) Contraste Bahía Perenne

HEX: #081a30 #0a4a38 #0f6f82 #6c8fa8 #f7f8f4

Estado de ánimo: nítido, de alto contraste, contemporáneo

Ideal para: icono de app y pantalla de inicio

Nítido y contemporáneo, parece acantilados perennes frente a una bahía luminosa. Estas combinaciones de azul y verde oscuro crean un fuerte contraste de íconos cuando mantienes las formas simples y los bordes definidos. Combina el azul marino más oscuro con el blanco roto cálido para la pantalla de bienvenida, luego agrega verde azulado como un pequeño resplandor o anillo. Consejo: evita los degradados en el propio ícono y resérvalos solo para el fondo.

Ejemplo de imagen de contraste de bahía perenne generado con media.io

¿Qué colores combinan bien con el azul y verde oscuro?

Los neutros son lo más fácil de combinar: los blancos fríos, los grises brumosos y los tonos pizarra mantienen el azul y el verde oscuro modernos y legibles. Para impresión, los blancos rotos y cremas cálidos pueden hacer que la paleta se sienta más acogedora y premium.

Para acentos, el verde azulado y el azul claro hielo aportan claridad sin romper el estilo. Si quieres un acabado más rico, los metálicos como la plata cepillada (fría) o el oro/bronce apagado (cálido) pueden realzar el azul marino oscuro y el verde perenne.

Para evitar pesadez, mantén un color "aire" (blanco casi puro o gris muy claro) como fondo principal, y utiliza los dos colores más oscuros para la estructura y los textos.

Cómo usar una paleta de colores azul y verde oscuro en diseños reales

En diseño de interfaces, trata el azul marino como ancla tipográfica (encabezados, títulos, marcos principales) y usa el verde oscuro para estados (hover, seleccionado, éxito) para que las interacciones sean coherentes. Reserva el verde azulado para acciones principales para mantener la interfaz enfocada.

Para branding, asegúrate de que tu logo funcione en un color oscuro (azul marino o casi negro) y un neutro claro. Después, incorpora el verde oscuro como color de soporte en empaques, patrones o elementos secundarios de marca.

En carteles y gráficos para redes sociales, potencia el contraste: mantiene los fondos mayormente en azul marino, usa un neutro claro para los textos grandes y añade un pequeño toque de verde azulado como “señal” en fechas, distintivos o íconos.

Crea visuales de paletas azul y verde oscuro con IA

Si ya tienes los códigos HEX, puedes generar maquetas combinadas describiendo el diseño (cartel, pantalla de app, empaque) e indicando dónde debe aparecer cada color: fondo, encabezado, botones, acentos.

Para resultados consistentes, reutiliza la misma estructura de prompt a lo largo de una campaña y solo cambia el sujeto (menú, volante, pantallas de bienvenida). Así mantendrás cohesivos la iluminación, los espacios y el estilo, al tiempo que tu paleta permanece fiel a la marca.

Siguiente: Paleta de colores camel