20 combinaciones de paletas modernas con tonos planos y códigos hexadecimales

Los colores planos son modernos, legibles y fáciles de adaptar a diferentes pantallas: perfectos para interfaces, branding, carteles e impresiones. Cuando los tonos son limpios (sin degradados), el diseño, la tipografía y la jerarquía cobran protagonismo.

A continuación, tienes 20 ideas de paletas de colores planos con códigos HEX, estados de ánimo y consejos prácticos de uso, además de ejemplos de prompts de IA que puedes reutilizar para generar imágenes coordinadas.

Por qué funcionan tan bien las paletas planas

Las paletas planas eliminan el ruido visual. Sin degradados ni texturas pesadas, los usuarios exploran más rápido, los estados de UI son más claros y la tipografía se mantiene nítida en todos los dispositivos.

También son predecibles en producción. Los rellenos sólidos se reproducen de forma más consistente en web, app e impresión, y son más sencillos de estandarizar en sistemas de diseño.

Lo más importante: los colores planos hacen que la jerarquía sea obvia. Puedes asignar roles (superficie, principal, acento, texto) y mantener tu interfaz o diseño coherente a medida que crece.

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

1) Arcillas Neutras Tranquilas

HEX: #f2e9e4 #c9ada7 #9a8c98 #4a4e69 #22223b

Estado de ánimo: equilibrado, tranquilo, refinado

Ideal para: guías editoriales de marca

Serenos y como una galería, estos neutros de arcilla recuerdan papel lino, sombras suaves y una confianza silenciosa. Funcionan muy bien para páginas de guías de marca, lookbooks y presentaciones donde la tipografía necesita espacio para respirar. Combínalos con un fondo blanco cálido y un acento de tinta profunda para los encabezados. Consejo de uso: mantén el texto principal en el azul marino más oscuro y reserva el malva para destacados, así preservas el contraste sin agresividad.

Ejemplo de imagen de arcillas neutras tranquilas generado con media.io

Media.io

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

Pruébalo ahora gratis

2) Toque de Menta

HEX: #e8f9fd #79dae8 #0aa1dd #2155cd #092a5e

Estado de ánimo: fresco, nítido, energético

Ideal para: maqueta de panel de control 2D

Nítidos y tecnológicos, estos tonos de menta a azul marino evocan agua clara, datos limpios y retroalimentación rápida. Destacan en dashboards, paneles de analítica y widgets SaaS donde importa la jerarquía. Equilibra el cian brillante con una barra lateral azul marino y usa fondos claros para mejorar la legibilidad. Consejo: usa el azul vívido para botones principales y el aqua suave para estados secundarios o hover.

Ejemplo de imagen de toque de menta generado con media.io

3) Soda de Durazno

HEX: #fff1e6 #ffd7ba #ffb085 #ff7a59 #2d3047

Estado de ánimo: juguetón, cálido, moderno

Ideal para: póster promocional para redes sociales

Divertida y apetecible, esta combinación recuerda a gaseosa de durazno, crema suave y un acento de atardecer vibrante. Estas combinaciones planas son perfectas para promociones sociales, anuncios para creadores y gráficos destacados. Combina el coral con el índigo profundo para contraste en el texto y deja que el durazno suave lleve el fondo. Consejo: evita los degradados y apuesta por formas audaces para preservar el efecto moderno y limpio.

Ejemplo de imagen de soda de durazno generado con media.io

4) Notas de Campo Forestal

HEX: #f6f4d2 #c8d5b9 #8fc0a9 #68b0ab #4a7c59

Estado de ánimo: terroso, tranquilo, al aire libre

Ideal para: concepto de packaging ecológico

Tonos terrosos y restauradores que evocan hojas prensadas, papel reciclado y caminatas matutinas. Perfectos para envases ecológicos, etiquetas sostenibles y branding natural. Combina con texturas kraft o un fondo crema para un resultado honesto y fresco. Consejo: usa el verde más oscuro para textos legales y los verdes medios para iconos y así mantienes la legibilidad sobre fondos claros.

Ejemplo de imagen de notas de campo forestal generado con media.io

5) Arcade Nocturno

HEX: #f7b801 #f18701 #f35b04 #3d348b #0e0b16

Estado de ánimo: audaz, eléctrico, dramático

Ideal para: diseño de volante de evento

Eléctricos y de alto contraste, estos tonos evocan luces de arcade, bocadillos nocturnos y titulares destacados. Funcionan mejor en flyers de eventos, carteles de clubes y campañas que necesitan energía instantánea. Combina los naranjas cálidos con violeta profundo para impacto y usa el negro como espacio negativo para evitar ruido visual. Consejo: limita el texto a dos grosores para que el color resalte aún más.

Ejemplo de imagen de arcade nocturno generado con media.io

6) Oficina Cielo Suave

HEX: #f3f8ff #deecff #b1d4e0 #3e7cb1 #1f2f56

Estado de ánimo: aireado, confiable, tranquilo

Ideal para: UI de página de inicio de SaaS

Aireados y confiables, estos azules evocan pasos claros de incorporación y una bandeja de entrada tranquila. Una paleta plana así funciona para páginas de inicio SaaS, secciones de características y tablas de precios donde la confianza es clave. Combina con mucho espacio en blanco y un azul marino para navegación para anclar la experiencia. Consejo: haz que el azul medio sea tu botón principal y usa los tonos claros como fondo de secciones para guiar el desplazamiento.

Ejemplo de imagen de oficina cielo suave generado con media.io

7) Albaricoque de Desierto

HEX: #fff4e0 #f2c6a0 #e07a5f #3d405b #81b29a

Estado de ánimo: cálido, artesanal, equilibrado

Ideal para: invitación de boda moderna

Cálidos y artesanales, estos tonos recuerdan piedra al sol, rubor de albaricoque y hojas de salvia frescas. Son ideales para invitaciones de boda modernas, tarjetas de "reserva la fecha" y papelería minimalista. Combina el azul pizarra profundo con crema para textos limpios y usa albaricoque como acento suave. Consejo: mantén los adornos sencillos (líneas delgadas o pequeños iconos) para que la paleta siga elegante y no rústica.

Ejemplo de imagen de albaricoque de desierto generado con media.io

8) Biblioteca Cítrica

HEX: #fff3b0 #ffcf56 #f29e4c #1b998b #2d3047

Estado de ánimo: inteligente, soleado, seguro

Ideal para: diseño de portada de libro

Inteligente y luminosa, esta paleta recuerda páginas resaltadas, cáscara cítrica y un subrayado de teal tranquilo. Resulta ideal para portadas de libros, manuales o cubiertas tipográficas audaces. Combina el índigo tinta con amarillo para mucha legibilidad y usa teal como contrapunto moderno. Consejo: mantén las imágenes a mínimo y deja que la tipografía oversize destaque para que los colores luzcan nítidos.

Ejemplo de imagen de biblioteca cítrica generado con media.io

9) Té de Burbuja Lila

HEX: #f8e8ee #fcd5ce #d8e2dc #bee1e6 #a0c4ff

Estado de ánimo: suave, tierno, relajante

Ideal para: anuncio de producto de cuidado de la piel

Suaves y reconfortantes, estos pasteles evocan espuma de bubbletea, azúcar de lila y envases aireados. Son ideales para anuncios de skincare, lanzamientos delicados y banners de bienestar que requieren un tono apacible. Combínalos con fondo blanco limpio o sonrojo muy pálido y mantén la tipografía ligera pero de alto contraste. Consejo: escoge un pastel dominante para el producto principal y usa el resto de apoyo, así evitas que el diseño parezca deslavado.

Ejemplo de imagen de lilac bubbletea generado usando media.io

10) Sprint monocromático

HEX:#f8f9fa#e9ecef#adb5bd#495057#212529

Estado de ánimo:Mínimo, rápido, enfocado

Ideal para:Conjunto de iconos y componentes de interfaz de usuario

Mínimo y enfocado, estos grises se sienten como un tablero de sprint limpio y un espacio de trabajo sin distracciones. Son perfectos para conjuntos de iconos, componentes de interfaz de usuario y documentación donde gana la consistencia. Combinar con un solo color de acento de marca en otro lugar de su sistema, y mantener estos neutros para la estructura. Consejo de uso: reserve el tono más oscuro para el texto y los bordes, y use el más claro para las superficies para mantener el contraste accesible.

Ejemplo de imagen de sprint monocromático generado usando media.io

11) Transporte marítimo

HEX:#e0fbfc#98c1d9#3d5a80#293241#ee6c4d

Estado de ánimo:Náutico, Atrevido, Profesional

Ideal para:Cubierta de diapositivas de presentación

Náuticos y profesionales, estos colores evocan gráficos de envío, aire fresco y una señal de coral segura. Utilice este esquema de colores planos para cubiertas de diapositivas, informes y plantillas de keynote que necesitan claridad con un poco de personalidad. Combinar el pale aqua con deep navy para los divisores de sección, y mantener coral solo para números clave o CTA. Consejo de uso: Repita el acento de coral en pequeñas dosis a través de las diapositivas para crear un ritmo consistente.

Ejemplo de imagen de flete marítimo generado usando media.io

12) Noche de Sakura

HEX:#ffe5ec#ffb3c6#ff8fab#a4133c#590d22

Estado de ánimo:Romántico, Dramático, Lujo

Ideal para:Portada del álbum de música

Romántica con un borde dramático, esta paleta se siente como flores de cerezo bajo las luces del escenario. Se adapta a portadas de álbumes pop y R&B, artes individuales y gráficos de merchandising de artistas que necesitan un corazón audaz. Combina el rosa pálido con el tono de vino profundo para un fuerte contraste focal y mantener la tipografía simple. Consejo de uso: Utilice el tono más oscuro como viñeta o marco para hacer que los rosa más brillantes parezcan intencionales, no azucarados.

Ejemplo de imagen de sakura night generado usando media.io

13) Mañana alpina

HEX:#f1faee#a8dadc#457b9d#1d3557#e63946

Estado de ánimo:Crujiente, aventurero, claro

Ideal para:blog de viajes hero header

Crispos y aventureros, estos tonos evocan aire frío, lagos glaciares y un marcador de senderos rojo brillante. Funcionan bien para encabezados de blogs de viajes, guías de destinos y secciones de héroes editoriales. Combina el azul marino con la menta pálida para una legibilidad limpia, luego usa el rojo con moderación para señalar acciones clave. Consejo de uso: Mantenga la ilustración del héroe simple y geométrica para que los colores se lean instantáneamente en amplias relaciones de aspecto.

Ejemplo de imagen de alpine morning generado usando media.io

14) Café de Terracota

HEX:#f7ede2#f5cac3#f28482#84a59d#2a9d8f

Estado de ánimo:Acogedor, amable, artesanal

Ideal para:Diseño de menú de cafetería

Acogedores y amigables, estos colores se sienten como leche al vapor, cerámica de rubor y una planta de menta en el mostrador. Son muy adecuados para menús de cafeterías, señalización de pequeñas empresas e insertos de envases de alimentos. Combine los rosa cálidos con los verdes más fríos para mantener el diseño equilibrado, y use la crema como sala de respiración. Consejo de uso: Establezca los precios en el verde más profundo para que permanezcan legibles contra los tonos de fondo más suaves.

Ejemplo de imagen de terra cotta Café generado usando media.io

15) Consola Retro

HEX:#eae2b7#fcbf49#f77f00#d62828#003049

Estado de ánimo:retro, punchy, Nostálgico

Ideal para:Pantallas de integración de aplicaciones

Retro y impactante, estos tonos traen a la mente consolas antiguas, fichas de arcade y mensajes de pantalla en negrita. Estas combinaciones de colores planos son excelentes para pantallas integradas donde desea una comprensión rápida y un impulso lúdico. Combine azul marino con crema para una copia clara, luego use naranja o rojo para el progreso y los resaltados. Consejo de uso: Mantenga las ilustraciones simples y use radios de esquina consistentes para que el aspecto permanezca coherente a través de los pasos.

Ejemplo de imagen de retro console generado usando media.io

16) Concreto frío

HEX:#f4f4f4#d9d9d9#b0bec5#546e7a#263238

Estado de ánimo:industrial, moderno, discreto

Ideal para:Diseño del portafolio de arquitectura

Industrial y discreto, este conjunto se siente como hormigón, acero y suave luz nublada. Se adapta a carteras de arquitectura, estudios de casos y presentaciones de estudio donde el trabajo debe permanecer en el centro del escenario. Combinar el carbón más oscuro con muchos márgenes gris claro, y mantener el azul-gris como una señal de sección sutil. Consejo de uso: use reglas finas y espacios generosos en lugar de bloques pesados para mantener una estructura premium y aireada.

Ejemplo de imagen de cool concrete generado usando media.io

17) Mercado de Otoño

HEX:#fff1c1#f4d35e#ee964b#f95738#0d3b66

Estado de ánimo:Festivo, cálido, seguro

Ideal para:banner de venta de temporada

Festivos y cálidos, estos tonos evocan puestos de mercado, luz dorada y una crispa chaqueta azul marino. Son excelentes para banners de venta de temporada, encabezados de correo electrónico y promociones minoristas que necesitan una urgencia amigable. Combinar el azul marino con el amarillo para un alto contraste y mantener el naranja para insignias o etiquetas de descuento. Consejo de uso: Evite usar todos los tonos cálidos a la vez en áreas grandes; Deja que un color cálido domine y use los otros como acentos.

Ejemplo de imagen del mercado de otoño generado usando media.io

18) Heladería

HEX:#fde2e4#fad2e1#c5dedc#dbe7e4#f0efeb

Estado de ánimo:Dulce, ligero, aireado

Ideal para:Invitación de la ducha del bebé

Dulces y aireados, estas cremas pastel y mentas se sienten como cucharadas en una caja de vidrio enfriada. Se adaptan a invitaciones de baby shower, anuncios suaves y papelería de fiesta suave. Combinar con simple serif o tipo sans redondeado y mantener los fondos mayormente crema para la legibilidad. Consejo de uso: Agregue un solo color de texto más oscuro, como el carbón, para que los tonos delicados no reduzcan la legibilidad.

Ejemplo de imagen de heladería generada usando media.io

19) Corte de galaxia

HEX:#f0f3bd#02c39a#00a896#028090#05668d

Estado de ánimo:Futurista, limpio, oceánico

Ideal para:UI móvil de fintech

Futurista y oceánica, estos azules se sienten como un tablero brillante en una habitación oscura. Son muy adecuados para la interfaz de usuario móvil de fintech, las pantallas de billetera y los flujos de seguridad donde la claridad genera confianza. Combinar el cal pálido como un color de reflejo y mantener el azul más profundo para la navegación y las cartas. Consejo de uso: use el color verde-azul más brillante solo para los estados de éxito para que la retroalimentación sea reconocible al instante.

Ejemplo de imagen de corte de galaxia generado usando media.io

20) Estudio de luz solar

HEX:#fff8e7#fee440#00bbf9#00f5d4#9b5de5

Estado de ánimo:Creativo, optimista, moderno

Ideal para:Página de inicio del portfolio del creador

Optimistas y creativos, estos colores parecen la luz del sol en un escritorio con marcadores brillantes cerca. Funcionan bien para carteras de creadores, páginas de inicio de agencias y marcas personales juguetonas. Emparejar el amarillo cálido con mucha crema para que no abrume, y usar el violeta para los botones o eslabones de las teclas. Consejo de uso: Elige dos colores dominantes por sección y mantenga el resto como pequeños acentos para evitar una página ruidosa.

Ejemplo de imagen de sunlit studio generado usando media.io

¿Qué colores combinan bien con los planos?

Las paletas de colores planos se combinan mejor con los neutros claros (blanco, blanco cálido, gris claro, carbón) porque preservan el aspecto limpio y gráfico y mantienen el contraste predecible.

Pruebe un enfoque de "un héroe + un acento": elija un tono plano dominante para superficies grandes, luego un solo acento de alta energía para CTA, insignias o números clave. Esto mantiene el sistema moderno en lugar de ruidoso.

Si necesitas más profundidad sin degradados, usa una rampa escalonada (claro, medio, oscuro) del mismo tono, más un acento contrastante (como coral contra azul marino o azul verde contra naranja).

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

Asigne roles a cada color antes de diseñar: fondo/superficie, acción primaria, acción secundaria, texto y bordes. Los colores planos se sienten intencionados cuando cada tono tiene un trabajo.

Para la interfaz de usuario, mantenga los tonos más claros para las superficies y reserve el color más oscuro para el texto y los divisores para proteger la accesibilidad. Para imprimir y carteles, use formas planas grandes y menos estilos de tipo para que la paleta se mantenga nítida.

Para evitar un aspecto "parecido a un juguete", limite los colores saturados a áreas pequeñas y deje que los tonos más suaves manejen la mayor parte del lienzo, especialmente en la marca moderna y los diseños de sitios web.

Crea visuales de paletas planas con IA

¿Necesitas una maqueta rápida que coincida con tu paleta de diseño plano? Generar imágenes visuales consistentes (carteles, pantallas de interfaz de usuario, portadas, empaques) reutilizando un estilo de prompt y cambiando solo las señales de color.

Con Media.io, puedes pegar las indicaciones anteriores, ajustar la relación de aspecto y crear un conjunto de imágenes coherentes que coincidan con el sistema de tu marca, sin comenzar desde cero cada vez.

Una vez que le guste un resultado, guarde el mensaje como una plantilla para que los activos futuros permanezcan consistentes en todas las campañas, páginas y plataformas.

Siguiente: Paleta de colores Dandelion