Los 20 mejores palettes urbanos con códigos hexadecimales

Las paletas de colores urbanos capturan la esencia de la vida moderna en la ciudad: neutros terrosos, sombras nítidas y acentos cálidos que lucen increíbles en pantalla y en impresión.

A continuación encontrarás más de 20 ideas de paletas de colores urbanos con códigos HEX, además de prompts de IA listos para usar que puedes copiar en Media.io para generar imágenes rápidas y a juego.

Por qué las paletas urbanas funcionan tan bien

Las paletas urbanas se sienten “auténticas” porque se basan en los colores que la ciudad ofrece naturalmente: grises de concreto, tonos carbón de asfalto, azules brumosos, rojos ladrillo y cálidas luces interiores.

Además, son increíblemente prácticas. Los neutros apagados facilitan la colocación de tipografía, íconos y fotografía de productos, mientras que un solo color de acento crea una jerarquía clara para llamados a la acción, etiquetas y destacados.

Y lo más importante, los esquemas urbanos escalan muy bien en sistemas de marca, funcionando de manera consistente desde componentes de interfaz hasta carteles, empaques y plantillas sociales sin verse demasiado de moda.

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

1) Latte de acera

HEX: #F4AFA5 #C9C6C1 #3B2F2F #8E9A93 #F7F3EE

Estado de ánimo: acogedor, equilibrado, moderno

Ideal para: imagen de marca y diseño de menú para cafeterías

Acogedora y cálida como ciudad, estos tonos recuerdan un latte en mano en una fresca mañana urbana. Es una paleta amigable para menús, tarjetas de fidelidad y pequeños empaques donde importa la calidez. Combina el acento salmón con texto espresso para contraste, dejando el fondo aireado con blanco roto. Consejo: usa el gris salvia para subtítulos secundarios y mantén el layout tranquilo, no recargado.

Ejemplo de imagen de latte de acera generada usando media.io

Media.io

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

Pruébalo ahora gratis

2) Acero y cítrico

HEX: #4C5866 #D7DCE2 #F2B441 #23262A #2F7C8A

Estado de ánimo: nítido, enérgico, seguro

Ideal para: mockup de UI para landing page de startup tecnológica

Grises acero vibrantes con un toque cítrico evocan rascacielos de vidrio y traslados a toda velocidad. Combinan muy bien en dashboards y secciones destacadas donde necesitas claridad y llamadas a la acción fuertes. Usa carbón para navegación y reserva el cítrico solo para botones, insignias y métricas clave. Consejo: limita el azul verdoso a gráficos o enlaces para que la jerarquía del acento sea legible.

Ejemplo de imagen de acero y cítrico generada usando media.io

3) Crepúsculo en el callejón neón

HEX: #1B1A22 #3B2A4A #E64B7A #F1C84C #B6B8C5

Estado de ánimo: audaz, eléctrico, vida nocturna

Ideal para: diseño de póster para evento nocturno

Rosa eléctrico y luz dorada sobre sombras profundas parecen neón rebotando en el pavimento mojado. Usa la base oscura para bloques de texto grandes y deja los acentos brillantes para fechas, DJs o niveles de entradas. Combina con formas geométricas simples para evitar ruido visual, y reserva el gris pálido para espaciados y legibilidad. Consejo: prueba un degradado de violeta a casi negro detrás del título para dar profundidad inmediata.

Ejemplo de imagen de crepúsculo en el callejón neón generada usando media.io

4) Jardín en la azotea

HEX: #2E5D50 #8FB8A6 #E7D7C6 #C46A4A #3C3C3C

Estado de ánimo: fresco, boutique, relajado

Ideal para: visuales para sitio web de hotel boutique

Verdes frescos y tonos terracota remiten a maceteros en la azotea y rincones tranquilos. Brillan especialmente en páginas de hospitalidad: comodidades, reservas y pies de foto. Contrasta el blanco crema con el verde oscuro para tranquilidad, reservando la arcilla para botones o detalles destacados. Consejo: usa carbón para el texto general para una apariencia premium y fácil de leer.

Ejemplo de imagen de jardín en la azotea generada usando media.io

5) Concreto metropolitano

HEX: #2D2F33 #6C7077 #B8BCC2 #F1F2F4 #A66B5B

Estado de ánimo: profesional, arquitectónico, sobrio

Ideal para: folleto inmobiliario y fichas de propiedades

Grises suaves como el concreto y un toque de cobre apaciguado evocan un lobby recién construido en hora pico. Este esquema es perfecto para layouts inmobiliarios que buscan transmitir confianza, estructura y calidez sutil. Destaca usando el acento cobre con fotografía potente y reserva el gris claro como lienzo limpio para planos y detalles. Consejo: usa negro casi puro para títulos y deja el texto general sobre gris claro para claridad en impresión.

Ejemplo de imagen de concreto metropolitano generada usando media.io

6) Ladrillo y niebla

HEX: #B55A4A #E6E0D8 #6E7B83 #2C2A28 #F3B48B

Estado de ánimo: patrimonial, tranquilo, listo para estudio

Ideal para: sitio web de portafolio arquitectónico

La calidez del ladrillo y el frío gris niebla evocan fachadas antiguas bajo cielos nublados. Usa el neutro claro en páginas de proyectos y deja el ladrillo y durazno para detalles clave como localización, año o premios. Combina con mucho espacio en blanco y líneas delgadas para que el trabajo destaque. Consejo: reserva el color carbón para leyendas y medidas para mantener un aire arquitectónico disciplinado.

Ejemplo de imagen de ladrillo y niebla generada usando media.io

7) Paso de peatones minimalista

HEX: #0F1012 #FFFFFF #B9BDC5 #E0D6C7 #D66A5E

Estado de ánimo: minimalista, editorial, alto contraste

Ideal para: editorial de lookbook de moda

El fuerte contraste entre blanco y negro con neutros cálidos suaves recuerda a los pasos de cebra y vitrinas pulidas. Es ideal para lookbooks, portadas tipográficas y pies de imagen que necesitan espacio. Usa el acento coral-salmón para divisores o numeraciones, y no en bloques grandes. Consejo: mantén las fotos ligeramente desaturadas para que el fondo neutro cálido sobresalga.

Ejemplo de imagen de paso de peatones minimalista generada usando media.io

8) Tranvía azul verdoso

HEX: #1F6A78 #86A9B0 #F7E7D3 #D27C5D #1C2024

Estado de ánimo: fresco, ciudad costera, acogedor

Ideal para: gráficos de cabecera para blog de viajes

Azul verdoso y arena suave evocan un paseo en tranvía hacia el mar, con edificios cálidos por el sol. Usa azul verdoso para barras de título y navegación y fondo crema para lecturas extensas. El coral va bien en etiquetas, pines o categorías para guiar la navegación. Consejo: mantén el texto general en carbón para legibilidad sin ser tan duro como el negro puro.

Ejemplo de imagen de tranvía azul verdoso generada usando media.io

9) Óxido de almacén

HEX: #7A3E2E #B46A4E #D9C1A7 #4A4F55 #1F1F1F

Estado de ánimo: robusto, artesanal, industrial

Ideal para: empaque para lata de cerveza artesanal

Los marrones oxidados y los tonos oscuros arenosos evocan madera recuperada, vigas de acero y una pequeña cervecería artesanal. Estas tonalidades encajan en envases donde la textura y la autenticidad importan, especialmente con tipografía audaz y sellos simples. Combina el beige arenoso con ilustraciones de lúpulo o grano para que la etiqueta no se torne pesada. Consejo de uso: utiliza el gris medio para el texto legal, así será visible sin robar la atención.

Ejemplo de imagen de óxido de almacén generado con media.io

10) Greige de Galería

HEX: #F2EEE8 #D6CEC4 #A39B92 #5A5957 #C98B7A

Estado de ánimo: tranquilo, curado, moderno

Ideal para: kit de marca de diseño interior minimalista

Las capas suaves de greige recuerdan una pared de galería silenciosa con focos cálidos y marcos mate. Esta paleta urbana es ideal para guías de marca, presentaciones y portadas de portafolios que requieren pulcritud discreta. Combina el gris profundo con tipografía sans-serif limpia, y utiliza la terracota apagada para acentos y firmas. Consejo de uso: mantén los fondos en el tono más claro y utiliza los oscuros para estructura y jerarquía.

Ejemplo de imagen de greige de galería generado con media.io

11) Floración de Asfalto

HEX: #24262B #5E6A75 #C7CDD2 #F2AFA5 #8A3B4A

Estado de ánimo: elegante, romántico, noche-urbana

Ideal para: publicidad creativa de productos de cuidado de la piel

Tonos de asfalto oscuro con rubor y bayas recuerdan flores ante un skyline nocturno. Usa esta mezcla en anuncios de belleza donde buscas elegancia sin caer en el pastel. Combina el rubor con textos limpios de producto y reserva el berry para pequeños destacados como porcentajes o beneficios. Consejo de uso: elige un fondo gris frío para que el rubor se vea fresco y no empalagoso.

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

12) Tren Nocturno

HEX: #0B0E14 #1E2A3A #4F6D7A #C7A27C #EAE2D6

Estado de ánimo: dramático, fiable, cinematográfico

Ideal para: pantallas UI de bienvenida para app

Azul marino y pizarra profundos evocan la vista desde una ventanilla de tren cuando las luces de la ciudad se difuminan. El tostado cálido aporta un toque premium ideal para apps fintech, de viajes o membresías. Combina la crema para encabezados grandes y usa el tostado en botones para marcar el camino visual. Consejo de uso: emplea la pizarra para texto secundario y así el fondo oscuro se mantendrá cómodo, no severo.

Ejemplo de imagen de tren nocturno generado con media.io

13) Pasteles Callejón Lateral

HEX: #F6C6B4 #F1E6D8 #B7C0C7 #8E9CA6 #5B4B4B

Estado de ánimo: suave, íntimo, clásico-moderno

Ideal para: set de invitación para fuga urbana

Melocotón suave y crema papel evocan una calle lateral tranquila durante la hora dorada. Estos tonos son perfectos para invitaciones que desean romance con un toque contemporáneo. Combina los grises fríos con tipografía serif limpia y usa cacao profundo para nombres y detalles clave. Consejo de uso: añade líneas grises finas para mantener la estructura sin perder el aire ligero.

Ejemplo de imagen de pasteles de callejón lateral generado con media.io

14) Señalización de Panadería de Esquina

HEX: #F3D1B8 #C06B5A #3A2F2C #A1A9A5 #F7F5F1

Estado de ánimo: acogedor, artesanal, de barrio

Ideal para: gráficos de señalización y cartel de tienda

Tonos cálidos de pastelería y marrón cacao remiten a pizarras rotuladas a mano frente a una panadería vecinal. Utiliza la base crema para máxima legibilidad y deja que el rojo terracota lleve la marca. Combina el verde gris apagado con señalamientos de ingredientes o etiquetas secundarias para que la paleta no sea demasiado dulce. Consejo de uso: imprime el marrón oscuro como color de texto principal para una apariencia más suave que el negro puro.

Ejemplo de imagen de señalización de panadería de esquina generado con media.io

15) Azul Hora Skyline

HEX: #2C3E50 #4B5D67 #95A5A6 #E0C097 #E76F51

Estado de ánimo: corporativo, pulido, avanzado

Ideal para: diseño de portada para informe anual

Tonos azul hora con toques cálidos evocan el skyline justo antes de que enciendan las luces. Es ideal para informes corporativos y argumentos de ventas que necesitan autoridad sin resultar fríos. Combina secciones azul pizarra con gráficos color arena y usa el acento coral en logros clave y destacados. Consejo de uso: mantén los íconos en el gris azul claro para lograr un ritmo profesional y coherente.

Ejemplo de imagen de azul hora skyline generado con media.io

16) Boleto de Tranvía

HEX: #F5F0E6 #D1C5B6 #2F3A3D #4F8A8B #E07A5F

Estado de ánimo: organizado, retro-moderno, claro

Ideal para: diseño infográfico de mapa de metro

Papel crema y carbón tinta evocan la sensación de un boleto de tranvía sellado, limpio y coleccionable. Esta combinación urbana es ideal para mapas, horarios e infografías donde la claridad es más importante que la decoración. Usa el verde azulado para las líneas de rutas y reserva el coral para una línea destacada o puntos de transferencia importantes. Consejo de uso: mantén las etiquetas en carbón y evita trazos demasiado finos para que siga legible en tamaños pequeños.

Ejemplo de imagen de boleto de tranvía generado con media.io

17) Pavimento Durazno

HEX: #F4AFA5 #F8EDE3 #C9C3BB #6D6A67 #2B2B2B

Estado de ánimo: amigable, moderno, enfocado en redes sociales

Ideal para: plantillas de carrusel para redes sociales

Durazno suave sobre neutros cálidos recuerda pavimento al sol y escaparates minimalistas. Usa la crema clara para la mayoría de diapositivas y el durazno para encabezados, pegatinas o precios. Combina carbón oscuro con espaciado generoso en las líneas para que subtítulos sean legibles en móvil. Consejo de uso: mantén las sombras sutiles y usa formas simples para un look limpio y llamativo.

Ejemplo de imagen de pavimento durazno generado con media.io

18) Plaza Lluviosa

HEX: #3D4A4F #6E7F86 #B4C0C6 #E9E3DA #9C5C4B

Estado de ánimo: fresco, constante, de exterior

Ideal para: maquetación de catálogo de equipamiento outdoor

Grises fríos y azules brumosos evocan una plaza lluviosa con paraguas moviéndose a ritmo lento. Estos tonos son ideales para catálogos donde las fotos de producto necesitan un marco práctico y bien sentado. Usa el acento arcilla para etiquetas de precio o destacados y reserva el neutro claro como base limpia. Consejo de uso: utiliza el azul gris medio para divisores y tablas, así el diseño sigue ordenado sin verse recargado.

Ejemplo de imagen de plaza lluviosa generado con media.io

19) Mercado Nocturno del Distrito

HEX: #2A1F2D #5C3D5A #D96C5F #F0B44C #E6E4DF

Estado de ánimo: animado, picante, escena-nocturna

Ideal para: volante para festival de comida callejera

Sombras ciruela con coral picante y luz dorada evocan faroles sobre un mercado nocturno lleno de gente. Usa los tonos profundos para bloques de fondo y deja que los acentos cálidos guíen al ojo hacia la programación, ubicación y horario. Combina el neutro pálido para textos pequeños, así los detalles seguirán legibles incluso con color audaz. Consejo de uso: mantén la tipografía simple y gruesa para que destaque entre los acentos saturados.

Ejemplo de imagen de mercado nocturno del distrito generado con media.io

20) Loft Moderno

HEX: #F1E9DD #C9B9A6 #7C7A73 #2C2C2C #C46D5C

Estado de ánimo: cálido, elevado, contemporáneo

Ideal para: hero para landing page de producto de mobiliario

Neutros de yeso cálido con acento arcilla evocan un loft silencioso, de líneas limpias y luz suave de tarde. Usa el tono crema como lienzo principal y ancla el diseño con encabezados en carbón y grids estructurados. Combina el acento arcilla con botones o etiquetas de producto para dar calidez sin opacar la fotografía. Consejo de uso: mantén paneles secundarios en topo para crear capas y sensación premium.

Ejemplo de imagen de loft moderno generado con media.io

21) Tinta bajo el Puente

HEX: #111316 #3E4650 #9AA3AD #E6DFD5 #F4A07B

Estado de ánimo: arenoso, vibrante, moderno

Ideal para: póster gráfico para lanzamiento streetwear

Negros intensos y grises fríos evocan una pared bajo el paso elevado, mientras el tono albaricoque destaca como una pegatina sobre pintura fresca. Usa la base oscura para tipografía audaz y fotos de alto impacto y combina el neutro claro para bloques de información de producto; reserva el albaricoque para un elemento destacado como fecha o precio. Consejo de uso: deja márgenes generosos para que estos tonos fuertes sigan siendo premium, no abrumadores.

Ejemplo de imagen de tinta bajo el puente generado con media.io

¿Qué colores combinan bien con el urbano?

Las paletas urbanas combinan mejor con neutros estructurados: carbón, gris concreto, blanco roto y azul pizarra. Estos tonos mantienen los diseños legibles y ayudan a que las fotos sean coherentes.

Para los acentos, elige un color cálido (salmón, arcilla, cobre, cítrico) o un acento frío (verde azulado, azul acero) para guiar la atención. Este enfoque de “un solo acento audaz” es lo que da a los esquemas urbanos su apariencia moderna y ordenada.

Si necesitas más variedad, añade un segundo acento a menor escala—como enlaces, líneas de gráficos o etiquetas—siempre anclando fondos y texto en tonos neutros.

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

Comienza con una base neutra (blanco roto o gris claro) para fondos y reserva el tono más oscuro para tipografía y estructura UI. Así crearás el contraste nítido propio del diseño urbano.

Luego asigna el color de acento a una sola función: botones de llamada a acción, etiquetas de precio, fechas de eventos o métricas clave. Si cada destaque es del mismo color, tu diseño se sentirá intencionado y “limpio-urbano”.

Por último, mantén la saturación equilibrada. Las paletas urbanas lucen mejor cuando las fotos están algo desaturadas y los colores de interfaz son apagados, dejando protagonismo al acento.

Crea visuales urbanos con IA

¿Quieres mockups, pósters y conceptos UI a juego para cualquiera de los esquemas urbanos de color anteriores? Copia el prompt bajo la paleta y genera un estilo visual coherente en minutos.

Media.io facilita la iteración: prueba diferentes relaciones de aspecto, cambia temas (de póster a landing page) y conserva la misma paleta para coherencia de marca.

Una vez tengas una imagen que te guste, puedes refinarla para campañas, miniaturas o presentaciones—sin salir de tu navegador.

Siguiente: Paleta de colores Salmón Claro