20 combinaciones de paletas modernas de tonos de tormenta con códigos hexadecimales

Las paletas de tormenta combinan azules marinos profundos, grises pizarra y acentos de alto contraste para crear diseños modernos, audaces e instantáneamente cinematográficos.

A continuación encontrarás 20 combinaciones de colores de tormenta cuidadosamente seleccionadas con códigos HEX, más consejos prácticos para branding, UI, carteles y empaques.

Por Qué Funcionan Tan Bien las Paletas de Tormenta

Los colores de tormenta crean jerarquía naturalmente: las bases oscuras (marino, carbón, pizarra) hacen que la tipografía y los componentes de la interfaz se sientan sólidos, mientras los tonos de niebla más claros aportan aire para la legibilidad.

También transmiten “estado de ánimo instantáneo”. Los azules tormentosos y neutros fríos transmiten confianza y profesionalismo, mientras que un solo acento de relámpago (amarillo, cian, ámbar u oro) proporciona un contraste de alto impacto sin necesidad de muchos colores.

Porque estas paletas están entre lo neutro y lo saturado, se adaptan a diferentes medios: desde paneles de control SaaS estilizados hasta carteles cinematográficos, manteniéndose siempre atemporales y modernas.

Más de 20 Ideas de Paletas de Colores de Tormenta (con Códigos HEX)

1) Relámpago Sobre Pizarra

HEX: #0B1320 #1F2A44 #3E4C66 #8A94A6 #F2D14B

Ambiente: dramático, eléctrico, moderno

Ideal para: página de aterrizaje de startup tecnológica

Azules medianoche dramáticos y grises pizarra de tormenta evocan nubes abriéndose para un relámpago. Utiliza esta paleta para secciones principales, titulares y llamados a la acción (CTAs) que necesiten un contraste inmediato. Combina el amarillo con mucho espacio negativo y deja que los tonos fríos formen el fondo. Consejo de uso: reserva el amarillo relámpago sólo para un elemento principal de acción para evitar ruido visual.

Ejemplo visual de relámpago sobre pizarra generado con media.io

Media.io

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

Pruébalo Gratis Ahora

2) Hormigón Lavado por la Lluvia

HEX: #101820 #2B2F36 #5B6672 #A7B0BA #E6E9ED

Ambiente: minimalista, frío, firme

Ideal para: panel de control UI minimalista

Los grises concreto fríos evocan calles urbanas mojadas tras una larga lluvia, calmadas y enfocadas. Estos tonos funcionan maravillosamente para dashboards, tablas de datos y paneles de administración donde la legibilidad es fundamental. Combina con un único color acento saturado sólo si necesitas alertas o etiquetas de estado. Consejo de uso: reserva el gris más claro para tarjetas y superficies para mantener la jerarquía clara.

Ejemplo visual de hormigón lavado por la lluvia generado con media.io

3) Lavanda Nube de Tormenta

HEX: #1A1B2A #2D2B3F #5B4E70 #A49AB8 #E9E4F0

Ambiente: onírico, melancólico, editorial

Ideal para: diseño editorial de revista

El índigo ahumado y lavanda apagada evocan nubes al atardecer sobre un horizonte tranquilo. La mezcla es perfecta para artículos de revistas, páginas de poesía y lookbooks sofisticados que buscan suavidad sin perder profundidad. Combínalos con márgenes blanco hueso y tipografía serif discreta para lograr un ambiente editorial. Consejo de uso: utiliza lila pálido como destaque en citas destacadas y divisores de sección.

Ejemplo visual de lavanda nube de tormenta generado con media.io

4) Verde Azulado Trueno

HEX: #081C1E #0E3B43 #1B6B73 #7FB7B5 #D8F3F1

Ambiente: fresco, acuático, seguro

Ideal para: identidad de marca de bienestar

El verde azulado oceánico profundo con espuma de mar brumosa recuerda lluvia cayendo sobre acantilados costeros. Estas combinaciones destacan en branding wellness, empaques de spa y visuales calmantes de apps donde la confianza es clave. Combina con neutros suaves y tipografía sans redondeada para un aire amigable y moderno. Consejo de uso: usa la espuma de mar clara como fondo primario y deja que los verdes azulados oscuros destaquen en logotipos y encabezados.

Ejemplo visual de verde azulado trueno generado con media.io

5) Paraguas Noir

HEX: #050608 #14161A #2A2D34 #6B707A #D1D5DB

Ambiente: elegante, urbano, alto contraste

Ideal para: diseño de lookbook de moda

Los negros intensos y los grises grafito evocan un paseo nocturno bajo farolas y paraguas. La paleta resalta fotografía de producto, editoriales de moda y tipografía de lujo sin competir por atención. Combina con un solo acento metálico en acabados si quieres extra brillo. Consejo de uso: deja el texto en el gris más claro para comodidad, y usa casi negro en titulares.

Ejemplo visual de paraguas noir generado con media.io

6) Resplandor Asfalto Mojado

HEX: #0A0D12 #232A34 #3D4B63 #9AA4B2 #FFB000

Ambiente: energético, arenoso, ciudad nocturna

Ideal para: cartel de evento nocturno

Los azules asfalto y acero oscuro evocan una estética cinematográfica, como neón reflejándose en el pavimento mojado. Van perfecto para conciertos, carteles de vida nocturna o eventos tecnológicos que requieren un punto focal audaz. Combina con tipografía condensada y una cuadrícula fuerte para energía controlada. Consejo de uso: usa el ámbar como efecto de foco sobre detalles clave como fecha y lugar.

Ejemplo visual de resplandor asfalto mojado generado con media.io

7) Retumbo Distante Oliva

HEX: #10130F #2A3522 #4D5E3B #A3B18A #E9EDC9

Ambiente: terroso, resistente, calmado

Ideal para: empaque ropa exterior

Oliva musgoso y caqui apagado recuerdan nubes de lluvia sobre una senda boscosa, firme y resistente. Encajan en ropa outdoor, productos sustentables y etiquetas de herencia donde la naturaleza debe sentirse real. Combina con textura kraft o acabados mate para enfatizar el ambiente natural. Consejo de uso: reserva el caqui claro para paneles de fondo y mantener la información legible.

Ejemplo visual de retumbo distante oliva generado con media.io

8) Rosa Carga Estática

HEX: #1B0F17 #3B1E2D #6B3A4D #C48A9B #F4E3E7

Ambiente: romántico, alternativo, nocturno

Ideal para: diseño portada de álbum

Sombras de frutos oscuros y reflejos rosa empolvado evocan un trueno lejano con un pulso suave. Ideal para portadas de álbum, libros de poesía y campañas de boutique que desean emoción sin cliché. Combina con tipografía muy contrastante y texturas granuladas para un acabado moderno y melancólico. Consejo de uso: utiliza el rubor más pálido como borde delgado o etiqueta para enmarcar la obra.

Ejemplo visual de rosa carga estática generado con media.io

9) Cobre Cortado por Relámpago

HEX: #1A1512 #3A2C23 #6D4C3D #C08B5C #F1E2CF

Ambiente: cálido, rústico, refinado

Ideal para: carta menú de cafetería

Marrones espresso ahumados y el calor del cobre evocan luz de lámpara en una noche lluviosa. Ideal para menús de cafetería, marcas artesanales y papelería acogedora. Combina con papel crema y fuentes serif clásicas para un look cercano y premium. Consejo de uso: resalta los artículos de autor en cobre y mantén el texto general en marrón oscuro para equilibrio.

Ejemplo de imagen de cobre cortado por relámpago generado con media.io

10) Azul Tormenta del Puerto

HEX: #071821 #0E2A3A #164A63 #4D7C8A #C7DDE2

Ambiente: náutico, estable, profesional

Ideal para: interfaz UI de sitio web de viajes

Los tonos azules del puerto y los acentos de vidrio marino evocan olas rodando bajo cielos pesados, confiables y tranquilos. La paleta es ideal para plataformas de viajes, flujos de reservas y páginas con mucho contenido que requieren secciones claras. Combínalo con fotografía cálida y deja que el azul medio gestione botones y enlaces. Consejo de uso: utiliza el aqua pálido como fondo para filtros y paneles secundarios para reducir el peso visual.

Ejemplo de imagen de azul tormenta del puerto generado con media.io

11) Menta Granizo

HEX: #0A1A18 #0F3D3A #2D6A63 #9DD9D2 #E6FFFA

Ambiente: fresco, limpio, refrescante

Ideal para: pantallas de incorporación en aplicación móvil

Tonos verde-azules crujientes se sienten como una lluvia helada y aire fresco después de la tormenta. Son ideales para flujos de incorporación, aplicaciones de salud y experiencia de usuario de productos limpios donde la tranquilidad es clave. Combínalo con iconos simples y amplios espacios para mantener la experiencia ligera. Consejo de uso: utiliza la menta como color principal de superficie y reserva el teal más oscuro para navegación y estados activos.

Ejemplo de imagen de menta granizo generado con media.io

12) Lluvia Nocturna

HEX: #050A12 #0B1A2A #1E3347 #556B7A #B9C3CC

Ambiente: cinematográfico, melancólico, intenso

Ideal para: póster de película cinematográfica

Azules medianoche y grises acero fríos sugieren rayas de lluvia en el cristal y una ciudad vibrando en la oscuridad. Esta paleta de tormenta es perfecta para carteles de películas, portadas de libros y arte clave de campañas dramáticas. Combina con un solo acento cálido en la imagen si necesitas punto focal, pero mantén la tipografía fría y precisa. Consejo de uso: utiliza el gris claro para los créditos y la letra pequeña para que sea legible sin romper el ambiente.

Ejemplo de imagen de lluvia nocturna generado con media.io

13) Índigo Cargado

HEX: #0C1024 #1B1F4A #343A8C #7C7FE3 #E8E9FF

Ambiente: audaz, futurista, lleno de energía

Ideal para: UI de overlay para stream gaming

Índigos cargados y periwinkle eléctrico evocan relámpagos lejanos iluminando nubes densas. Estas combinaciones de colores de tormenta son perfectas para overlays de streaming, paneles de eSports y UI llamativos que necesitan profundidad y brillo. Combínalo con formas geométricas limpias y textos mayormente claros para contraste. Consejo de uso: usa el periwinkle más brillante solo para estados activos y notificaciones para mantener la jerarquía.

Ejemplo de imagen de índigo cargado generado con media.io

14) Neutros Muelle Niebla

HEX: #0D0F12 #202329 #3C4048 #8D949E #F5F6F7

Ambiente: neutro, pulido, corporativo

Ideal para: plantilla de presentación corporativa

Grises suaves de niebla y acentos casi negros evocan un muelle silencioso desapareciendo en la bruma. La paleta neutra es ideal para presentaciones, informes y plantillas de negocios estructuradas. Combínala con un solo color de marca para gráficas y métricas clave para evitar que las diapositivas se sientan planas. Consejo de uso: utiliza el gris más claro como fondo base de las diapositivas y reserva los tonos oscuros para encabezados y divisores.

Ejemplo de imagen de neutros muelle niebla generado con media.io

15) Cian Horizonte Eléctrico

HEX: #06141B #0B2B35 #0E5666 #29B6C8 #D8FBFF

Ambiente: brillante, tecnológico, limpio

Ideal para: infografía explicativa SaaS

El cian brillante contra el azul-verde profundo parece una tormenta despejando y revelando un horizonte resplandeciente. Es una gran opción para infografías SaaS, explicaciones de características y diagramas que requieren agrupación visual rápida. Combina con iconos lineales finos y mucho espacio para mantener el diseño aireado. Consejo de uso: utiliza el cian para números clave y destacados y los tonos oscuros para estructura y etiquetas.

Ejemplo de imagen de cian horizonte eléctrico generado con media.io

16) Oro Linterna de Tormenta

HEX: #0E1116 #1F2A33 #394B57 #8796A5 #D8B15A

Ambiente: lujo, acentuado cálido, seguro

Ideal para: anuncio de producto reloj premium

El grafito profundo y el acero frío establecen un tono de lujo, mientras el oro linterna añade un calor controlado como luz en medio de una tormenta. Esta mezcla funciona para anuncios de productos premium, tecnología avanzada y banners elegantes de ecommerce. Combina con texto mínimo y tipografía sólida para mantener la sofisticación. Consejo de uso: utiliza el oro con moderación para el logo, precio o un detalle clave para señalar calidad.

Ejemplo de imagen de oro linterna de tormenta generado con media.io

17) Pasteles Día Lluvioso

HEX: #1A2330 #2F3D4F #6C7A89 #C7CED6 #F7F2E8

Ambiente: suave, discreto, elegante

Ideal para: conjunto de invitaciones de boda

Azules grises suaves y marfil cálido evocan una llovizna delicada fuera de una habitación iluminada con velas. La paleta es ideal para papelería de bodas moderna, invitaciones minimalistas y tarjetas refinadas de anuncios. Combínala con arte lineal delicado y una tipografía clásica serif para mantener atemporalidad. Consejo de uso: imprime el tono más oscuro para nombres y títulos, y usa los grises más claros para bordes y detalles.

Ejemplo de imagen de pasteles día lluvioso generado con media.io

18) Burdeos Calle Trueno

HEX: #12070B #2C0F17 #5A1C2B #9B4A5D #E7C7CE

Ambiente: audaz, romántico, atmosférico

Ideal para: branding de librería y bolsa tote

El burdeos profundo y el rubor polvoriento evocan el trueno resonando por una calle estrecha iluminada por escaparates cálidos. Es ideal para identidad de librería, eventos literarios y packaging que busca carácter y profundidad. Combínalo con papel crema y tipografía vintage para un look acogedor y curado. Consejo de uso: mantén el rubor como fondo y usa el burdeos para logos y sellos para una sensación rica e intencionada.

Ejemplo de imagen de burdeos calle trueno generado con media.io

19) Alba Tras la Tormenta

HEX: #0B1D2A #143B4D #2C6E7B #F2B880 #F7E7C8

Ambiente: esperanzador, equilibrado, fresco

Ideal para: set de plantilla para redes sociales

Los azules tormenta fríos junto con el suave durazno de amanecer evocan el momento en que las nubes se aclaran y la luz regresa. Este equilibrio funciona bien para post sociales, plantillas de carrusel y branding de estilo de vida que busca contraste sin ser agresivo. Combina con tipografía limpia sans-serif y formas simples para que los colores sean los protagonistas. Consejo de uso: utiliza el durazno para llamadas o stickers y mantén los azules para estructura y consistencia.

Ejemplo de imagen de alba tras la tormenta generado con media.io

20) Calma Tras la Lluvia

HEX: #0E1821 #1F3240 #3E5C6B #A3B7C2 #EAF0F2

Ambiente: tranquilo, aireado, contemporáneo

Ideal para: moodboard de diseño interior

Los azules-grises fríos y los tonos de niebla suave evocan cielos tranquilos después de que las últimas gotas se desvanecen. La paleta es adecuada para moodboards de interiores, portafolios de arquitectura y branding de estilo de vida calmado. Combínala con texturas de madera cálidas o neutros beige suaves si quieres añadir confort sin perder claridad. Consejo de uso: deja que el tono más claro domine el lienzo y usa los azules más profundos para etiquetas y muestras.

Ejemplo de imagen de calma tras la lluvia generado con media.io

¿Qué colores combinan bien con tormenta?

Los tonos tormenta combinan mejor con neutros limpios y frescos (gris niebla, blanco roto, acero) para mantener los diseños legibles y modernos. Estos apoyan fondos, tarjetas y áreas de texto grande sin diluir el ambiente.

Para acentos, elige un color "relámpago": ámbar/amarillo para urgencia y CTAs, cian para un toque tecnológico o dorado para branding premium. Manténlo escaso para que la paleta siga controlada y no caótica.

Si necesitas calidez, incorpora durazno suave, cobre o rubor—especialmente para estilo de vida, editorial o packaging—mientras mantienes los azules/charcoal tormentosos como estructura principal.

Cómo Usar una Paleta de Colores de Tormenta en Diseños Reales

Empieza con una base oscura (azul marino/charcoal) para encabezados, secciones hero o navegación, luego utiliza un tono medio tipo pizarra/acero para paneles secundarios y divisores. Esto crea profundidad sin depender de sombras pesadas.

Asigna el tinte más claro a fondos y superficies de contenido para que la tipografía sea cómoda de leer. En UI, mantén los estados interactivos consistentes asignando un tono medio a los botones y un acento a “activo/primario”.

En impresión (carteles, menús, packaging), las paletas de tormenta lucen especialmente refinadas con acabados mate, grano sutil o degradados suaves—sólo evita usar múltiples acentos en el mismo diseño.

Crea Visuales de Paleta Tormentosa con IA

Si quieres ver cómo se comportan los tonos tormenta en composiciones reales, genera maquetas rápidas (secciones hero, carteles, packaging o pantallas de onboarding) antes de comprometerte con un sistema de diseño final.

Con Media.io de texto-a-imagen, puedes probar contraste tipográfico, ubicación de acento y ambiente general en minutos—luego itera los prompts para que coincida con el estilo de tu marca.

Usa tu set HEX favorito de arriba, describe el layout y destaca un color de acento como punto focal para lograr la estética tormentosa más limpia.

Siguiente: Paleta de colores Mansión Embrujada