Tons rouges et bleus modernes : 25 palettes avec code hexadécimal

Le rouge et le bleu forment l'un des duos les plus fiables du design moderne : suffisamment audacieux pour attirer l'attention, mais assez structurés pour inspirer confiance.

Vous trouverez ci-dessous des idées de palettes de couleurs rouge et bleu avec codes HEX pour l'interface utilisateur, l'identité visuelle, les affiches, et plus encore — ainsi que des conseils pratiques pour le contraste, les accents et la lisibilité des textes.

Pourquoi les palettes rouge et bleu fonctionnent-elles si bien ?

Le rouge et le bleu créent naturellement une hiérarchie visuelle forte : le bleu évoque la stabilité et la structure, tandis que le rouge attire l'attention et incite à l'action. Ensemble, ils facilitent la transition de l'utilisateur de la mise en page au titre jusqu'à l'appel à l'action.

En duo, ces couleurs couvrent aussi une gamme de températures et d’émotions. Le bleu rafraîchit et apaise, alors que le rouge dynamise — vous pouvez donc ajuster l’ambiance du professionnel au ludique en jouant sur la saturation, l'obscurité et la quantité d’espace neutre.

Du point de vue de l’accessibilité, de nombreuses combinaisons rouge/bleu offrent un contraste élevé — surtout lorsqu’elles sont accompagnées de noir quasi total, de blanc cassé et de gris. Cela rend ce duo idéal pour l’UI, la signalisation et la typographie d’affiches, lorsque l’on prête attention à leur utilisation.

20+ idées de palettes de couleurs rouge bleu (avec codes HEX)

1) Cramoisi Marine

HEX : #C1121F #003049 #2B2D42 #EDF2F4 #8D99AE

Ambiance : audacieux, classique, confiant

Idéal pour : branding d'entreprise et en-têtes de site web

Audacieuses et classiques comme une veste cintrée sous un ciel nocturne, ces teintes inspirent confiance et autorité. Utilisez le bleu marine foncé pour les fonds et le cramoisi pour les appels à l'action afin de garder un contraste net. Associez-les à des gris froids et beaucoup d'espace blanc pour un style haut de gamme plutôt que criard. Astuce d'utilisation : réservez le rouge le plus vif pour une action par écran afin d’éviter la fatigue visuelle.

Exemple d’image cramoisi marine généré 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 gratuitement maintenant

2) Cerise Glacée

HEX : #E11D48 #1D4ED8 #93C5FD #FCE7F3 #0F172A

Ambiance : frais, ludique, très contrasté

Idéal pour : templates pour réseaux sociaux et miniatures de créateurs

Frais et ludique comme un sorbet cerise sur glace pilée, ce mélange ressort sans devenir fluo. Laissez le bleu vif porter les grands aplats tandis que le rouge cerise ponctue badges, prix ou mots-clés. Le rose doux et le bleu clair forment d’excellents fonds tout en restant dans le thème. Astuce d'utilisation : ajoutez un fin contour foncé pour le texte posé sur les tons pastel afin de garantir la lisibilité.

Exemple d’image cerise glacée généré avec media.io

3) Athlétisme Rétro

HEX : #D90429 #2B2D42 #4361EE #F7F7FF #FFB703

Ambiance : énergique, sportif, vintage

Idéal pour : affiches de sport et graphismes pour équipes

Énergique et sportif avec une ambiance de tableau de score vintage, ces couleurs sont prêtes pour le coup d’envoi. Utilisez le charbon d’encre pour les grands titres et gardez le rouge et le bleu royal comme blocs concurrents d’accent pour renforcer l’impact. Un jaune chaud fonctionne au mieux comme petit rappel pour chiffres, icônes ou détails de couture. Astuce d'utilisation : évitez les dégradés et privilégiez les bords nets pour garder le style rétro sportif.

Exemple d’image athlétisme rétro généré avec media.io

4) Lumières du Port

HEX : #EF233C #001F54 #034078 #A9D6E5 #F8F9FA

Ambiance : nautique, net, moderne

Idéal pour : pages d'accueil de voyage et image de marque d'hôtel

Net et nautique comme des lumières de port reflétées sur l’eau sombre, ce duo inspire la propreté et la modernité. Utilisez les bleus profonds pour les larges sections et la navigation, puis apportez le rouge avec prudence en accent pour les boutons de réservation. L’aqua pâle accompagne les images aérées et garde l’esprit côtier. Astuce d'utilisation : choisissez un bleu pour les surfaces principales et gardez l’autre pour les survols ou panneaux secondaires.

Exemple d’image lumières du port généré avec media.io

5) Drapeau de Velours

HEX : #B80C09 #0B1320 #1C77C3 #E5E5E5 #7D8597

Ambiance : sophistiqué, raffiné, dramatique

Idéal pour : mise en page éditoriale et couvertures de livres

Sombre et raffiné comme des rideaux de velours sous les projecteurs, ces tons apportent du drame sans sacrifier la lisibilité. Ancrez la mise en page avec un quasi noir et utilisez le bleu pour structurer les éléments comme règles, légendes ou citations. Le rouge fonctionne au mieux comme projecteur sur un titre ou un détail illustratif. Astuce d'utilisation : préférez le texte courant sur gris clair plutôt que sur blanc pur pour limiter l’éblouissement lors de longues lectures.

Exemple d’image drapeau de velours généré avec media.io

6) Aube d’Hiver

HEX : #F94144 #277DA1 #1D3557 #F1FAEE #A8DADC

Ambiance : optimiste, aérien, apaisant

Idéal pour : applications de bien-être et écrans d’onboarding

Optimiste et aérien comme une aube d’hiver sur un lac gelé, ce mélange apporte calme et motivation. Utilisez les bleus froids pour les surfaces UI principales et faites intervenir le rouge chaud pour les progrès, validations ou petits badges. L’aqua mentholé et le blanc cassé donnent une impression accueillante et respirante aux écrans d’onboarding. Astuce d'utilisation : pour l’accessibilité, utilisez le texte rouge uniquement sur le blanc cassé, jamais sur l’aqua.

Exemple d’image aube d’hiver généré avec media.io

7) Arcade Néon

HEX : #FF0054 #00A6FB #001845 #F7F7FF #FFD60A

Ambiance : électrique, jeune, ultra-énergique

Idéal pour : flyers d’événements et affiches musicales

Électrique et jeune comme une enseigne d’arcade qui bourdonne à minuit, ces couleurs captent instantanément l’attention. Laissez le bleu vif prendre les plus grands fonds et utilisez le rouge flash pour la date ou le titre principal. Une petite touche de jaune ajoute ce clin d’œil “ticket” lorsqu’il est appliqué sur des icônes ou séparateurs. Astuce d'utilisation : placez les blocs de texte sur le quasi-marine pour que les tons vifs conservent leur intensité sans vibrer.

Exemple d’image arcade néon généré avec media.io

8) Rose Denim

HEX : #E63946 #457B9D #1D3557 #F1FAEE #FFC6D9

Ambiance : doux, stylé, accessible

Idéal pour : lookbooks mode et blogs lifestyle

Doux et stylé comme une écharpe rosée associée à un jean vieilli, ce set semble moderne et accessible. Utilisez le bleu denim pour la navigation et les barres latérales, puis laissez les accents de titres rouges guider le regard à travers les sections. La teinte blush fonctionne bien derrière les grilles de produits ou encarts de citations sans voler la vedette aux photos. Astuce d’utilisation : gardez une saturation modérée sur les images pour laisser la palette dominer.

Exemple d’image rose denim généré avec media.io

9) Baie Marinara

HEX : #D62828 #003049 #1D6A96 #F77F00 #FCBF49

Ambiance : chaud, appétissant, vivant

Idéal pour : emballages alimentaires et menus de restaurant

Chaud et appétissant comme la sauce marinara qui mijote dans une brise marine fraîche, les couleurs sont vives et audacieuses. Utilisez le bleu marine et bleu océan pour structurer les menus, tandis que le rouge met en valeur les plats et les prix. Les oranges servent d’alliés secondaires pour les niveaux de piquant, les encadrés ou les onglets de catégories. Conseil d’utilisation : pour l’impression, faites des tests ; ajustez le rouge plus foncé s’il bave sur du papier non couché.

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

10) Rocket Pop

HEX : #FF3B30 #007AFF #0A0F2C #FFFFFF #C7C7CC

Ambiance : propre, dynamique, technologique

Idéal pour : ensembles d'icônes d’application et composants d’interface

Propre et percutant comme une sucette Rocket Pop en plein été, ce mélange est net et immédiatement lisible. Le bleu vif et le rouge offrent un excellent duo pour les états comme primaire, destructif et accent. Gardez le bleu nuit foncé pour le texte et utilisez le gris comme espace calme entre les composants. Conseil d’utilisation : gardez les rayons des coins cohérents pour une impression de cohésion des couleurs fortes.

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

11) Canyon Dusk

HEX : #C81D25 #233D4D #5DA9E9 #EAE2B7 #0B090A

Ambiance : ancré, cinématographique, aventureux

Idéal pour : identités de marques aventure et publicités extérieures

Ancré et cinématographique comme les ombres du canyon au crépuscule, la palette paraît robuste mais raffinée. Utilisez l’ardoise profonde et le noir pour les logos et textes, puis le bleu clair pour des touches aériennes et des formes secondaires. Le beige sable sert de fond naturel équilibrant le rouge. Conseil d’utilisation : associez à du papier texturé ou une surcouche granulée pour accentuer le côté aventurier.

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

12) Studio Contrast

HEX : #E10600 #0057B8 #111827 #F9FAFB #6B7280

Ambiance : tranchant, moderne, professionnel

Idéal pour : pages d’atterrissage de produits et sites SaaS

Tranchant et moderne comme une photo produit sous studio, le contraste affiche un rendu professionnel et maîtrisé. Employez le bleu comme couleur d’action principale et le rouge pour les avertissements, tags d’offre limitée ou détail héro unique. Charbon, blanc et gris moyen offrent un système typographique fort pour les pages longues. Conseil d’utilisation : évitez d’utiliser les deux couleurs vives dans la même rangée de boutons, pour ne pas brouiller les appels à l’action.

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

13) Botanical Tide

HEX : #E63946 #1E6091 #184E77 #D8F3DC #2D6A4F

Ambiance : frais, botanique, équilibré

Idéal pour : illustrations aquarelle et campagnes printemps

Frais et botanique comme des feuilles après la pluie avec une touche de fleur sauvage, les tonalités sont équilibrées et inspirantes. Utilisez le vert et le vert menthe pâle pour les aplats, puis ajoutez le bleu pour la profondeur des ombres et la structure. Le rouge donne une petite touche florale naturelle. Conseil d’utilisation : pour les styles aquarelle, laissez le menthe comme valeur la plus claire, pour garder les détails lisibles.

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

14) Opera House

HEX : #B5172E #14213D #3A86FF #F1F1F1 #C0C0C0

Ambiance : dramatique, élégant, scénique

Idéal pour : affiches de théâtre et branding d’événements culturels

Dramatique et élégant comme un projecteur sur un rideau de velours, ces tons donnent une impression de première. Utilisez le bleu navy profond pour le champ d’affiche, puis le bleu lumineux pour les encadrés d’informations. Un titre rouge maîtrisé ajoute de l’intensité sans saturer la typographie. Conseil d’utilisation : espacez généreusement les lettres du texte clair sur fond navy pour garder un aspect aérien et chic.

Exemple d’image d’opera house générée avec media.io

15) Signal System

HEX : #DC2626 #2563EB #0F172A #E5E7EB #22C55E

Ambiance : clair, fonctionnel, systémique

Idéal pour : systèmes de design et UI orientée accessibilité

Clair et fonctionnel comme un panneau de contrôle bien étiqueté, la palette est instantanément lisible. Comme palette bleu rouge, elle soutient une sémantique forte : bleu pour les actions principales, rouge pour les états destructifs, vert pour le succès. Gardez le presque noir pour le texte et le gris clair pour les surfaces pour distinguer les composants. Conseil d’utilisation : testez le contraste daltonien en associant formes d’icônes et couleur, pas seulement la couleur.

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

16) Picnic Nautical

HEX : #F03E3E #1971C2 #0B1F3A #FFF5F5 #FFE066

Ambiance : joyeux, estival, amical

Idéal pour : invitations de fête et flyers de pique-nique

Joyeux et estival comme une nappe de pique-nique au bord de l’eau, les couleurs sont conviviales et accueillantes. Utilisez le bleu pour la typographie principale et la structure de la mise en page, puis ajoutez le rouge pour accentuer le nom de l’événement ou la ligne RSVP. Un rose crémeux et un jaune solaire gardent une ambiance légère et enfantine sans passer au pastel. Conseil d’utilisation : pour les invitations papier, gardez le jaune en accent pour qu’il reste lisible sur la plupart des supports.

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

17) Night Shift

HEX : #FF2D55 #0A84FF #1C1C1E #2C2C2E #F2F2F7

Ambiance : élégant, nocturne, à fort contraste

Idéal pour : tableaux de bord mode sombre et UI analytique

Élégant et nocturne comme les lumières citadines pendant un service de nuit, cette palette est conçue pour la clarté en mode sombre. Utilisez les deux gris foncés comme bases, puis choisissez bleu ou rouge comme accent principal selon le type de donnée présenté. Le blanc cassé doit être réservé aux chiffres clés et libellés pour donner de l’espace au dashboard. Conseil d’utilisation : limitez les schémas à deux couleurs d’accent max pour éviter la surcharge visuelle dans les écrans analytiques denses.

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

18) Coral Blueprint

HEX : #FF4D6D #2F5DFF #0B2545 #F8F9FA #48CAE4

Ambiance : créatif, propre, énergique

Idéal pour : branding startup et pitch decks

Créatif et propre comme de l’encre corail sur papier bleu technique, la palette est énergique mais structurée. Ces combinaisons rouge bleu fonctionnent particulièrement bien dans les présentations où la hiérarchie est cruciale : bleu pour la structure et corail pour les points clés. Utilisez l’aqua avec parcimonie pour diagrammes ou accents secondaires afin de ne pas surcharger les slides. Conseil d’utilisation : gardez les couleurs d’accent cohérentes pour chaque métrique sur tout le deck.

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

19) Glacier Cherry

HEX : #C81E1E #1E3A8A #60A5FA #F3F4F6 #111827

Ambiance : froid, net, confiant

Idéal pour : publicités produits tech et bannières web

Froid et net comme l’air glacial avec une touche cerise, le contraste inspire confiance et dynamisme tech. Utilisez le bleu moyen pour les grandes formes et le bleu clair pour les reflets lumineux autour des produits. Le rouge fonctionne mieux comme accent ciblé pour prix, tags et icônes. Conseil d’utilisation : ajoutez une ombre subtile en gris foncé pour séparer les éléments tout en gardant une esthétique épurée.

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

20) Minimal Patriot

HEX : #D00000 #003566 #001D3D #EDEDED #FFFFFF

Ambiance : minimaliste, fort, intemporel

Idéal pour : campagnes associatives et annonces citoyennes

Minimaliste et fort comme une bannière nette sous le soleil, ces couleurs sont intemporelles et directes. Gardez les bleus profonds comme base pour les titres et barres, puis utilisez le rouge uniquement pour les appels urgents ou incitations à donner. Beaucoup d’espace blanc rend le message fiable et facile à parcourir. Conseil d’utilisation : pour un contraste plus doux, remplacez les fonds blanc pur par du gris clair et gardez les poids typographiques constants.

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

21) Festival Badge

HEX : #E01E37 #1F7A8C #022B3A #E1E5F2 #FF9F1C

Ambiance : festif, artisanal, entraînant

Idéal pour : badges d’événement et packs d’autocollants

Festif et artisanal comme des pins émaillés sur une veste en jean, la palette est motivante et à collectionner. Le bleu turquoise apporte une touche contemporaine empêchant le rouge de paraître trop classique. Utilisez l’orange en petites touches pour les étoiles, bordures ou étiquettes uniques. Conseil d’utilisation : gardez les contours de badges en navy profond pour assurer la lisibilité sur papier autocollant clair.

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

22) Ceramic Coast

HEX : #D7263D #1B3A57 #4EA8DE #F4F1DE #9A8C98

Ambiance : artistique, côtier, subtilement moderne

Idéal pour : branding déco maison et emballages produits

Artistique et côtier comme des céramiques glacées sous le soleil, les tons sont subtilement modernes. Utilisez le crème comme base d’emballage, puis équilibrez la typographie navy foncée aux motifs bleu clair. Un accent rouge contrôlé donne un aspect artisanal aux logos et sceaux. Conseil d’utilisation : gardez la taille des motifs unique pour que le rouge ne soit pas perdu dans un ensemble trop chargé.

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

23) Code and Cherry

HEX : #F43F5E #2563EB #111827 #F3F4F6 #A1A1AA

Ambiance :technique, amical, énergique

Idéal pour :outils développeur UI et sites de documentation

Technique et chaleureux comme un code propre avec une touche cerise, cet ensemble donne une impression d'énergie sans être bruyant. Utilisez le bleu pour les liens et les boutons principaux, puis ajoutez le rouge pour les notifications et états critiques. Les gris offrent une surface de lecture calme pour les longs docs et tableaux. Conseil d’utilisation : gardez les blocs de code en ligne sur un gris clair avec texte foncé afin que les accents restent signifiants.

Exemple d’image de code et cerise générée avec media.io

24) Affiche de meeting aérien

HEX :#D00000 #1D4ED8 #0A122A #F8FAFC #94A3B8

Ambiance :dynamique, audacieux, thème aérien

Idéal pour :affiches d’aviation et bannières promotionnelles

Dynamique et audacieux comme des jets traversant un ciel dégagé, cette palette se sent rapide et décidée. Utilisez le fond clair pour « respirer », puis superposez du bleu marine pour une typographie forte et du bleu pour des lignes ou des formes en mouvement. Un seul accent rouge fait ressortir les infos clés, surtout les dates et infos billets. Conseil : limitez la palette à deux couleurs dominantes par mise en page afin de garder le contrôle de la typographie.

Exemple d’image d’affiche de meeting aérien générée avec media.io

25) Lanterne de bibliothèque

HEX :#B91C1C #1E40AF #0F172A #FAFAF9 #D6D3D1

Ambiance :savant, chaleureux, digne de confiance

Idéal pour :charte éducative et pages de cours

Savant et chaleureux comme la lueur d’une lanterne dans une bibliothèque silencieuse, ces tons inspirent confiance et concentration. Utilisez le bleu marine pour les titres et la navigation pour un cadre stable, et ajoutez du rouge pour mettre en avant les boutons d’inscription ou les dates importantes. Le blanc cassé doux et le gris pierre rendent la lecture des longues pages confortable. Conseil : appliquez le rouge accent toujours pour une seule action afin d’éviter des signaux mixtes.

Exemple d’image de lanterne de bibliothèque générée avec media.io

Quelles couleurs s’accordent bien avec le rouge et bleu ?

Les neutres sont le choix le plus aisé pour les tons bleus et rouges : blancs purs, blancs cassés et gris froids réduisent le bruit visuel et assurent une bonne lisibilité de la palette. Pour les layouts sombres, le presque noir et l’anthracite permettent aux accents rouge/bleu de paraître intentionnels sans être agressifs.

Des accents chauds comme le jaune, l’orange ou le corail ajoutent de l’« étincelle » et distinguent les infos — surtout sur affiches, menus et badges de surbrillance. Gardez ces accents discrets pour qu’ils ne rivalisent pas avec la palette rouge/bleu principale.

Les verts (surtout sarcelle, menthe et forêt) fonctionnent bien pour un rendu frais et équilibré, ou pour signaler des statuts d’interface (succès/danger). Utilisez le vert en secondaire et appuyez-vous aussi sur des formes/icônes, pas seulement sur la couleur.

Comment utiliser une palette rouge bleu dans des créations réelles

Commencez par les rôles, pas juste des nuanciers : choisissez un bleu pour surfaces principales/liens, un rouge pour les moments clés (CTA, promo, alerte), puis complétez avec des neutres pour l’espacement et la typographie. Ainsi, votre palette sera évolutive sur tous les écrans.

Contrôlez l’intensité en limitant les « couleurs vives sur vives ». Si rouge et bleu sont saturés, placez-les sur blocs foncés/neutres ou séparez-les par du blanc pour éviter les effets de vibration visuelle — surtout sur mobile.

Pour la lisibilité, mettez le texte courant sur fond blanc cassé ou gris clair, et réservez les rouges/bleus saturés pour titres, étiquettes et boutons. Vérifiez toujours le contraste pour les petits textes et icônes fines.

Créer des visuels de palettes rouge bleu avec l’IA

Si vous avez déjà vos codes HEX favoris, testez-les rapidement en générant des maquettes réalistes — affiches, écrans UI, packagings et templates sociaux — avant validation pour production.

Avec Media.io, transformez un prompt court en visuels à votre image et itérez rapidement en ajustant des mots-clés de style (minimaliste, vintage, éditorial, néon) tout en gardant la fondation rouge et bleu.

Essayez de générer plusieurs variantes par palette (mode clair, sombre, contraste élevé) pour trouver la composition la plus lisible pour votre audience et plateforme.

À suivre : Palette Couleurs Île