Paletas modernas de tonos oscuros: 20 combinaciones con códigos hexadecimales

Las paletas de colores sombra se ubican en el punto ideal entre el contraste audaz y la neutralidad suave, lo que las hace fáciles de usar en interfaces, impresos y sistemas de marca.

A continuación encontrarás 20 combinaciones modernas de paletas en tonos sombra con códigos HEX, además de consejos prácticos de combinación y prompts de IA que puedes reutilizar para maquetas visuales rápidas.

Por qué las paletas sombra funcionan tan bien

Las paletas sombra se basan en casi negros, grises carbón y acentos suavizados, así que naturalmente crean jerarquía sin resultar estridentes. Obtienes profundidad y estructura incluso cuando los diseños son minimalistas.

También se traducen bien en dispositivos e impresos porque evitan extremos como el negro puro o colores ultra saturados. Eso mantiene los degradados suaves, la tipografía serena y los fondos más tolerantes.

Lo más importante es que los tonos sombra hacen que los acentos se vean intencionados. Un solo matiz de malva, cobre, verde azulado u oliva puede aportar personalidad a la marca mientras la base neutra mantiene la cohesión.

20+ ideas de paletas de color sombra (con códigos HEX)

1) Velo de Medianoche

HEX: #0f1116 #242833 #3b4252 #7a8090 #d8d9df

Estado de ánimo: misterioso, limpio, de alto contraste

Ideal para: dashboard UI SaaS en modo oscuro

Misterioso y definido como las luces de la ciudad cortando la niebla nocturna. Úsalo en diseños de modo oscuro donde la jerarquía importa y la legibilidad del texto debe mantenerse nítida. Combina el carbón más oscuro con el gris pálido para mejorar la legibilidad y utiliza el tono pizarra como intermedio para tarjetas y paneles. Consejo: reserva el tono más claro para métricas clave y botones principales para mantener el enfoque.

Ejemplo de imagen de velo de medianoche generado con media.io

Media.io

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

Pruébalo gratis ahora

2) Floración de Grafito

HEX: #1a1b1f #2f323a #4a4f5c #8e90a0 #cbb6c9

Estado de ánimo: moderno, suave, ligeramente romántico

Ideal para: set de identidad de marca de belleza

Moderna y aterciopelada, como polvo de grafito con un toque floral. Funciona muy bien para marcas de belleza donde quieras elegancia sin llegar al pastel. Coloca logotipos y tipografía en grafito oscuro, y usa el tono malva en acentos, patrones o plantillas sociales. Consejo: mantén fondos en grises fríos para que la nota rosada se perciba intencionada, no empalagosa.

Ejemplo de imagen de floración de grafito generado con media.io

3) Humo y Morera

HEX: #16131a #2c2431 #4d3a55 #7f6a86 #cfc6d6

Estado de ánimo: melancólico, lujoso, creativo

Ideal para: portada de álbum

Melancólica y lujosa, como humo de incienso en una sala de terciopelo. Estos tonos quedan bien en visuales musicales, lanzamientos indie y portadas cinematográficas con aire dramático. Usa morera sobre el casi negro para tipografía llamativa, y suaviza el marco con gris lavanda para profundidad. Consejo: añade grano sutil a las áreas más oscuras para que se mantengan ricas y no planas.

Ejemplo de imagen de humo y morera generado con media.io

4) Lino de Piedra de Tinta

HEX: #121418 #2a2d33 #545a63 #a8abb0 #efe6d8

Estado de ánimo: editorial, sólido, atemporal

Ideal para: maquetación de reportaje de revista

Sólido y editorial, como tinta sobre lino texturizado. Estas combinaciones de colores sombra son ideales para la lectura prolongada donde el contraste es suave y no agresivo. Usa el tono cálido de lino para márgenes y espacio negativo y estructura con líneas de carbón y subtítulos en pizarra. Consejo: mantén el cuerpo del texto en gris medio-oscuro para reducir la fatiga ocular en páginas densas.

Ejemplo de imagen de lino de piedra de tinta generado con media.io

5) Orquídea al Atardecer

HEX: #14121a #2a2436 #443a57 #6e6a86 #d9d3e8

Estado de ánimo: soñadora, elegante, atenuada

Ideal para: set de invitación de boda

Soñadora y elegante, como orquídeas a la luz tenue del anochecer. Es ideal para invitaciones que buscan romanticismo sin florales brillantes, especialmente para eventos de noche. Combina el púrpura más oscuro con el lila suave para texto y monogramas, luego usa los tonos más grisáceos para bordes y detalles finos. Consejo: imprime en papel sin recubrimiento para que los tonos oscuros no brillen.

Ejemplo de imagen de orquídea al atardecer generado con media.io

6) Pino Envuelto en Niebla

HEX: #101416 #253033 #3f5653 #7f928b #d7ddd8

Estado de ánimo: tranquilo, natural, equilibrado

Ideal para: envase de producto ecológico

Tranquilo y natural, como agujas de pino perdiéndose en la niebla matutina. Funciona bien en envases ecológicos donde buscas un guiño natural sin recurrir al verde brillante. Usa el verde azulado-carbón oscuro para etiquetas e introduce el tono niebla pálido para espacios en blanco y secciones de ingredientes. Consejo: aplica un acabado mate para que las tintas oscuras se perciban orgánicas y premium.

Ejemplo de imagen de pino envuelto en niebla generado con media.io

7) Rosa Ceniza

HEX: #1b1316 #332026 #5a3540 #9b6d79 #e7d6db

Estado de ánimo: ahumado, cálido, íntimo

Ideal para: diseño de menú de restaurante

Ahumada y cálida, como brasas bajo ceniza rosada. Estos tonos son ideales para menús y diseño de hospitalidad donde buscas intimidad y apetito sin colores estridentes. Titula con el tono más oscuro y usa rosa empolvado para divisores y destacados. Consejo: reserva el beige-rosado más claro para fondo o papel y evita sensación recargada.

Ejemplo de imagen de rosa ceniza generado con media.io

8) Puerto de Sombras

HEX: #0e1418 #1f2a30 #334851 #6f8791 #d2dde1

Estado de ánimo: fresco, náutico, profesional

Ideal para: interfaz de página de aterrizaje financiera

Fresco y sereno, como un puerto al anochecer con aguas azul acero. Es perfecto para landing pages financieras y consultoras que buscan transmitir confianza y estructura con un toque moderno. Usa el azul-negro oscuro para encabezados y áreas principales, luego añade tonos azules apagados para tarjetas y gráficos. Consejo: deja los llamados a la acción en el tono más claro con texto oscuro para un camino de clic seguro y tranquilo.

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

9) Obsidiana Silenciosa

HEX: #0b0c0f #1a1c22 #2f323b #5b606d #bfc3cc

Estado de ánimo: minimalista, enfocada, premium

Ideal para: web de portafolio fotográfico

Minimalista y enfocada, como obsidiana pulida con brillo suave. Úsala para portafolios donde la obra destaque y la interfaz permanezca casi invisible. Construye capas con grises sutiles para dar intención a galerías, pies de foto y navegación. Consejo: evita negro puro en grandes áreas y apóyate en el casi negro para preservar detalles en distintas pantallas.

Ejemplo de imagen de obsidiana tranquila generada usando media.io

10) Pizarra Lavanda

HEX: #15161b #2a2d38 #4a4f66 #8c90ab #e4e3f0

Estado de ánimo: tranquilo, tecnológico, accesible

Ideal para: pantallas de incorporación para aplicación de salud

Tranquilo y accesible, como niebla de lavanda sobre pizarra fría. Estos tonos son ideales para aplicaciones de salud o hábitos donde la confianza importa más que la intensidad. Usa pizarra para superficies primarias de la interfaz y añade lavanda en iconos y estados de progreso. Consejo: mantén el contraste consistente utilizando el tono más pálido para paneles de fondo y el más oscuro para etiquetas clave.

Ejemplo de imagen de pizarra lavanda generado usando media.io

11) Carbón y Arcilla

HEX: #14100e #2b221d #4e3c33 #8a7162 #e7dccf

Estado de ánimo: terroso, táctil, rústico

Ideal para: branding de estudio cerámico

Terroso y táctil, como polvo de carbón sobre arcilla cálida. Apto para creadores, estudios de cerámica y etiquetas artesanales que buscan materiales sinceros y una sensación arraigada. Deja que el marrón-negro profundo se encargue de logos y sellos, mientras la arcilla beige aporta fondos para envases y recibos. Consejo: añade un solo patrón texturizado utilizando el marrón medio para sugerir superficies hechas a mano sin saturar el diseño.

Ejemplo de imagen de carbón y arcilla generado usando media.io

12) Ciruela Tormentosa

HEX: #111016 #262232 #3c314e #6b5b7a #cfc5d6

Estado de ánimo: dramático, artístico, refinado

Ideal para: diseño de cartel de teatro

Dramático y refinado, como nubes de tormenta sobre cortinas de terciopelo ciruela. Estas combinaciones de color sombra brillan en carteles donde se necesita profundidad, contraste y sensación de anticipación. Usa el casi negro para el fondo, luego aplica tipografía ciruela y acentos lavanda suaves para guiar la mirada. Consejo: mantén un elemento focal fuerte y deja que el espacio oscuro aporte peso visual.

Ejemplo de imagen de ciruela tormentosa generado usando media.io

13) Oliva Ceniza

HEX: #121412 #262c24 #3f4a3a #7c8a73 #dde2d6

Estado de ánimo: apagado, natural, calmante

Ideal para: impresión botánica en acuarela

Apagado y calmante, como hojas de oliva secas a la sombra. Es ideal para arte botánico, impresiones de bienestar y papelería orientada a la naturaleza. Usa el gris-verde pálido como tono de papel y forma follaje con oliva medio y musgo profundo. Consejo: emplea bordes suaves y lavados transparentes para que la paleta permanezca ligera y no militar.

Ejemplo de imagen de oliva ceniza generado usando media.io

14) Verde Petroleo Fantasma

HEX: #0d1416 #1b2a2e #2f4c4f #6f8f91 #d6e1e1

Estado de ánimo: elegante, frío, futurista

Ideal para: anuncio de producto de ciberseguridad

Elegante y frío, como luz verde petróleo reflejada en vidrio oscuro. Funciona para anuncios de ciberseguridad que requieren un ambiente moderno y técnico sin saturación de neón. Usa verde petróleo profundo para bloques de fondo y aqua gris pálido para destacados, insignias y trazos de iconos. Consejo: mantén los gradientes sutiles y restringe tonos brillantes a señales pequeñas como indicadores de estado.

Ejemplo de imagen de verde petroleo fantasma generado usando media.io

15) Cacao a la Luz de la Luna

HEX: #120f0e #2a211e #46352e #8a7468 #e9dfd8

Estado de ánimo: acogedor, cálido, sofisticado

Ideal para: tarjeta de fidelidad de cafetería

Acogedor y sofisticado, como vapor de cacao bajo la luz tenue del café. Estos neutros cálidos son perfectos para marcas de café, tarjetas de fidelidad y envases pequeños que deben ser acogedores. Usa el tono espresso más oscuro para texto y sellos, equilibrándolo con fondos beige cremosos y acentos marrón suaves. Consejo: añade un borde fino en marrón medio para enmarcar el diseño sin hacerlo pesado.

Ejemplo de imagen de cacao a la luz de la luna generado usando media.io

16) Lila de Hierro

HEX: #14141a #2b2c3a #45465e #7a7b99 #dad8e6

Estado de ánimo: industrial, suave, contemporáneo

Ideal para: sitio web de estudio de arquitectura

Industrial pero suavizado, como vigas de hierro bajo la luz lila al atardecer. Es seguro para estudios de arquitectura o interiores que buscan precisión técnica con toque humano. Usa los tonos más oscuros para navegación y titulares, mientras el gris lila soporta cuadrículas, leyendas y etiquetas de proyectos. Consejo: deja mucho espacio en blanco para que el lila sutil se perciba como refinado y no decorativo.

Ejemplo de imagen de lila de hierro generado usando media.io

17) Arenisca Sooty

HEX: #151311 #2e2924 #564d44 #9a8f84 #efe7de

Estado de ánimo: herencia, natural, discreto

Ideal para: diseño de volante de museo

Herencia y discreción, como hollín posado en muros de arenisca antigua. La mezcla es adecuada para museos y eventos culturales que buscan credibilidad y calidez. Usa el marrón-gris oscuro para títulos y fechas, y superpone neutros arenisca para fondos y bloques informativos. Consejo: elige una fuente serif y una sans para reflejar el tono de lo antiguo y lo moderno.

Ejemplo de imagen de arenisca sooty generado usando media.io

18) Baya de Cuervo

HEX: #0f0c12 #251b28 #3f2a3e #7a5d73 #e2d6df

Estado de ánimo: enigmático, audaz, elegante

Ideal para: portada editorial de moda

Enigmático y elegante, como bayas oscuras bajo plumas de cuervo. Ideal para editoriales de moda que buscan dramatismo pero refinamiento en impresión. Fija el fondo de portada en casi negro y usa malva en los titulares y líneas delgadas para un acabado lujoso. Consejo: mantén los elementos de acento pequeños y deliberados para que los tonos oscuros predominen.

Ejemplo de imagen de baya de cuervo generado usando media.io

19) Carbón Nebuloso

HEX: #101114 #23262d #3d424e #7e8596 #e3e6ee

Estado de ánimo: neutro, aireado, confiable

Ideal para: presentación de diapositivas

Neutro y aireado, como carbón suavizado por niebla costera. Es una opción segura y moderna para presentaciones donde gráficos, números y títulos requieren claridad consistente. Usa carbón medio para texto, el tono pálido para lienzos y los tonos oscuros para divisores de sección. Consejo: aplica el tono más claro como panel sutil detrás de datos clave para mejorar la escaneabilidad.

Ejemplo de imagen de carbón nebuloso generado usando media.io

20) Cobre Nocturno

HEX: #120f12 #2a252b #463a45 #9a6b57 #f0e2da

Estado de ánimo: sombrío, cálido, premium

Ideal para: envase de vela de lujo

Sombrío y premium, como cobre reflejando luz en habitación oscura. Esta paleta sombra es perfecta para velas de lujo, etiquetas de fragancia y cajas de regalo que requieren calidez sin brillo. Usa el tono cobre solo en detalles estampados, confiando en carbón ciruela profundo para la estructura principal de la etiqueta. Consejo: mantén el fondo claro y cremoso para que los acentos metálicos destaquen y se perciban exclusivos.

Ejemplo de imagen de cobre nocturno generado usando media.io

¿Qué colores combinan bien con sombra?

Los tonos sombra funcionan mejor acompañados de luces suaves (blancos brumosos, beige lino, lilas pálidos) porque mantienen la legibilidad sin el salto brusco del blanco puro. Esto hace que las superficies de interfaz y páginas editoriales sean más fluidas.

Para acentos, elige un solo tono moderado que puedas repetir en componentes: malva, cobre, azul pizarra, verde petroleo apagado u oliva ceniza. Cuando la base es neutra oscura, incluso un acento de baja saturación se percibe deliberado.

Si necesitas más energía, añade un solo color "señal" en pequeñas dosis (botones, insignias, resaltados de gráfico). Mantenlo controlado para que la paleta siga dominada por sombras y no se convierta en un esquema de saturación alta.

Cómo usar una paleta de colores sombra en diseños reales

Empieza con mapeo por función: el más oscuro para encabezados/pies, oscuro medio para superficies principales, medio para bordes y paneles secundarios, y el tono más claro para tarjetas, modales o fondos de datos clave.

En branding, mantén logos y tipografía anclados en el neutro más profundo, luego permite que el acento aparezca en recortes de envases, plantillas sociales o detalles de foil/punto. Las paletas sombra resultan premium cuando la repetición es consistente.

En editoriales, evita usar el tono más oscuro en bloques grandes. Una base casi negra con márgenes blanco cálidos suele parecer más refinada y tiene mejor resultado de impresión.

Crear visuales de paletas sombra con IA

Si ya tienes códigos HEX, la forma más rápida de validar una paleta sombra es generar maquetas realistas (pantallas UI, carteles, envases) antes de diseñar todo manualmente. Así puedes probar rápidamente si el contraste, el ambiente y el balance de acentos son adecuados.

Reutiliza los prompts anteriores, cambia el concepto (tipo de marca, diseño, tema) y mantén la dirección de la paleta (carbón, pizarra, acentos apagados). Esto es especialmente útil para presentaciones y exploración temprana de marca.

Con Media.io, puedes generar múltiples variaciones en minutos y luego ajustar el prompt para controlar luz, textura y composición mientras conservas el tono sombra.

Siguiente: Paleta de colores tradicional