Schéma de couleurs jaune et gris : 20 palettes à essayer + Hex

Le jaune et le gris forment l’une des associations modernes les plus faciles à utiliser : le jaune apporte de l’énergie et de la convivialité, tandis que le gris ajoute structure, équilibre et une sensation “tech-neutral” haut de gamme.

Vous trouverez ci-dessous 20 palettes de couleurs jaune et gris avec leurs codes HEX, ainsi que des conseils pratiques pour l’UI, le branding, l’impression et la décoration intérieure—afin que vous puissiez choisir une ambiance et l’appliquer immédiatement.

Pourquoi les palettes jaune gris fonctionnent si bien

Le jaune attire naturellement l’attention, ce qui le rend parfait pour les éléments importants : boutons, badges, icônes ou petits accents de décoration. Le gris, quant à lui, fournit une base calme qui ne concurrence pas votre contenu.

Ensemble, ils créent une hiérarchie claire : le gris facilite la lisibilité et structure la mise en page, tandis que le jaune guide le regard vers l’essentiel. C’est particulièrement utile en design d’interface, affiches ou tableaux de bord où la clarté prime.

Les palettes jaune gris conviennent aussi bien aux styles minimalistes qu’audacieux. Vous pouvez garder une ambiance légère avec des gris doux et des jaunes clairs, ou opter pour un impact maximal avec du gris anthracite, du quasi noir et un jaune vif.

20+ idées de palettes de couleurs jaune gris (avec codes HEX)

1) Béton ensoleillé

HEX : #F6C945 #D9D9D6 #8A8D8F #2E2F33 #FFF6E0

Ambiance : lumineux, moderne, ancré

Idéal pour : interface de tableau de bord SaaS

Clairs et aériens comme la lumière du matin sur les trottoirs de la ville, ces tons inspirent la confiance sans hurler. Utilisez le blanc cassé doux comme toile principale, et réservez le jaune pour les actions et mises en avant clés. Les gris moyens assurent la lisibilité des tableaux et graphiques, tandis que le presque noir structure l’ensemble. Astuce : limitez le jaune aux petits éléments de l’UI pour qu’il reste percutant et accessible.

Exemple d’image de béton ensoleillé générée avec media.io

Media.io

Media.io est un studio IA en ligne pour créer et éditer des vidéos, images et audios dans votre navigateur.

Essayez-le maintenant gratuitement

2) Ardoise Moutarde

HEX : #C9A227 #6E7074 #2C2D30 #E7E2D3 #F3EFE6

Ambiance : riche, chaleureux, raffiné

Idéal pour : identité de marque pour un café-boutique

Chaleureuse et un peu vintage, la palette évoque les céréales toastées, le café torréfié et les tableaux d’ardoise. Ce duo jaune gris brille dans les logos, étiquettes ou en-têtes de menus si vous souhaitez une touche artisanale haut de gamme. À associer avec des papiers texturés et une police à empattement simple pour renforcer l’ambiance artisanale. Astuce : imprimez la couleur moutarde en accent et laissez l’ardoise dominer pour préserver la lisibilité.

Exemple d’image d’ardoise moutarde générée avec media.io

3) Brouillard Citron

HEX : #FFE36E #F2F2F0 #B9BCC1 #5A5D63 #1F2024

Ambiance : doux, frais, apaisant

Idéal pour : écrans d’intégration pour appli mobile

Douce et positive, l’ambiance rappelle un thé citronné par matin brumeux. Les neutres pâles gardent la lumière, tandis que les gris foncés offrent un contraste net. Utilisez le jaune pour les indicateurs de progression, icônes ludiques et micro-animations. Astuce : adoucissez le tout avec des composants arrondis et des espacements généreux.

Exemple d’image de brouillard citron générée avec media.io

4) Taxi sur Asphalte

HEX : #FFD100 #A8AAAD #3B3D42 #121316 #F5F5F5

Ambiance : audacieux, urbain, énergique

Idéal pour : affiche pour un meetup tech

Impactant et urbain, l’accord évoque les reflets néon et les trajets nocturnes en ville. Cette palette jaune gris s’exprime pleinement dans les forts contrastes : noir pour les textes, jaune vif pour l’accroche et gris pour l’info secondaire. Restez minimal sur la mise en page pour valoriser la palette. Astuce : placez des blocs gris derrière les petits textes pour une lecture optimale sur fond clair.

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

5) Dune Dorée

HEX : #E7B93C #CFC8B8 #9A9C9F #4A4D52 #FFF1D1

Ambiance : chaleureux, relaxant, naturel

Idéal pour : guide déco chambre douillette

Chaleureux et terre à terre, cela évoque dunes, lin et lumière d’après-midi. Mettez le blanc cassé crème sur les murs et la literie, puis apportez l’équilibre avec des textiles et meubles gris. Le doré est idéal sur un plaid, un abat-jour ou une décoration murale pour apporter une chaleur douce. Astuce : privilégiez les finitions mates pour garder un effet doux et apaisant.

Exemple d’image de dune dorée générée avec media.io

6) Mica Doux

HEX : #F2D06B #E5E6E8 #B3B6BB #70737A #2B2D31

Ambiance : propre, doux, premium

Idéal pour : design de packaging cosmétique

Soyeuse et discrète, cette harmonie rappelle l’éclat minéral et les serviettes de spa. Les gris clairs assurent une base d’hygiène, tandis que le jaune ajoute une subtile lueur aux détails et scellés. À associer avec une typographie sans sérif simple et beaucoup d’espace blanc pour une esthétique moderne et validée par les dermatologues. Astuce : gardez la nuance la plus foncée pour les petits textes, comme les ingrédients ou indications.

Exemple d’image de mica doux générée avec media.io

7) Miel Industriel

HEX : #F5B800 #D0D2D4 #8E9196 #3A3C40 #0F1012

Ambiance : élégant, structuré, affirmé

Idéal pour : interface page d’accueil e-commerce

Net et technique, ce combo rappelle le métal poli traversé de miel doré. Idéal pour l’e-commerce là où l’on recherche la confiance et la rapidité : gris neutres pour les grilles produits, quasi noir pour les textes, jaune pour les CTA. Associez-le à des photos produits épurées et un espacement régulier pour éviter la saturation visuelle. Astuce : testez des états hover avec une nuance de jaune plus claire pour la cohérence visuelle.

Exemple d’image de miel industriel générée avec media.io

8) Autobus Rétro

HEX : #FFCC00 #7A7D81 #4B4E53 #1C1D20 #FFF8D8

Ambiance : ludique, audacieux, nostalgique

Idéal pour : flyer d’équipe sportive

Énergique et rétro, ça évoque sols de gym, bus scolaires et uniformes classiques. Le jaune vif est réservé au nom de l’équipe et aux dates, les tons charbon assurent un design affirmé. Utilisez une typo large et des icônes simples pour le style rétro. Astuce : le crème pâle offre un espace "respirant" pour éviter d’alourdir le flyer.

Exemple d’image d’autobus rétro générée avec media.io

9) Brume de Printemps

HEX : #F9D77A #E9E7E1 #BFC2C7 #6B6E75 #2E3035

Ambiance : romantique, aérien, délicat

Idéal pour : set d’invitation mariage botanique

Lumineux et vaporeux, cela rappelle des floraisons printanières sous un ciel pâle. Utilisez le jaune doux en accent sur un monogramme ou de fines bordures, et laissez les neutres doux pour le fond. Associez à des motifs de fleurs aquarelle et une écriture manuscrite pour un style intemporel. Astuce : imprimez les textes gris plus foncés que prévu pour garder la lisibilité sur papier texturé.

Exemple d'image de brume printanière générée avec media.io

10) Citrine Graphite

HEX : #F4C83A #C9CBD0 #9EA1A8 #3C3E45 #15161A

Ambiance : net, éditorial, contemporain

Idéal pour : mise en page de dossier magazine

Poli et moderne, il évoque l'impression glacée, le crayon graphite et un accent de citrine. Utilisez du noir et du gris profond pour les titres et extraits, puis laissez le jaune guider l'œil vers les repères de sections ou données. À associer à une photographie de qualité et une mise en page en grille pour un rendu premium. Astuce : limitez le jaune à 5 à 10 pour cent de la page pour ne pas dominer le ton éditorial.

Exemple d'image de citrine graphite générée avec media.io

11) Harvest Steel

HEX : #DFAF2B #D8D4CA #A2A4A7 #5D6066 #2A2B2F

Ambiance : stable, chaleureux, professionnel

Idéal pour : modèle de présentation PowerPoint

Équilibré et prêt pour les affaires, il évoque l’or des moissons associé à de l’acier brossé. Utilisez le jaune chaud pour les séparateurs de section et chiffres clés, tandis que les gris servent pour graphiques, légendes et notes de bas de page. Associez à des icônes simples et un espacement cohérent pour une image confiante, idéale pour les cadres. Astuce : gardez les fonds de diapositives clairs et réservez le gris le plus foncé pour les titres.

Exemple d’image de harvest steel générée avec media.io

12) Urban Marigold

HEX : #FFC93C #BFC1C4 #7C7F86 #34363B #FAFAF7

Ambiance : vif, moderne, accessible

Idéal pour : design de menu de restaurant

Vif comme des soucis sur le béton, il est accueillant, contemporain et facile à parcourir. Pour une palette de couleur jaune et grise sur les menus, utilisez le quasi-noir pour les noms de plats, le gris intermédiaire pour les descriptions, et le jaune pour mettre en avant les plats spéciaux ou épicés. À associer à des séparateurs nets et beaucoup d’espace blanc pour une ambiance premium-décontractée. Astuce : évitez le texte de corps en jaune et réservez-le aux étiquettes et icônes pour plus de clarté.

Exemple d’image de urban marigold générée avec media.io

13) Butterstone

HEX : #F7DA7C #F4F1E8 #C6C7C9 #8A8C90 #3E4045

Ambiance : doux, rassurant, familial

Idéal pour : moodboard de chambre d’enfant

Rassurant et doux, il rappelle les biscuits au beurre, les couvertures moelleuses et les siestes tranquilles. Utilisez le crème clair pour les murs et les gros meubles, puis ajoutez du gris via tapis, rangements et rideaux pour structurer en douceur. Le jaune fonctionne à merveille dans les petits objets déco comme les affiches ou peluches. Astuce : privilégiez des ampoules à lumière chaude pour maintenir une ambiance cosy.

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

14) Brass Pebble

HEX : #D8B34B #D4D5D7 #9A9DA3 #585B61 #1B1C20

Ambiance : élégant, technologique, premium

Idéal pour : publicité de produit montre connectée

Lisse et discret, il évoque le laiton brossé posé sur un galet poli. Faites dominer les gris en arrière-plan pour valoriser le produit, puis utilisez le jaune chaud en accent de marque pour les rappels ou les badges de fonctionnalités. À associer à un éclairage tranché et peu de texte pour une publicité résolument moderne. Astuce : évitez une saturation excessive du jaune en impression, et réservez-le à des rappels maîtrisés.

Exemple d’image de brass pebble générée avec media.io

15) Neon Safety

HEX : #FFEA00 #B7B9BC #6C6F75 #2D2F34 #0B0C0E

Ambiance : alerte, très contrasté, utilitaire

Idéal pour : ensemble de panneaux de sécurité chantier

Direct et accrocheur, il rappelle les chasubles haute visibilité et les marquages de sécurité fraîchement peints. Les combinaisons jaune-gris comme celle-ci sont idéales si le contraste est prioritaire : noir pour les icônes, jaune pour les avertissements et gris neutres pour l’information secondaire. À associer à une typographie sans-serif forte et à des formes simples pour que les messages restent clairs à distance. Astuce : laissez de larges marges pour que la signalétique reste lisible dans les environnements bruyants.

Exemple d’image de neon safety générée avec media.io

16) Cozy Wool

HEX : #E6C15A #E2E0DA #B0B1B4 #6A6C71 #2F3034

Ambiance : chaleureux, apaisant, tactile

Idéal pour : couverture lookbook maille

Tactile et accueillant, il évoque les pulls en laine et la lumière chaleureuse d’un café. Utilisez les neutres doux pour mettre en valeur la photographie, puis ajoutez le jaune en accent saisonnier dans les titres ou de petits éléments graphiques. Combinez avec une typographie éditoriale et de larges marges pour un lookbook premium. Astuce : assurez un contraste élevé sur les textes de couverture pour une bonne lisibilité en miniature.

Exemple d’image de cozy wool générée avec media.io

17) Modern Bauhaus

HEX : #F3C300 #E6E6E6 #9C9FA6 #2E3036 #111214

Ambiance : graphique, épuré, moderniste

Idéal pour : affiche murale géométrique

Graphique et discipliné, il rappelle les affiches modernistes et la géométrie nette. Utilisez le jaune pour de grandes formes, puis ancrez la composition avec des gris charbon et intermédiaires équilibrés. Associez à des cercles, lignes et compositions asymétriques pour un rendu prêt pour la galerie. Astuce : prévoir une large bordure pour que l’affiche paraisse soignée une fois encadrée.

Exemple d’image de modern bauhaus générée avec media.io

18) Desert Road

HEX : #EAC24A #D6D2C7 #9B9DA1 #4E5056 #1E1F23

Ambiance : cinématographique, brûlé par le soleil, aventureux

Idéal pour : bannière principale de blog voyage

Cinématographique et brûlé par le soleil, il rappelle une longue route fuyante dans la chaleur. Laissez le blanc sableux et les gris clairs former le fond, puis utilisez le jaune pour mettre en avant boutons ou catégories. Combinez avec des images panoramiques et peu de texte pour un esprit voyage moderne. Astuce : ajoutez une légère surcouche grise aux photos pour assurer la lisibilité des titres blancs.

Exemple d’image de desert road générée avec media.io

19) Saffron Smoke

HEX : #F1B12C #D3D4D6 #A1A3A8 #61646B #202227

Ambiance : sombre, dramatique, stylé

Idéal pour : affiche de film noir thriller

Sombre et stylé, il suggère une lumière enfumée, des lampadaires et une lueur safranée dans l'obscurité. Utilisez le quasi-noir pour la base et le texte, puis laissez le jaune percer comme point focal du titre ou d'un élément graphique. Associez à des textures granuleuses et une photographie à fort contraste pour un rendu cinématographique. Astuce : gardez les textes secondaires en gris clair pour leur lisibilité sans détourner l’attention.

Exemple d’image de saffron smoke générée avec media.io

20) Yellowed Newspaper

HEX : #F0D46A #E8E3D6 #B5B7BB #6E7177 #26282D

Ambiance : réfléchi, vintage, digne de confiance

Idéal pour : infographie de rapport développement durable

Réfléchi et légèrement vintage, il évoque le papier archivé et l’encre. Utilisez le beige clair comme base, puis structurez les sections et graphiques avec des gris froids. Le jaune est idéal en accent sur métriques clés, encadrés ou barres de progression sans être trop “corporate”. Astuce : limitez-vous à deux couleurs de données maximales et laissez le gris dominer les graphiques.

Exemple d’image de yellowed newspaper générée avec media.io

Quelles couleurs se marient bien avec le jaune gris ?

Le jaune et le gris se marient bien avec des neutres francs comme le blanc et le quasi-noir, car ils renforcent le contraste et maintiennent la lisibilité des mises en page. En UI, cela permet de réserver le jaune pour les CTA tandis que les gris servent pour les surfaces, séparateurs et textes secondaires.

Pour une atmosphère plus chaleureuse, ajoutez du beige, du crème ou du brun clair pour adoucir la palette et lui donner une touche “intérieur”. Pour un effet plus frais et moderne, ajoutez du bleu-gris ou des teintes acier pour un esprit technique et épuré.

Si vous souhaitez un accent marquant en plus du jaune, essayez une pointe maîtrisée (bleu sarcelle, cobalt ou rose pâle) sur de petites zones — icônes, étiquettes ou rappels graphiques — cela permet au jaune de rester la couleur d’appel principale.

Comment utiliser une palette jaune gris dans des designs concrets

Commencez par les rôles, pas seulement les couleurs : choisissez un neutre clair pour le fond, un gris moyen pour les surfaces, un gris foncé/quasi-noir pour le texte et gardez le jaune comme couleur “action”. Cette correspondance simple rend les designs plus cohérents entre pages et composants.

Pour l’accessibilité, évitez le jaune pour les longs textes de corps et assurez assez de contraste pour les boutons et étiquettes. Privilégiez un texte sombre sur surface claire, le jaune servant pour les icônes, accents et boutons remplis qui restent lisibles avec une typo foncée.

En impression et décoration, le gris sert de “base calme” (murs, surfaces, espaces négatifs) et le jaune marque les zones à réchauffer ou à mettre en évidence (titres, signalétique, coussins déco, accents éclairage).

Créer des visuels de palettes jaune gris avec l’IA

Une fois la palette définie, le plus rapide pour la valider est de la voir en contexte — tableau de bord, affiche, emballage ou ambiance de pièce. Les mockups IA aident à itérer sur la mise en page et la lumière sans tout reconstruire.

Utilisez vos codes HEX comme guide, puis décrivez le style, l’ambiance et la composition (ex : “écrans d’onboarding minimalistes”, “grille éditoriale”, ou “intérieur de chambre chaleureux”). Générez quelques variantes et gardez celle à la hiérarchie et au contraste les plus nets.

Media.io rend facile la transformation de ces idées de palettes en visuels à partager avec clients ou collaborateurs.

À suivre : Palette de couleurs Noir Rose