Paletas de colores modernas: 22 combinaciones, códigos Hex y diseños con IA

A paleta de colores moderna se trata de contraste limpio, neutros respirables y un acento seguro que atrae la atención sin sobrecargar.

A continuación hay más de 20 combinaciones modernas de colores con códigos HEX, además de consejos prácticos para UI, branding e impresión para que puedas aplicarlas rápidamente.

Por qué funcionan tan bien las paletas modernas

Las combinaciones de colores modernas priorizan la claridad: anclajes oscuros fuertes, neutros suaves para el espacio y acentos que crean jerarquía instantánea. Esto hace que las composiciones se sientan estructuradas incluso con elementos mínimos.

Además funcionan bien en pantallas e impresión. Cuando tu paleta se basa en neutros estables, puedes cambiar imágenes, tipografías o estilos de animación sin interferir con los colores.

Aún más importante: las paletas modernas son fáciles de usar de manera constante. Un pequeño conjunto de tonos reduce la fatiga en la toma de decisiones y ayuda a que tu UI, sistema de marca o plantillas se vean cohesivos en todas partes.

Más de 20 ideas de paletas de colores modernas (con códigos HEX)

1) Salvia Concreto

HEX: #1f2328 #3c4a3f #a9b7a6 #e7e2d9 #c97c5d

Sensación: calma, arquitectónica, con base

Ideal para: tablero UI minimalista

El concreto frío y la salvia suave se sienten como un estudio silencioso con sol sobre materiales en bruto. Usa el grafito profundo para navegación, la salvia para paneles y avena para espacios de respiro. Un acento cálido de arcilla anima los CTAs sin ser estridente. Consejo: mantén el acento por debajo del 10% para conservar la jerarquía tranquila.

Ejemplo de imagen de salvia concreto generada usando media.io

Media.io

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

Pruébalo gratis ahora

2) Rubor Grafito

HEX: #15181d #3b3f47 #f1e6e8 #d89aa7 #b85c6a

Sensación: elegante, romántico, seguro

Ideal para: landing page de marca de belleza

El grafito con rubor empolvado evoca marcas de pintalabios sobre un tocador minimalista. Permite que el carbón estructure los titulares, luego suaviza secciones con rosa pálido. El tono baya profundo funciona como acento premium para botones y distintivos. Consejo: acompaña con mucho espacio en blanco y fotografía de producto nítida para una combinación moderna pulida.

Ejemplo de imagen de rubor grafito generada usando media.io

3) Arena Nórdica

HEX: #2a2f33 #6f7a7e #d5c7b1 #f5f1ea #a36f4e

Sensación: aireada, acogedora, discreta

Ideal para: mood board de interior escandinavo

Arena pálida y crema lechosa recuerdan cortinas de lino y suelos de madera clara. Usa gris pizarra como base, luego superpone beige y blanco roto para suavidad. Un toque de marrón tostado añade calidez sin romper el ambiente minimalista. Consejo: repite el tostado en pequeños detalles como íconos, reglas o costuras.

Ejemplo de imagen de arena nórdica generada usando media.io

4) Carbón Cobalto

HEX: #0f1115 #2b2f3a #1f5eff #cfd6e6 #f2f5ff

Sensación: nítido, tecnológico, enfocado

Ideal para: banner hero de SaaS

Sombras de carbón y cobalto eléctrico hacen que esta paleta moderna se lea como un modo nocturno con cursor brillante. Deja el cobalto para resaltar, enlaces y acciones primarias, y usa azul suave para gráficos y fondos. El casi negro mantiene todo limpio y profesional. Consejo: usa cobalto con moderación para dar énfasis y mantener la interfaz legible y premium.

Ejemplo de imagen de carbón cobalto generada usando media.io

5) Arcilla y Crema

HEX: #2b2a27 #7a5a49 #c47a5a #efe6db #f8f5f0

Sensación: cálida, artesanal, acogedora

Ideal para: empaque para tienda de cerámica

Tonos terrosos de arcilla y neutros cremosos recuerdan cerámica recién moldeada en la estantería del horno. Usa espresso oscuro para logotipos y texto, luego construye la etiqueta con crema y beige suave. El toque terracota añade alegría en sellos o acentos de patrón. Consejo: elige papel sin recubrimiento para que los colores luzcan más ricos y táctiles.

Ejemplo de imagen de arcilla y crema generada usando media.io

6) Circuito Menta

HEX: #0e1a16 #1e6f63 #6fe3cf #e6fbf6 #f3b33d

Sensación: fresco, lúdico, digital

Ideal para: pantallas de onboarding para app fintech

Menta fría y verde petróleo profundo recuerdan líneas de código limpio en espacio oscuro. Mantén el fondo casi negro para contraste y utiliza aqua en ilustraciones y estados de progreso. Un pequeño golpe de azafrán hace que los momentos clave sean gratificantes. Consejo: aplica el azafrán solo a una acción por pantalla para mantener el flujo tranquilo.

Ejemplo de imagen de circuito menta generada usando media.io

7) Terracota Atardecer

HEX: #2a1f1a #8b3f2f #e07a5f #f2cc8f #f7f3e8

Sensación: soleada, optimista, artesanal

Ideal para: póster estacional de café

Terracota y dorado miel evocan la luz del atardecer sobre la barra de un café. Usa el cacao profundo para texto, terracota para bloques y títulos y crema para dar aire a la paleta moderna. El tono dorado brilla en detalles como fechas, precios o insignias pequeñas. Consejo: añade grano sutil para que los tonos cálidos se vean impresos, no planos.

Ejemplo de imagen de terracota atardecer generada usando media.io

8) Lavanda Acero

HEX: #1b1d23 #515563 #a6a0c4 #d9d6ee #f4f3fb

Sensación: fresca, suave, contemporánea

Ideal para: doble página editorial de revista

Gris acero con bruma lavanda recuerda el crepúsculo sobre un skyline de cristal. Construye la composición con texto oscuro y paneles lila suaves para un ritmo refinado. El matiz más pálido funciona bellamente como espacio negativo alrededor de imágenes. Consejo: mantén las fotos ligeramente desaturadas para que los tonos permanezcan cohesionados.

Ejemplo de imagen de lavanda acero generada usando media.io

9) Tinta y Avena

HEX: #0c0f14 #2f3641 #b7b0a2 #e9e4da #ffffff

Sensación: limpio, atemporal, minimalista

Ideal para: tema para sitio web de portafolio

La tinta profunda y la avena tostada evocan una pared de galería con marcos mate. Deja que el negro y el carbón se encarguen de la navegación y los encabezados, y mantén las áreas de contenido cálidas con avena y crema. El casi-blanco respalda una apariencia tranquila y sofisticada sin parecer estéril. Consejo: utiliza líneas finas y sombras sutiles en lugar de bordes pesados.

Ejemplo de imagen de tinta y avena generado usando media.io

10) Cuarzo Durazno

HEX: #2a2422 #6d5f5a #f3c7b1 #f8e6dc #e08a7a

Sensación: suave, amigable, moderno

Ideal para: plantilla para boletín de bienestar

El durazno cuarzo y los neutros cálidos evocan una rutina lenta de mañana y botellas de cuidado de la piel limpias. Usa carbón para el texto principal e incluye paneles rubor para separar secciones. La nota coral hace que enlaces y botones sean acogedores sin ser demasiado dulces. Consejo: combínalo con iconos redondeados y un interlineado generoso para una lectura tranquila.

Ejemplo de imagen de cuarzo durazno generado usando media.io

11) Forest Minimal

HEX: #0f1411 #263a2e #4f6f5a #d8e1d7 #f3f6f2

Sensación: silencioso, natural, equilibrado

Ideal para: kit de identidad para marca ecológica

Los verdes apagados evocan senderos sombreados y empaques de papel. Usa el verde más oscuro para logotipos, el verde medio para formas secundarias y el salvia pálido para fondos. El blanco roto mantiene la identidad fresca y contemporánea. Consejo: pon una sola ilustración botánica lineal para reforzar el tema sin recargar.

Ejemplo de imagen de forest minimal generado usando media.io

12) Noche Cobre

HEX: #0b0d10 #232a31 #8a5a44 #d1b7a6 #f3ede6

Sensación: atmosférico, lujoso, cinematográfico

Ideal para: etiqueta de whisky premium

Tonos oscuros nocturnos con la calidez del cobre evocan un bar tenue y metal pulido. Pon la etiqueta en negro casi total y pizarra, luego resalta detalles clave con cobre y beige cálido. La crema pálida es útil para pequeños bloques de texto manteniendo la legibilidad. Consejo: usa el cobre como lámina o color de acento para un acabado controlado y exclusivo.

Ejemplo de imagen de noche cobre generado usando media.io

13) Pizarra Espuma de Mar

HEX: #12181b #3f5a60 #7fc8c2 #d9f0ee #f6fbfb

Sensación: fresco, costero, limpio

Ideal para: sitio web para clínica médica

La espuma de mar y la pizarra evocan aire limpio, agua calmada y una sala de espera serena. Usa pizarra para encabezados y navegación, y espuma de mar para tarjetas, iconos y acentos. El agua pálida ilumina los fondos sin hacerlos fríos. Consejo: mantén los colores de los botones un tono más oscuro que los paneles alrededor para accesibilidad clara.

Ejemplo de imagen de pizarra espuma de mar generado usando media.io

14) Ceniza Limón

HEX: #1c1f22 #5a5f66 #cfd3d8 #f2f3f5 #f2d44d

Sensación: brillante, minimalista, enérgico

Ideal para: presentación para startup

Grises ceniza suaves con chispa de limón evocan un escritorio limpio con una franja de resaltador. Usa carbón para títulos, gris claro para diapositivas y limón para métricas clave y llamadas. Esta paleta moderna sigue siendo profesional pero con un aire optimista. Consejo: reserva el amarillo solo para una serie de datos en las gráficas para evitar ruido visual.

Ejemplo de imagen de ceniza limón generado usando media.io

15) Rosewood Niebla

HEX: #1a1416 #4b3a3f #a06a75 #e2c7cc #f6eef0

Sensación: suave, maduro, elegante

Ideal para: set de invitaciones de boda

Rosewood y rubor brumoso evocan lazos de terciopelo y flores en acuarela. Usa el ciruela profundo para nombres y títulos, luego suaviza el cuerpo del texto con marrón-gris cálido. Rubor y rosa pálido crean un fondo suave que imprime bellamente. Consejo: elige papel texturado y mantén los adornos mínimos para destacar la tipografía.

Ejemplo de imagen de rosewood niebla generado usando media.io

16) Estudio Aguamarina

HEX: #0d1416 #1b3b40 #2b7c85 #bfe7ea #f2fbfb

Sensación: creativo, nítido, moderno

Ideal para: página de caso de estudio para agencia de diseño

Tonos aguamarina de estudio evocan tinta fresca y un lugar de trabajo ordenado. Usa el aguamarina oscuro para encabezados, el medio para insignias y enlaces, y agua helada para fondos de secciones. Esta paleta moderna apoya diseños limpios y jerarquía clara, ideal para contenido extenso. Consejo: prueba degradados sutiles entre los dos tonos de aguamarina para una combinación moderna y suave.

Ejemplo de imagen de estudio aguamarina generado usando media.io

17) Niebla Moca

HEX: #171412 #4a3f3a #9b8c84 #ded6d1 #f7f3f0

Sensación: suave, acogedor, refinado

Ideal para: página de aterrizaje para suscripción de café

Los tonos marrón moca y taupes brumosos evocan leche vaporizada, bolsas de papel y mañanas tranquilas. Usa espresso para títulos, taupe para divisores y blanco crema para mantener la página ligera. El tono medio es ideal para botones secundarios y campos de formulario. Consejo: combínalo con fotografía cálida y granulada para mantener coherencia visual.

Ejemplo de imagen de niebla moca generado usando media.io

18) Berry Concreto

HEX: #101216 #3a3e48 #b84a6a #f0c7d2 #e8e9ee

Sensación: urbano, audaz, estiloso

Ideal para: lookbook de streetwear

Grises concreto con acento berry evocan letreros de neón reflejados en pavimento húmedo. Usa carbón y acero para la maqueta, y deja que el berry resalte llamadas y precios. El rubor pálido suaviza bloques tras la tipografía sin perder carácter. Consejo: mantén la tipografía grande y de alto contraste para lograr esa energía editorial nocturna de ciudad.

Ejemplo de imagen de berry concreto generado usando media.io

19) Marfil Oliva

HEX: #1a1e18 #3b4534 #7b8a62 #e7e2d4 #fbfaf6

Sensación: terroso, calmado, sofisticado

Ideal para: empaque de cuidado de la piel orgánico

Verdes oliva y marfil evocan hojas prensadas, frascos cerámicos y etiquetas apotecarias limpias. Usa el verde más oscuro para logotipos, oliva para gráficos secundarios y marfil como base principal. La crema cálida mantiene un aspecto natural y acogedor. Consejo: una tipografía serif simple junto a iconos lineales finos aporta una paleta moderna y curada.

Ejemplo de imagen de marfil oliva generado usando media.io

20) Neutro de Acento Neón

HEX: #0f1012 #2b2d33 #b9bcc5 #f2f3f6 #b7ff3c

Sensación: audaz, deportivo, alto contraste

Ideal para: diseño de boleto para evento

Grises neutros con un golpe de verde neón evocan un póster de concierto nocturno bajo farolas. Mantén casi todo el diseño en monocromo y reserva el neón para la fecha, zona QR o una barra gráfica. El resultado es llamativo pero ordenado, ideal para combinaciones modernas que se leen de lejos. Consejo: evita degradados en el neón, usa solo formas planas para máxima claridad.

Ejemplo de imagen de neutro de acento neón generado usando media.io

21) Nube Azul Gris

HEX: #11161c #2f3b49 #6e7f90 #cfd8e3 #f6f8fb

Sensación: claro, confiable, profesional

Ideal para: panel de software b2b

Azules grisáceos como cielos nublados sobre edificios de vidrio crean una sensación estable y sin drama. Usa azul marino-casi negro para la estructura, azul gris medio para gráficas y celeste para fondos. Esta paleta moderna es ideal para pantallas con muchos datos donde el contraste calmado es clave. Consejo: añade un color interactivo solo oscureciendo el azul gris medio en vez de introducir uno nuevo.

Ejemplo de imagen de nube azul gris generado usando media.io

22) Tinta Albaricoque

HEX: #0e1016 #2d3340 #ffb08a #ffe2d3 #f7f7f9

Sensación: brillante, moderno, optimista

Ideal para: pantalla splash y iconos para app

El brillo albaricoque sobre azul tinta evoca el amanecer en una pantalla de móvil elegante. Usa los tonos oscuros para la base y los contornos de iconos, y deja que el albaricoque resalte la marca y los puntos clave. El toque durazno puede rellenar formas suaves detrás de los iconos para dar profundidad. Consejo: para un look moderno y nítido, mantén los degradados al mínimo y usa siluetas fuertes.

Ejemplo de imagen de tinta albaricoque generado usando media.io

¿Qué colores combinan bien con lo moderno?

Las paletas modernas funcionan mejor con neutros que aportan estructura: carbón, negro tinta, pizarra, gris cálido y blancos rotos. Estos colores mantienen la tipografía legible y los diseños calmados.

Para los acentos, elige un tono "señal" claro como cobalto, terracota, azafrán, baya o verde neón. La clave es la moderación: un solo acento usado de manera consistente se siente moderno; demasiados acentos resultan recargados.

Si deseas un aspecto moderno más suave, opta por tonos apagados (salvia, rubor, lavanda, espuma de mar) y controla la saturación para que el diseño siga viéndose minimalista e intencional.

Cómo usar una paleta moderna en diseños reales

Comienza con roles, no con muestras: asigna un tono oscuro para texto/navegación, uno claro para fondos, un neutro medio para bordes/paneles y un acento para acciones primarias. Esto hace que el sistema sea reutilizable en páginas y plantillas.

En la interfaz, protege el contraste para la accesibilidad manteniendo el texto principal oscuro sobre superficies claras (o viceversa en modo oscuro). Reserva tu color más brillante para botones, enlaces y estados clave, para que las interacciones sean reconocibles al instante.

En branding y impresión, usa neutros para cubrir la mayor parte del área y repite el acento en detalles pequeños y consistentes (insignias, sellos, líneas, iconos) para mantener la jerarquía moderna y nítida.

Crea visuales de paletas modernas con IA

Si tienes códigos HEX pero necesitas maquetas realistas, la IA puede generar visuales consistentes rápidamente—paneles, páginas de aterrizaje, etiquetas, carteles y kits de marca—usando las mismas reglas de paleta.

Para mantener resultados modernos, describe diseños limpios, iluminación plana, pocos elementos y una cuadrícula clara. Especifica dónde debe aparecer el color de acento (botones, insignias, resaltados) para que la imagen se mantenga enfocada.

Con Media.io, puedes convertir una idea de paleta en visuales alineados con la marca en minutos e iterar hasta que el tono sea exactamente el adecuado.

Siguiente: Paleta de Colores de Jardín de Hadas