Paletas de colores azul oscuro y amarillo: códigos hex y consejos

El amarillo y el azul oscuro forman una de las combinaciones de alto contraste más claras que puedes utilizar: lo suficientemente llamativa para captar la atención, pero estructurada para transmitir profesionalismo.

En branding, interfaces y material impreso, los tonos azules profundos transmiten confianza y legibilidad mientras que el amarillo aporta energía para resaltar, llamadas a la acción e información clave.

Por qué funcionan tan bien las combinaciones de azul oscuro y amarillo

Las combinaciones de azul oscuro y amarillo funcionan porque equilibran temperatura y contraste: el azul transmite estabilidad y profundidad, mientras que el amarillo se percibe brillante e inmediato. Juntos, crean una jerarquía visual natural sin recurrir a muchos colores adicionales.

El azul oscuro también sirve como base confiable para tipografía y componentes UI, especialmente cuando buscas legibilidad y un tono “confiable”. El amarillo se convierte en el acento perfecto para destacar, notificaciones y llamadas a la acción.

Usados con moderación, el azul oscuro y el amarillo pueden lucir sofisticados más que estridentes, especialmente si añades un neutro suave (crema, blanco roto o gris) para dar descanso a la vista.

Más de 20 ideas de paletas de colores azul oscuro y amarillo (con códigos HEX)

1) Puerto Soleado

HEX: #0b1f3b #123a63 #f6c445 #fff2c6 #2f5f8f

Ambiente: fresco, náutico, optimista

Ideal para: branding de viajes y banners principales

Fresca y náutica, evoca los primeros rayos de sol en un muelle tranquilo con aire puro y agua clara. Usa los tonos azul marino para títulos y navegación, y reserva el amarillo cálido para destacar llamadas a la acción y distintivos clave. Combínalo con abundante espacio blanco para un look costero limpio. Consejo: utiliza el amarillo más brillante solo en pequeños elementos de alto impacto para que transmita un aire premium y no ruidoso.

Ejemplo de imagen de “puerto soleado” generado con media.io

Media.io

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

Pruébalo gratis ahora

2) Mostaza de Medianoche

HEX: #071a2e #0f2d4a #d4a017 #f1e7c7 #3b6a93

Ambiente: sombrío, refinado, alto contraste

Ideal para: packaging premium y anuncios de productos

Sombría y refinada, evoca habitaciones iluminadas por velas y latón pulido sobre paredes de medianoche. Como combinación de azul oscuro y amarillo, resalta cuando el azul más oscuro ocupa el fondo y la mostaza se utiliza como acento controlado. Añade el crema cálido para respiro en etiquetas y paneles de ingredientes. Consejo: utiliza una superficie azul mate profunda y un único acento mostaza brillante para dar una sensación táctil al diseño.

Ejemplo de imagen de “mostaza de medianoche” generado con media.io

3) Baliza Náutica

HEX: #0a2440 #1b4f72 #ffd24a #f7f9fc #2d2a32

Ambiente: claro, seguro, enérgico

Ideal para: gráficos deportivos y merchandising de equipos

Clara y segura, parece la luz de un faro atravesando la niebla marina. Reserva el amarillo brillante para números, franjas y llamadas a la acción, mientras que los azules profundos sustentan las prendas base. El casi blanco mejora la legibilidad de textos pequeños y detalles de costura. Consejo: reserva el color carbón como delineado para perfilar sin añadir otro tono.

Ejemplo de imagen de “baliza náutica” generado con media.io

4) Foco de Museo

HEX: #0d1b2a #1b263b #f2b705 #e0e1dd #415a77

Ambiente: dramático, curado, elegante

Ideal para: carteles de exposiciones y portadas editoriales

Dramática y curada, evoca salas de galería donde un cálido haz de luz ilumina una única obra. Esta paleta de azul oscuro y amarillo funciona mejor cuando los azules ocupan grandes áreas tranquilas y el dorado destaca títulos o fechas. Usa el gris suave como espacio negativo para subtítulos y créditos. Consejo: coloca el amarillo como barra vertical estrecha para crear un punto focal inmediato.

Ejemplo de imagen de “foco de museo” generado con media.io

5) Pista Costera

HEX: #082032 #2c394b #ffcc29 #f4f4f4 #334756

Ambiente: moderno, estructurado, enfático

Ideal para: paneles UI y apps con muchos datos

Moderna y estructurada, sugiere señalización de pistas y marcadores direccionales nítidos. Usa los azules más oscuros para barras laterales y tablas de datos, y el amarillo brillante para estados activos y alertas. El blanco roto mantiene los gráficos legibles y evita que la interfaz resulte pesada. Consejo: limita el amarillo a una función de UI, como botones principales, para que los usuarios reconozcan el patrón al instante.

Ejemplo de imagen de “pista costera” generado con media.io

6) Denim Narciso

HEX: #102a43 #243b53 #fbd34d #fff8db #486581

Ambiente: amigable, casual, soleado

Ideal para: plantillas sociales y blogs de lifestyle

Amigable y casual, evoca el denim con un narciso en el bolsillo. Deja los azules medios para cuerpos de texto y marcos, mientras el amarillo suave destaca marcadores y stickers. El crema claro mantiene el aspecto general aireado para lecturas largas y carruseles. Consejo: suma formas sutilmente redondeadas en el tono más claro para suavizar detalles en diseños recargados.

Ejemplo de imagen de “denim narciso” generado con media.io

7) Seguridad Industrial

HEX: #001d3d #003566 #ffc300 #e5e5e5 #000814

Ambiente: audaz, utilitario, listo para advertencias

Ideal para: branding de construcción y señalización de seguridad

Audaz y utilitaria, recuerda a cintas de precaución sobre acero y luces nocturnas de trabajo. Usa el casi negro y el azul profundo para máximo contraste en fondos de señales, y el amarillo brillante para iconos e instrucciones clave. El gris neutro facilita la lectura de notas secundarias sin competir visualmente. Consejo: aumenta ligeramente el espaciado de letras en textos amarillos sobre azul oscuro para reducir vibración y mejorar la legibilidad a distancia.

Ejemplo de imagen de “seguridad industrial” generado con media.io

8) Limonada de Eclipse

HEX: #0b1320 #1c2541 #ffdd57 #f6f3ea #3a506b

Ambiente: cinematográfica, suave, un poco juguetona

Ideal para: flyers de eventos y promos musicales

Cinematográfica y suave, parece un resplandor de eclipse solar con un giro de limonada. Construye el flyer sobre azules profundos como base de cielo nocturno, y deja que el amarillo limón destaque la programación y el enlace a tickets. El blanco crema mantiene los textos pequeños nítidos sin ser excesivamente contrastados. Consejo: usa un degradado suave entre los dos azules para añadir profundidad sin perder coherencia visual.

Ejemplo de imagen de “limonada de eclipse” generado con media.io

9) Taller Real

HEX: #0a1f44 #1f3c88 #f7c948 #f0f4ff #2a6f97

Ambiente: inteligente, ingenioso, optimista

Ideal para: landing pages de startups y secciones destacadas

Inteligente e ingeniosa, evoca un taller luminoso donde las ideas encajan a la perfección. Estas combinaciones de azul oscuro y amarillo brillan en landing pages: usa azul profundo para estructura y credibilidad, y amarillo con moderación para captar la atención sobre el valor del producto. El azul claro-blanquecino otorga ligereza y facilidad de lectura a los bloques de contenido. Consejo: mantén los iconos en un azul uniforme y reserva el amarillo solo para estados interactivos.

Ejemplo de imagen de taller real generado usando media.io

10) Caléndula Tempestuosa

HEX: #0b2545 #13315c #f9a826 #eef2f3 #1f7a8c

Ambiente: aventurero, costero, azotado por el viento

Ideal para: anuncios de equipamiento outdoor y lookbooks

Aventurero y azotado por el viento, evoca nubes de tormenta acercándose sobre un cálido horizonte de caléndula. Utiliza los azules oscuros para chaquetas, tipografía y encabezados de alto contraste, luego marca puntos clave con el amarillo anaranjado para etiquetas y precios. El blanco roto frío soporta detalles de producto y especificaciones técnicas. Consejo: deja el turquesa solo como acento menor para costuras o pequeños chips de UI, así la paleta se mantiene coherente.

Ejemplo de imagen de caléndula tempestuosa generado usando media.io

11) Brillo de Tranvía Urbano

HEX: #0f172a #1e3a8a #fbbf24 #f8fafc #334155

Ambiente: urbano, nítido, enérgico

Ideal para: señalización y gráficos públicos informativos

Urbano y nítido, recuerda a las luces del tranvía reflejándose en el pavimento mojado de noche. El azul marino profundo y el gris pizarra crean jerarquías informativas fuertes, mientras el amarillo ámbar destaca paradas y alertas al instante. Usa el casi-blanco para mapas y etiquetas para mantener los detalles nítidos. Consejo: aplica el amarillo solo a una familia de símbolos, como iconos, para evitar recargar visualmente diagramas complejos.

Ejemplo de imagen de brillo de tranvía urbano generado usando media.io

12) Picnic en la Hora Azul

HEX: #101935 #23395d #f2d95c #f7f3e3 #406e8e

Ambiente: calmado, nostálgico, suave

Ideal para: invitaciones de boda y papelería

Sereno y nostálgico, evoca picnics al atardecer bajo farolillos y risas suaves. Usa el azul profundo para nombres y detalles formales, y deja que el amarillo mantecoso aparezca en bordes, motivos de lacre o pequeñas flores. La crema cálida tipo papel mantiene el toque romántico y apto para imprimir. Consejo: elige un papel texturizado y utiliza poco amarillo para resultados elegantes al imprimir.

Ejemplo de imagen de picnic en la hora azul generado usando media.io

13) Papelería Vintage

HEX: #0b2239 #2b4c7e #e8b339 #f3e9dc #6b7c93

Ambiente: patrimonial, académico, cálido

Ideal para: portadas de libros y sets de papelería

Patrimonial y académico, recuerda a cuadernos envejecidos, sellos de tinta y herramientas de escritorio de latón. Los azules oscuros son ideales para títulos y lomos, mientras el amarillo apagado funciona como dorado antiguo sin llamar mucho la atención. El crema tipo pergamino sirve para fondos grandes y el azul grisáceo para textos secundarios. Consejo: agrega un borde fino en azul medio para enmarcar los diseños y reforzar el aire vintage.

Ejemplo de imagen de papelería vintage generado usando media.io

14) Observatorio Dorado

HEX: #06121f #0b3c5d #f9c74f #f1faee #1d6a96

Ambiente: inquisitivo, cósmico, pulido

Ideal para: pósters científicos y diapositivas de conferencias

Inquisitivo y cósmico, evoca cartas estelares con un marcador dorado cálido trazando constelaciones. Utiliza el azul más oscuro para fondos y diagramas, añadiendo amarillo para hallazgos clave y llamados de atención. El blanco roto frío apoya información densa sin deslumbrar. Consejo: deja las cuadrículas de gráfico en azul medio para que los puntos amarillos sean los protagonistas.

Ejemplo de imagen de observatorio dorado generado usando media.io

15) Escudo Universitario

HEX: #0a1931 #185adb #ffc947 #f6f6f6 #2e3a59

Ambiente: audaz, colegial, animado

Ideal para: branding de clubes y carteles universitarios

Audaz y colegial, evoca escudos, pancartas y luces de estadio brillantes. Esta paleta azul oscuro-amarillo es una elección fuerte para marcas de organizaciones estudiantiles donde se necesita alta visibilidad. Usa el azul real para formas grandes y el amarillo para titulares llamativos; el gris claro como base de los carteles. Consejo: imprime una prueba pequeña primero, pues el azul real puede variar en papel sin capa.

Ejemplo de imagen de escudo universitario generado usando media.io

16) Señales de Mercado Nocturno

HEX: #0b132b #1c2541 #f8c630 #eaeaea #5bc0be

Ambiente: animado, tintado neón, urbano

Ideal para: menús de restaurantes y tarjetas promocionales

Animado y urbano, recuerda letreros brillantes sobre un bullicioso mercado nocturno. Usa los azules oscuros para fondos de menús y marcos fotográficos, luego coloca el amarillo en etiquetas de precio y destacados para escaneo rápido. El gris claro mantiene el texto legible en secciones densas. Consejo: usa el turquesa solo en pequeños marcadores, como niveles de picante, para no competir con el color principal de acento.

Ejemplo de imagen de señales de mercado nocturno generado usando media.io

17) Lona de Vela de Otoño

HEX: #0b2d39 #1d4e89 #f0b429 #fff3d6 #1a936f

Ambiente: terroso, campestre, seguro

Ideal para: marcas de camping y campañas de temporada

Terroso y seguro, evoca lonas de vela, agujas de pino y el sol tardío de temporada. Los azules profundos dan una base sólida para logos y banners, mientras el amarillo dorado aporta calidez a insignias y ofertas de tiempo limitado. Usa la crema para fondos respirables y el verde como nota sutil de naturaleza. Consejo: mantén el verde por debajo del 10% del diseño para que la paleta siga leyendo azul-amarillo antes que nada.

Ejemplo de imagen de lona de vela de otoño generado usando media.io

18) Noche de Galería

HEX: #050a30 #1b2cc1 #fcbf49 #f5f5f5 #2d2d2a

Ambiente: artístico, enérgico, moderno

Ideal para: branding para agencia creativa y portadas de reels

Artístico y lleno de energía, evoca aperturas de galerías con luces audaces y sombras marcadas. El azul eléctrico agrega un toque moderno, mientras el amarillo cálido mantiene la composición acogedora y humana. Usa el blanco para dar respiro y el carbón para pequeños detalles tipográficos. Consejo: Aplica el azul más brillante solo a un elemento por encuadre, como un logotipo, para no opacar el acento amarillo.

Ejemplo de imagen de noche de galería generado usando media.io

19) Clásico Atlético

HEX: #0a2342 #2ca6a4 #f6bd60 #ffffff #1d3557

Ambiente: limpio, deportivo, alegre

Ideal para: UI de app de fitness y onboarding

Limpio y deportivo, transmite la sensación de uniformes frescos y conos de entrenamiento brillantes. Usa el azul más oscuro para encabezados y navegación, luego el amarillo cálido para progreso, logros o recompensas. El blanco mantiene la interfaz ligera, facilitando el escaneo rápido. Consejo: asigna el turquesa solo a acciones secundarias, así los objetivos principales permanecen vinculados al acento amarillo.

Ejemplo de imagen de clásico atlético generado usando media.io

20) Lámpara Silenciosa de Biblioteca

HEX: #0b1d39 #1c3f60 #ffd166 #f6f1e9 #4f6d7a

Ambiente: tranquilo, estudioso, cálido

Ideal para: blogs educativos y diapositivas de cursos

Tranquilo y estudioso, recuerda una lámpara cálida en una biblioteca silenciosa por la noche. Estas combinaciones azul oscuro-amarillo son excelentes para lecciones y tutoriales, pues el contraste permanece legible sin ser agresivo. Usa los azules profundos para estructura y encabezados, y añade amarillo solo en términos clave y puntos de control. Consejo: mantén el texto principal en azul grisáceo suave para reducir la fatiga visual en páginas largas.

Ejemplo de imagen de lámpara silenciosa de biblioteca generado usando media.io

¿Qué colores combinan bien con azul oscuro y amarillo?

Los neutros son la apuesta segura: blanco, crema y gris claro mantienen la paleta ligera y ayudan a que tanto el amarillo como el azul oscuro sean legibles. Para impresión, el blanco roto cálido puede hacer que el amarillo se vea más rico y menos fuerte.

Si necesitas un tercer “color” de acento, el turquesa y el verde espuma son buenos puentes entre amarillo y azul en estilos costeros o deportivos. El carbón o casi-negro funciona bien para bordes, sombras y texto pequeño sin añadir un tono nuevo.

Para un enfoque más premium, prueba tonos metálicos como oro apagado o latón (como variante del amarillo), además de un azul pizarra frío para superficies de UI y gráficos.

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

Comienza con el azul oscuro como base: fondos, encabezados, navegación o formas grandes. Esto crea estructura y hace que el diseño se sienta intencionado y no saturado.

Utiliza el amarillo como foco de atención: botones principales, cifras clave, distintivos y etiquetas importantes. Limitar el amarillo a un solo rol principal (CTA, alertas o destacados) facilita el aprendizaje de la interfaz y escanear el diseño.

Agrega un color de panel neutro (crema/blanco roto) para áreas de contenido, formularios y bloques largos de texto. Esto reduce la fatiga visual y ayuda a la accesibilidad en diferentes dispositivos y condiciones de luz.

Crea visuales de paletas azul oscuro y amarillo con IA

Si quieres previsualizar cómo luce una paleta azul oscuro y amarillo en un cartel, landing page, empaque o pantalla, generar mockups rápidos es la forma más veloz de validar el contraste y la atmósfera.

Con la herramienta de texto a imagen de Media.io puedes pegar un prompt, describir el layout e iterar el énfasis de color en segundos — así decides si tu amarillo debe ser brillante como limón, mostaza u oro.

Siguiente: Paleta de colores dorado champán