21 mejores paletas de colores distópicos con códigos hexadecimales

Una paleta de colores distópica se construye sobre la tensión: neutros arenosos, pasteles contaminados y acentos de alta alerta que resultan industriales, controlados y ligeramente inquietantes.

A continuación se encuentran más de 20 ideas de paletas de colores distópicas con códigos HEX—además de notas prácticas para UI, carteles, branding, y prompts de IA que puedes reutilizar para generar imágenes a juego.

Por Qué Funcionan Tan Bien las Paletas Distópicas

Los esquemas de color distópicos resultan creíbles porque imitan materiales y luces reales: concreto, niebla, metal oxidado, farolas de sodio y el resplandor de pantallas. Ese realismo hace que los diseños se sientan anclados incluso cuando el concepto es futurista.

También crean jerarquía inmediata. Carbón profundo y grises azulados dan estructura, mientras que un solo acento de peligro (ámbar, verde tóxico, rojo sirena) dirige la atención sin necesidad de decorar de más.

La mayoría de las paletas distópicas son naturalmente "aptas para marca" en productos serios: son controladas, minimalistas y de alto contraste. Puedes orientarlas hacia ciberpunk, militar o cinematográfico solo cambiando un color de acento.

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

1) Ceniza de Concreto

HEX: #1C1F24 #3A4048 #6B727C #B6B1A6 #D9D4C9

Estado de ánimo: arenoso, frío, minimalista

Mejor para: paneles de control UI brutalistas

Arenosa y silenciosa como una ciudad tras el eco de las sirenas, estos grises cemento y neutros calcáreos transmiten control y tensión. Úsala para paneles de administración, tableros de datos y pantallas de sistema donde la claridad importa. Combina el tono más claro con mucho espacio en blanco y reserva el más oscuro para la navegación y encabezados. Consejo: limita el color de acento solo a los estados de iconos para que la interfaz se vea severa, no ruidosa.

Ejemplo de imagen de ceniza de concreto generada usando media.io

Media.io

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

Pruébalo Gratis Ahora

2) Neón Oxidado

HEX: #0F1114 #2B2F36 #A14E2D #D8893A #E6D2B8

Estado de ánimo: industrial, urgente, calidez difusa

Mejor para: anuncios tecnológicos y banners hero

Industrial y urgente, recuerda al acero oxidado iluminado por un letrero moribundo. Los tonos de óxido y ámbar resaltan mejor sobre fondos de grafito profundo para banners hero y destacados. Elige el arena pálido como espacio negativo para mantener la legibilidad y el aspecto premium. Consejo: aplica el ámbar brillante solo en el botón principal para evitar un exceso de cinta de advertencia.

Ejemplo de imagen de neón oxidado generado usando media.io

3) Caqui de Búnker

HEX: #121513 #2D332F #5B5F45 #8F8A5D #C8C3A1

Estado de ánimo: militar, sobrio, con base

Mejor para: identidad de marca outdoor y etiquetas

Sobrios y con base, estos verdes de búnker evocan lona, polvo y equipo de campo desgastado. Funcionan bien para branding al aire libre, empaques utilitarios y sistemas de etiquetado que requieren un tono disciplinado. Elige el caqui claro con tipografía negra para máxima legibilidad y un aspecto directo al punto. Consejo: usa el tono oliva medio para distintivos secundarios para mantener la jerarquía tranquila.

Ejemplo de imagen de caqui de búnker generado usando media.io

4) Violeta de Smog

HEX: #17131A #3A2E44 #6B5A7A #A69AA8 #E3DEE6

Estado de ánimo: melancólico, nocturno, introspectivo

Mejor para: portadas de álbumes y layouts editoriales

Melancólica y nocturna, la gama violeta evoca luces callejeras difusas en medio del smog. Úsala para portadas de álbumes, editoriales extensos o tipografía en carteles donde el ambiente sea tan importante como el contraste. Elige el lavanda suave con un fondo de tinta oscura para mantener la elegancia en vez de lo gótico. Consejo: añade grano sutil a los fondos para sensaciones cinematográficas en los degradados.

Ejemplo de imagen de violeta de smog generado usando media.io

5) Musgo Radiactivo

HEX: #0B0E0C #1F2A1F #3C5A3A #7CC04B #D6F2B8

Estado de ánimo: tóxico, vivo, alto contraste

Mejor para: UI para videojuegos y miniaturas sci-fi

Tóxico y vivo, evoca musgo brillando bajo luz negra en un túnel abandonado. Este set está hecho para UI de juegos, miniaturas sci-fi e indicadores de estado donde el verde debe destacarse al instante. Usa el musgo neón solo para resaltar y los verdes profundos en las superficies principales. Consejo: restringe la menta pálida solo para textos o trazos de iconos pequeños para evitar que se pierdan.

Ejemplo de imagen de musgo radiactivo generado usando media.io

6) Pizarra de Vigilancia

HEX: #0E141B #1F2C3A #2F4A5A #8AA0AE #E8EEF2

Estado de ánimo: clínico, atento, tecnológico

Mejor para: UI de seguridad SaaS y reportes

Clínica y vigilante, estos grises azulados evocan la luz de CCTV y salas de servidores. Son ideales para tableros de seguridad, auditorías y SaaS empresariales donde importan la confianza y la sobriedad. Combina el blanco helado con suficiente espacio para evitar sensación de muro de vigilancia apretado. Consejo: usa la pizarra media para filas en tablas y el tono más oscuro para barras laterales para hacer el escaneo rápido.

Ejemplo de imagen de pizarra de vigilancia generado usando media.io

7) Toque de Queda Nocturno

HEX: #050608 #141621 #2B2E3E #5E6176 #C9CBD6

Estado de ánimo: silencioso, tenso, nocturno

Mejor para: carteles de cine y títulos

Silenciosa y tensa, estos azules de medianoche evocan calles vacías bajo toque de queda. El rango es perfecto para tarjetas de título, pósteres de cine y layouts modo oscuro que requieran profundidad sin usar negros puros. Elige el gris pálido con tipografía condensada para agudizar el aire cinematográfico. Consejo: agrega viñeta suave usando el tono medio para dirigir la atención al titular.

Ejemplo de imagen de toque de queda nocturno generado usando media.io

8) Señalización Rota

HEX: #111315 #3E3B37 #B7A99A #E0C34E #F3EFE6

Estado de ánimo: desgastada, de advertencia, urbana

Mejor para: volantes de eventos y carteles ásperos

Desgastada y de advertencia, luce como vallas publicitarias descoloridas y señalización agrietada. Estos tonos crean combinaciones sólidas para flyers, carteles de protesta y gráficos editoriales grunge. Usa el amarillo de advertencia con texturas toscas o patrones tramados pero solo en bloques pequeños y subrayados. Consejo: apóyate en el blanco cálido para mantener legibilidad al añadir efectos de texto desgastado.

Ejemplo de imagen de señalización rota generado usando media.io

9) Tubería Fría

HEX: #0B0F12 #1C272E #3B4B4F #7A8C8A #D5DFDD

Estado de ánimo: mecánica, fría, utilitaria

Mejor para: infografías y documentos técnicos

Mecánicos y fríos, estos grises azul-verde recuerdan a tuberías, válvulas y acero empañado. Son fiables para documentación técnica, infografías y diagramas de sistemas donde se necesita un contraste calmado. Combina el tono niebla pálido con iconos lineales claros y permite que los tonos más oscuros definan la estructura. Consejo: limita las gráficas a dos tonos dominantes para que los datos resalten antes que la atmósfera.

Ejemplo de imagen de tubería fría generada usando media.io

10) Amanecer en el páramo

HEX: #241C1A #5A3B2E #A96A4A #D0A27A #F1E6D6

Estado de ánimo: polvoriento, esperanzador, cinematográfico

Mejor para: portadas de libros y arte clave cinematográfico

Polvoriento pero esperanzador, parece un amanecer atravesando arena y humo. Usa esta paleta para portadas de libros, arte cinematográfico y páginas de destino que necesiten calidez sin parecer alegres. Empareja el umbra intenso con amplios márgenes y utiliza los tonos arena-melocotón para grandes gradientes. Consejo: añade una sola sombra dura en el tono más oscuro para que las composiciones se sientan abrazadas por el sol y reales.

Ejemplo de imagen del amanecer en el páramo generado por media.io

11) Núcleo del reactor

HEX: #0A0C10 #1B2330 #2E3D57 #F05A3A #F2E7D8

Estado de ánimo: cargado, peligroso, de alta tecnología

Mejor para: branding de startup y secciones de llamada a la acción

Cargado y peligroso, sugiere metal caliente dentro de una máquina fría. El contraste entre azules acero y naranja encendido crea combinaciones distópicas ideales para branding de startups y páginas con muchas CTA. Usa el naranja con la crema clara para botones y distintivos, y deja los fondos en azul profundo para mantener el dramatismo. Consejo: evita usar el naranja para texto regular; resérvalo para interacciones y resaltados.

Ejemplo de imagen de núcleo de reactor generado usando media.io

12) Niebla estática

HEX: #0D0E10 #2A2B2E #5B5D62 #A8ABB2 #F4F5F7

Estado de ánimo: desolado, moderno, aireado

Mejor para: sitios minimalistas y sistemas tipográficos

Desolados y modernos, estos grises lucen como estática sobre una pantalla con niebla. Idóneos para webs minimalistas, sistemas de tipografía y portafolios que buscan dramatismo sin color. Usa el casi negro con el casi blanco para texto nítido y el gris medio para suavizar separadores. Consejo: agrega microcontraste matizando ligeramente las tarjetas con el gris claro para evitar un plano monótono.

Ejemplo de imagen de niebla estática generada con media.io

13) Polvo de cantera

HEX: #15110E #3A3028 #6D6258 #A79E93 #E7E1D7

Estado de ánimo: terroso, desgastado, discreto

Mejor para: embalaje artesanal y catálogos

Terroso y desgastado, recuerda a piedra triturada, tierra seca y cuero envejecido. Estos tonos funcionan genial para empaques artesanales, catálogos y sistemas de marca que necesitan textura sin color brillante. Combina el tono más claro con mucho espacio y usa el marrón más oscuro para marcas de logo. Consejo: un grano de papel sutil hará que los neutros se sientan intencionados y no insípidos.

Ejemplo de imagen de polvo de cantera generado por media.io

14) Impermeable ácida

HEX: #0E1012 #2C3136 #55606A #C7D24A #E7EBD0

Estado de ánimo: mojado, urbano, brillante de advertencia

Mejor para: lanzamientos streetwear y lookbooks

Mojado y urbano, parece el reflejo del asfalto bajo un impermeable neón. Usa estos tonos en lookbooks de streetwear, anuncios de lanzamiento y composiciones tipográficas atrevidas. Combina el amarillo-verdoso ácido con carbón para contraste enérgico y reserva el tono pálido para espacios de respiración. Consejo: utiliza el acento como microdetalle repetido, como un eslogan o etiqueta, en lugar de un fondo completo.

Ejemplo de imagen de impermeable ácida generado por media.io

15) Alarma de disturbio

HEX: #120B0C #3A1C20 #7A2E34 #D23B3B #F2D7D7

Estado de ánimo: agresivo, urgente, dramático

Mejor para: gráficos de campaña y titulares audaces

Agresivo y urgente, evoca la luz de sirena cortando humo oscuro. Esta combinación es ideal para gráficos de campaña, titulares potentes y banners de anuncios que deben detener la mirada. Combina el rojo intenso con borgoña profundo para crear profundidad y usa el rubor pálido solo como panel de contraste detrás del texto. Consejo: mantén los gradientes al mínimo para que el rojo destaque y dé autoridad.

Ejemplo de imagen de alarma de disturbio generado con media.io

16) Terminal blackout

HEX: #000000 #0E1A14 #1F3B2C #4F8A63 #CFEBD9

Estado de ánimo: hacker, codificado, nocturno

Mejor para: interfaz tipo terminal y herramientas de desarrollo

Con calma de hacker y nocturno, evoca un terminal brillante en una habitación oscura. Estos verdes crean una convincente gama distópica para herramientas de desarrollo, interfaces estilo terminal y pantallas de login. Utiliza el verde menta destacado con negro puro para contraste de código y los verdes medios para paneles. Consejo: usa el verde más brillante solo para el cursor activo, estados de éxito y lecturas numéricas cortas.

Ejemplo de imagen de terminal blackout generado usando media.io

17) Azul verdoso decadencia urbana

HEX: #0C1011 #1E2A2C #2F4E4C #5FA39A #D9F1ED

Estado de ánimo: corroído, frío, atmosférico

Mejor para: visuales musicales y posts sociales

Corroído y frío, estos verdes azulados recuerdan metal oxidado y concreto húmedo. Funcionan para visuales musicales, posts sociales y fondos en movimiento que buscan mood sin mucha oscuridad. Combina el tono verde marino con carbón para texto y la aqua pálida para brillos suaves. Consejo: añade desenfoque sutil o efecto bloom para que el teal se perciba como luz reflejada, no color plano.

Ejemplo de imagen de azul verdoso decadencia urbana generado por media.io

18) Carnaval desaturado

HEX: #1A1A1E #3E3B46 #7C6A72 #B09A87 #E7DFD6

Estado de ánimo: inquietante, nostálgico, desvanecido

Mejor para: collages editoriales y fanzines

Inquietante y nostálgico, recuerda la pintura desvanecida de atracciones antiguas tras mucho tiempo cerradas. Los malvas desaturados y beige polvoriento son ideales para zines, collages editoriales y impresiones artísticas. Combina el beige cálido con carbón oscuro para legibilidad y usa los malva para recortes y pies de foto. Consejo: un efecto de impresión ligeramente desajustada hará que la paleta resulte intencionadamente inquietante.

Ejemplo de imagen de carnaval desaturado generado por media.io

19) Cinta de advertencia apagada

HEX: #0F0F10 #2A2A2B #666154 #C2B65A #F0EEDC

Estado de ánimo: advertencia, polvoriento, utilitario

Mejor para: alertas UX y pantallas de estado del sistema

Pesada en advertencia y polvorienta, parece cinta señalizadora abandonada bajo sol y polvo. Estos tonos son perfectos para alertas UX, pantallas de estado y tips de onboarding donde se requiere atención sin neón. Usa el amarillo apagado con carbón para iconos y reserva el tono crema para paneles de mensaje. Consejo: reserva el amarillo solo para advertencias para mantener la jerarquía.

Ejemplo de imagen de cinta de advertencia apagada generada con media.io

20) Costa del exilio

HEX: #0B1416 #193038 #2F5B63 #8DA7A5 #E3ECEA

Estado de ánimo: ventoso, distante, melancólico

Mejor para: editoriales de viaje y overlays fotográficos

Ventoso y distante, evoca el rocío marino frío y muelles vacíos al amanecer. Úsalo para editoriales de viaje, overlays de fotos y secciones web que necesiten atmósfera calmada e inquietante. Combina el teal profundo con tonos niebla claros para overlays legibles y deja el azul-gris medio para componentes UI. Consejo: si incluyes imágenes, mantenlas desaturadas para que la paleta siga siendo la protagonista.

Ejemplo de imagen de costa del exilio generado por media.io

21) Flor de ceniza

HEX: #141012 #3B2A2F #6E4A55 #B07B7C #EFE1DF

Estado de ánimo: ruina romántica, suave, ahumado

Mejor para: branding de belleza y packaging

Ruina romántica y suavidad ahumada se encuentran en estos rosa-marrones polvorientos. Son ideales para branding de belleza, embalaje de fragancias y landing pages boutique que buscan calidez con carácter. Combina los tonos rubor con marrón ciruela profundo para logos y títulos y guarda el tono pálido para áreas de producto despejadas. Consejo: usa acabados satinados o gradientes sutiles para que los malva se sientan lujosos, no planos.

Ejemplo de imagen de flor de ceniza generado por media.io

¿Qué Colores Combinan con Distópico?

Las paletas distópicas funcionan mejor con neutros contenidos: carbón, grafito, gris concreto, beige polvoriento y blanco sucio. Estos tonos resultan materiales y funcionales, haciendo el look general creíble.

Para acentos, elige colores “señal” que se lean como advertencias o estados del sistema—ámbar, amarillo-verde tóxico, naranja intenso, rojo sirena o cian helado—y utilízalos con moderación para mantener la tensión en lugar del juego.

Malvas, verdes azulados y azul-grises desaturados son colores puente ideales. Añaden atmósfera (noche, niebla, resplandor de vigilancia) preservando la legibilidad en interfaces y maquetaciones editoriales.

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

Comienza con una base oscura (casi negro, azul pizarra o verde profundo) y construye superficies con dos tonos medios. Reserva el tono más claro para áreas de texto, tarjetas y espacios, así tu diseño no se convierte en una masa oscura.

Usa los acentos con propósito. Un color de acento para acciones primarias o alertas, y un segundo (opcional) para estados secundarios como hover, seleccionado o progreso—más puede parecer ruido cyberpunk en lugar de contención distópica.

La textura ayuda a vender el mundo. Grano sutil, fibras de papel, desgaste de semitono o viñetas suaves pueden dar un aire cinematográfico y vivido a combinaciones muy neutras sin sacrificar claridad.

Crea Visuales de Paletas Distópicas con IA

Si necesitas visuales acordes (carteles, maquetas UI, fotos de packaging o creativos para redes), genéralos con prompts de texto y fija el look usando tus colores HEX elegidos y pistas de iluminación (niebla, destello neón, luz lateral dura o resplandor CRT).

Reutiliza los prompts bajo cada paleta y cambia el tema (dashboard → landing, flyer → portada de álbum) manteniendo las palabras de color y tonos anímicos para una serie coherente.

Media.io facilita crear imágenes estilo distópico en tu navegador—ajusta el resultado con ediciones rápidas para que la paleta siga consistente en todos los recursos.

Siguiente: Paleta de Color Azul Duke