Les 20 meilleures palettes de couleurs urbaines avec codes hexadécimaux

Les palettes de couleurs urbaines capturent l’ambiance de la vie citadine moderne : des neutres terreux, des ombres nettes et des accents chaleureux qui rendent aussi bien sur écran que sur papier.

Vous trouverez ci-dessous plus de 20 idées de palettes de couleurs urbaines avec codes HEX, ainsi que des invites IA prêtes à l’emploi à copier dans Media.io pour générer rapidement des visuels assortis.

Pourquoi les palettes urbaines fonctionnent si bien

Les palettes urbaines semblent “authentiques” car elles sont construites sur les couleurs que les villes offrent naturellement : gris béton, charbons d’asphalte, bleus brumeux, rouges brique et lumière intérieure chaleureuse.

Elles sont aussi extrêmement pratiques. Les neutres sourds facilitent la typographie, les icônes et la photographie des produits, tandis qu’une seule couleur accentuée crée une hiérarchie claire pour les appels à l’action, les étiquettes et les points forts.

Le plus important, c’est que les palettes urbaines se déclinent aisément sur l’ensemble des systèmes de marque—fonctionnant de façon constante du composant UI à l’affiche, au packaging et aux modèles sociaux sans sembler trop tendance.

20+ Idées de palettes de couleurs urbaines (avec codes HEX)

1) Latte du trottoir

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

Ambiance : cosy, ancré, moderne

Idéal pour : identité de café et design de menu

Chaleureuse et urbaine, cette gamme donne la sensation d’un latte à la main un matin frais sur le trottoir. C’est une palette de couleurs urbaine sympathique pour menus, cartes de fidélité et petits emballages où la chaleur compte. Associez l’accent saumon avec du texte espresso pour le contraste, et gardez le fond aérien en blanc cassé. Conseil d’utilisation : utilisez le gris sauge pour les titres secondaires afin d’assurer une mise en page apaisée, sans tomber sur du “mignon”.

Exemple d’image de latte du trottoir générée via media.io

Media.io

Media.io est un studio IA en ligne pour créer et éditer vidéo, image et audio directement dans votre navigateur.

Essayez gratuitement dès maintenant

2) Acier et agrume

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

Ambiance : net, dynamique, confiant

Idéal pour : maquette UI de page d’accueil startup tech

Des gris acier nets avec une pointe d’agrume évoquent les tours de verre et les trajets rapides. L’association fonctionne très bien pour les dashboards et les sections principales où clarté et appel à l’action fort sont nécessaires. Gardez le charbon pour la navigation et l’agrume uniquement pour boutons, badge et métriques clés. Conseil : limitez le bleu canard aux graphiques ou liens afin de garder la hiérarchie lisible.

Exemple d’image acier et agrume générée via media.io

3) Crépuscule passage néon

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

Ambiance : audacieux, électrique, vie nocturne

Idéal pour : affiche d’événement nocturne

Rose électrique et lumière dorée sur des ombres profondes évoquent le néon rebondissant sur le pavé mouillé. Utilisez la base sombre pour de gros blocs de texte et laissez les accents chauds mettre en valeur les dates, DJs ou catégories de billets. Associez à des formes géométriques simples pour éviter la surcharge visuelle, et gardez le gris pâle pour l’espacement et la lisibilité. Conseil : essayez un dégradé du violet au noir derrière le titre pour un effet de profondeur instantané.

Exemple d’image crépuscule passage néon générée via media.io

4) Jardin sur le toit

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

Ambiance : frais, boutique, relax

Idéal pour : visuels de site hôtel boutique

Des verts frais et argiles chaudes évoquent jardinières de toit, pots en terre cuite et coins lounge tranquilles. Ces nuances sont parfaites sur les pages d’hôtellerie, surtout pour les commodités, sections de réservation et légendes photo. Associez la crème douce avec le vert profond pour un contraste apaisé et gardez l’argile pour boutons ou accents. Conseil : utilisez le charbon pour le texte courant afin de garder un aspect premium facile à lire.

Exemple d’image jardin sur le toit générée via media.io

5) Béton métro

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

Ambiance : professionnel, architectural, sobre

Idéal pour : brochure immobilière et fiches d’annonces

Des gris béton lisses avec une note cuivre atténuée rappellent un lobby flambant neuf à l’heure de pointe. Ce schéma urbain est idéal pour des mises en page immobilières demandant confiance, structure et une chaleur discrète. Associez l’accent cuivre à des photos fortes et utilisez le gris clair comme toile pour plans et spécifications. Conseil : titres en noir quasi-pur et texte courant sur gris pâle pour une lecture facile en impression.

Exemple d’image béton métro générée via media.io

6) Brique et brume

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

Ambiance : héritage, calme, studio-ready

Idéal pour : site portfolio d’architecture

La chaleur de la brique et la gris brume évoquent des façades anciennes sous un ciel couvert. Utilisez le neutre clair pour les pages projet et laissez brique et pêche accentuer les détails clés : localisation, année ou récompenses. Ajoutez beaucoup d’espace blanc et des lignes fines pour que le travail reste la vedette. Conseil : gardez le charbon pour les légendes et mesures afin de conserver un style architectural discipliné.

Exemple d’image brique et brume générée via media.io

7) Passage piéton minimaliste

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

Ambiance : minimaliste, éditorial, fort contraste

Idéal pour : mise en page éditoriale lookbook mode

Le fort contraste noir/blanc avec des neutres chauds évoque les rayures de passage piétonnet et devantures impeccables. Parfait pour lookbooks, couvertures typographiques et légendes d’images qui demandent de l’espace. Associez l’accent corail-saumon avec les séparateurs ou numéros de pages, pas avec de gros blocs. Conseil : gardez les photos légèrement désaturées pour faire ressortir le ton papier chaud.

Exemple d’image passage piéton minimaliste générée via media.io

8) Bleu tramway

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

Ambiance : frais, ville côtière, accueillant

Idéal pour : graphismes d’en-tête blog voyage

Le bleu canard et le sable évoquent un trajet en tram vers l’eau, avec bâtiments ensoleillés défilant. Utilisez le bleu pour barres de titre et navigation, puis laissez la crème rendre les longues lectures confortables. Associez le corail à de petits badges, pins de carte ou catégories pour guider le regard. Conseil : gardez le texte courant en charcoal pour la lisibilité sans la dureté du noir pur.

Exemple d’image bleu tramway générée via media.io

9) Rouille entrepôt

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

Ambiance : robuste, artisanal, industriel

Idéal pour : packaging canette bière artisanale

Les bruns rouillés et les tons sombres granuleux rappellent le bois récupéré, les poutres en acier et une petite brasserie artisanale. Ces teintes conviennent à un emballage où la texture et l’authenticité comptent, surtout avec une typographie audacieuse et des tampons simples. Associez le beige sable à des illustrations de houblon ou de céréales pour alléger l’étiquette. Astuce d’utilisation : utilisez le gris moyen pour le texte légal afin qu’il reste visible sans voler l’attention.

Exemple d’image de rouille d’entrepôt générée avec media.io

10) Greige Galerie

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

Ambiance : calme, épuré, moderne

Idéal pour : kit de marque design intérieur minimaliste

Les couches de greige doux évoquent un mur de galerie silencieux, illuminé par des spots chauds et encadré de mat. Cette palette urbaine s’adapte à merveille aux guides de marque, présentations et portfolios ayant besoin d’une touche sobre et raffinée. Associez le gris profond à une typographie sans-serif épurée, puis utilisez la terre cuite adoucie pour les accents et signatures. Astuce : gardez les fonds en ton le plus clair et réservez les tons foncés pour la structure et la hiérarchie.

Exemple d’image de greige galerie générée avec media.io

11) Fleurs d’Asphalte

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

Ambiance : élégant, romantique, nuit urbaine

Idéal pour : publicité créative de soin de la peau

Les tons asphalte foncés mêlés à du rose blush et baie rappellent des fleurs sur une ligne d’horizon nocturne. Utilisez ce mélange pour des publicités beauté élégantes sans tomber dans le pastel. Mariez le blush à une copie produit épurée et réservez la teinte baie pour les petits appels visuels comme les pourcentages ou bénéfices. Astuce : optez pour un fond gris froid pour que le blush paraisse frais et non sucré.

Exemple d’image de fleurs d’asphalte générée avec media.io

12) Train de Nuit

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

Ambiance : intense, fiable, cinématographique

Idéal pour : écrans d’onboarding application

Le bleu marine profond et l’ardoise évoquent la vue d’une fenêtre de train alors que les lumières de la ville défilent. Le beige chaud ajoute une touche premium, idéale pour les applis fintech, voyage ou adhésion. Associez le crème à de grands titres et gardez les boutons en beige pour un chemin visuel clair. Astuce : utilisez l’ardoise pour le texte secondaire pour que le fond sombre reste confortable.

Exemple d’image de train de nuit générée avec media.io

13) Pastels de Ruelles

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

Ambiance : doux, intime, néo-classique

Idéal pour : ensemble d’invitation mariage urbain

La pêche douce et le crème rappellent une ruelle silencieuse à l’heure dorée. Parfait pour des invitations alliant romance et modernité. Mariez les gris froids à une typographie sérif épurée, et utilisez le cacao profond pour les noms et détails importants. Astuce : ajoutez des filets gris fins pour structurer sans alourdir la composition.

Exemple d’image de pastels de ruelles générée avec media.io

14) Enseignes de Boulangerie

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

Ambiance : accueillant, artisanal, de quartier

Idéal pour : signalétique et affiches vitrines

Des tons de viennoiserie et cacao évoquent les panneaux lettrés à la main devant une boulangerie de quartier. Utilisez la base crème pour optimiser la lisibilité et laissez la terracotta porter le logo. Associez le gris-vert doux aux ingrédients ou labels secondaires pour éviter une palette trop sucrée. Astuce : imprimez le brun foncé comme couleur principale pour un effet plus doux que le noir pur.

Exemple d’image d’enseignes de boulangerie générée avec media.io

15) Bleu Heure d’Azur

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

Ambiance : corporate, soigné, visionnaire

Idéal pour : design de couverture de rapport annuel

Les tons bleus d’heure dorée et les reflets chauds rappellent la skyline juste avant la tombée de la nuit. Idéal pour les rapports et présentations nécessitant de l’autorité sans froideur. Associez les sections bleu ardoise à des graphiques couleur sable, puis utilisez le corail pour mettre en avant les réussites. Astuce : gardez les pictos en gris-bleu clair pour une cohérence professionnelle.

Exemple d’image de bleu heure d’azur générée avec media.io

16) Ticket de Tramway

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

Ambiance : organisé, rétro-moderne, lisible

Idéal pour : infographie carte du métro

Le papier crème et le charbon profond rappellent un ticket de tramway tamponné, net et à collectionner. Cette association convient aux plans, horaires, et graphismes où la clarté prime. Mariez le bleu sarcelle aux tracés des lignes et réservez le corail pour la ligne principale ou les points de transfert clés. Astuce : gardez les étiquettes en charbon et évitez les traits trop fins pour maximiser la lisibilité même en petit.

Exemple d’image de ticket de tramway générée avec media.io

17) Pêche de Trottoir

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

Ambiance : convivial, moderne, orienté-social

Idéal pour : modèles de carrousels réseaux sociaux

La pêche douce sur des tons neutres chaleureux évoque un trottoir ensoleillé devant une vitrine minimaliste. Utilisez le crème clair pour la majorité des slides, puis la pêche pour les titres, stickers ou prix. Associez le charbon foncé à une grande interligne pour une lecture aisée sur mobile. Astuce : gardez des ombres subtiles et privilégiez les formes simples pour un style épuré et percutant.

Exemple d’image de pêche de trottoir générée avec media.io

18) Place Pluvieuse

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

Ambiance : frais, stable, plein air

Idéal pour : double page catalogue équipement outdoor

Les gris froids et bleus brumeux évoquent une place sous la pluie et un ballet de parapluies. Idéal pour un catalogue où les photos produits nécessitent un cadre pragmatique. Associez l’accent argile aux prix ou highlights, et gardez le neutre clair pour la base. Astuce : le gris-bleu moyen est parfait pour les séparateurs et tableaux pour rester organisé sans surcharger la mise en page.

Exemple d’image de place pluvieuse générée avec media.io

19) Marché de Nuit du Quartier

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

Ambiance : animé, épicé, scène nocturne

Idéal pour : flyer festival street food

Les ombres prune avec touches corail et doré évoquent les lanternes au-dessus d’un marché de nuit bondé. Utilisez les tons foncés pour les aplats de fond et laissez les accents chaleureux guider l’œil vers la programmation, le lieu, l’horaire. Mariez le neutre pâle avec les petites zones de texte pour garantir la lisibilité. Astuce : choisissez une police simple et massive pour résister aux couleurs saturées.

Exemple d’image de marché de nuit générée avec media.io

20) Loft Moderne

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

Ambiance : chaleureux, sophistiqué, contemporain

Idéal pour : page héro atterrissage mobilier

Les neutres plâtre réchauffés d’un accent argile évoquent un loft calme à lignes épurées et lumière tamisée. Utilisez le ton crème comme toile principale, puis structurez avec titres charbon et grilles aérées. Mariez l’argile aux boutons ou étiquettes produits pour apporter de la chaleur sans dominer les photos. Astuce : gardez les panneaux secondaires en taupe pour une page premium et bien rythmée.

Exemple d’image de loft moderne générée avec media.io

21) Encre de Voûte

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

Ambiance : urbain, tranchant, moderne

Idéal pour : affiche drop streetwear

Les noirs encreux et gris froids rappellent un mur sous un pont, l’abricot vif fait penser à un sticker sur une peinture fraîche. Utilisez la base foncée pour la typo impactante et les visuels puissants. Mariez le neutre clair aux blocs infos produits, et réservez l’abricot à un élément phare comme la date ou le prix. Astuce : ajoutez des marges généreuses pour garder un esprit premium, même avec des tons forts.

Exemple d’image d’encre de voûte générée avec media.io

Quelles couleurs se marient bien avec Urbain ?

Les palettes urbaines sont optimales avec des neutres structurés : charbon, gris béton, blanc cassé et bleu ardoise. Ces teintes garantissent la lisibilité et un rendu visuel cohérent.

Pour les accents, choisissez une couleur chaude (saumon, argile, cuivre, agrume) ou un accent froid (sarcelle, bleu acier) pour guider l’attention. L’approche « un accent fort » donne au design urbain un look moderne et net.

Pour plus de nuances, ajoutez un second accent à petite échelle – liens, tracés de graphiques ou tags – tout en gardant les fonds et textes ancrés dans les neutres.

Comment utiliser une palette urbain dans des créations réelles

Commencez par une base neutre (blanc cassé ou gris clair) pour les fonds, puis réservez la teinte la plus sombre à la typographie et la structure UI. Cela crée le contraste net typique du design urbain.

Assignez ensuite votre couleur d’accent à un seul usage : bouton CTA, étiquette de prix, date d’événement, ou métrique clé. Quand chaque mise en avant utilise la même teinte, votre design paraît intentionnel et « city-clean ».

Enfin, gardez une saturation équilibrée. Les palettes urbaines sont plus impactantes quand les photos sont légèrement désaturées et les couleurs d’interface restent sourdes, pour laisser l’accent dominer visuellement.

Créer des visuels de palettes urbaines avec l’IA

Envie de mockups, affiches et concepts UI assortis à l’une de ces palettes urbaines ? Copiez l’invite sous la palette et générez un style visuel cohérent en quelques minutes.

Media.io facilite l’itération : testez différents formats, échangez le sujet (affiche, page d’accueil) et gardez la même ambiance pour votre marque.

Une fois l’image idéale obtenue, affinez-la pour vos campagnes, miniatures ou présentations – sans quitter votre navigateur.

Suivant : Palette de couleurs saumon clair