Le rouge est l'une des couleurs les plus intenses et les plus accrocheuses du spectre visible. Il est associé à l'énergie, à la passion, à l'action et à la force, ce qui en fait un choix fréquent en design graphique, branding, publicité et design d'interfaces.
Le rouge est l'une des couleurs les plus intenses et les plus captivantes du spectre visible.
Grâce à sa forte capacité à attirer l'attention, le rouge est souvent utilisé pour mettre en avant des éléments clés, créer des appels à l'action ou transmettre une émotion immédiate.
Le rouge est couramment associé à des concepts tels que :
Sa signification peut varier selon la culture et le contexte, mais presque partout c'est une couleur qui capte l'attention instantanément.
En psychologie des couleurs, le rouge est l'une des teintes qui déclenche la réponse émotionnelle la plus forte.
Il peut transmettre enthousiasme, détermination et confiance, mais aussi urgence ou avertissement lorsqu'il est utilisé avec une saturation élevée.
C'est pourquoi on le retrouve couramment dans :
Dans les interfaces numériques, il est généralement réservé aux actions importantes, aux alertes ou aux éléments qui doivent se démarquer du reste du contenu.
Le rouge est largement utilisé dans les médias numériques et imprimés. Il est particulièrement courant dans :
Sa capacité à capter l'attention en fait une excellente couleur pour mettre en avant des boutons, des promotions et des éléments de conversion.
Le rouge possède une immense variété de nuances. Parmi les teintes les plus utilisées figurent :
| Nom | Échantillon | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| IndianRed | |||||
| LightCoral | |||||
| Salmon | |||||
| Crimson | |||||
| FireBrick | |||||
| Red | |||||
| DarkRed | |||||
| Maroon | |||||
| Tomato | |||||
| Coral |
Chaque nuance transmet une sensation différente. Les rouges vifs paraissent plus dynamiques, tandis que les rouges foncés apportent élégance et sophistication.
Couleurs HTMLBien que le rouge soit une couleur dominante, il se combine facilement avec d'autres pour créer des compositions équilibrées. Les associations courantes incluent :
#FFFFFF#111111#9CA3AF#FFFFF0#F5F5DC#001F3F#0E4D5C#556B2F#F8C8DC#D4AF37Le choix dépend du style visuel recherché : moderne, élégant, classique ou audacieux.
Le complémentaire du rouge se situe dans la zone bleu-vert ou cyan de la roue chromatique. Les combinaisons complémentaires créent un contraste très élevé, elles sont donc souvent utilisées pour mettre en avant des éléments clés, créer un équilibre visuel ou construire des mises en page à fort impact.
Le rouge peut former différentes harmonies chromatiques selon la disposition des couleurs sur la roue chromatique. Les plus utilisées sont :
Combine le rouge avec des couleurs proches comme l'orange et l'orange rougeâtre pour des compositions chaudes et naturelles.
Associe le rouge au bleu-vert pour obtenir un contraste visuel maximal.
Conserve le contraste complémentaire tout en utilisant deux couleurs adjacentes au complémentaire, pour un résultat plus équilibré.
Utilise trois couleurs réparties uniformément sur la roue chromatique. Très populaire en illustration, branding et design créatif.
Utilise quatre couleurs organisées en deux paires complémentaires, idéales pour des palettes plus riches dans des projets complexes.
À partir du rouge, on peut générer de nombreuses variations en modifiant la luminosité et la saturation. Les plus courantes sont :
Teintes (ajout de blanc)
Tons (ajout de gris)
Ombres (ajout de noir)
Variations de saturation
Échelles chromatiques
Ces modifications permettent d'adapter la même couleur à différents éléments d'interface sans perdre la cohérence visuelle.
Les palettes basées sur le rouge peuvent communiquer aussi bien l'énergie que l'élégance selon les couleurs associées. Les combinaisons populaires incluent :
3 couleurs
3 couleurs
3 couleurs
3 couleurs
3 couleurs
En design web, il est recommandé d'équilibrer le rouge avec des neutres pour éviter une sensation visuelle trop intense.
PalettesLorsque vous utilisez le rouge pour du texte ou des boutons, vérifiez le contraste avec le fond.
Suivre les recommandations d'accessibilité WCAG permet de garder le contenu lisible pour tous les utilisateurs, surtout avec des tons clairs ou très saturés.
Avant d'utiliser une couleur dans une interface, vérifiez son ratio de contraste sur fond blanc et fond noir.
Texte rouge / fond blanc
4.99:1AA ✓
Texte blanc / fond rouge
4.99:1AA ✓
Texte noir / fond coral
7.56:1AA ✓
Texte rouge / fond noir
5.77:1AA ✓
Le rouge fonctionne particulièrement bien dans les dégradés grâce à sa richesse chromatique. Les dégradés courants incluent :
#FF0000 → #FF8C00#FF0000 → #FF69B4#FF0000 → #8B008B#FF0000 → #7F1D1D#FF0000 → #111111Ces dégradés sont largement utilisés en arrière-plans, interfaces modernes et éléments mis en avant.
Générateur de dégradésAu-delà des codes HEX, le rouge joue un rôle concret dans les interfaces. Découvrez comment il fonctionne dans de vrais composants UI : boutons, états, formulaires et branding.
Le rouge symbolise l'énergie, la passion, la force, l'action et la visibilité. Il peut aussi représenter l'urgence, le danger ou l'avertissement selon le contexte.
Le rouge s'accorde particulièrement bien avec le blanc, le noir, le gris, le bleu marine, le beige, l'ivoire, le vert olive et l'or.
Son complémentaire se situe dans la gamme bleu-vert ou cyan, créant l'un des contrastes les plus forts de la roue chromatique.
Il est utilisé pour les boutons CTA, les promotions, les messages importants, les indicateurs d'erreur, le branding et les éléments qui doivent capter rapidement l'attention.
Choisissez une couleur et copiez Hex, RGB, HSL ou OKLCH avec teintes et harmonies.
EssayerExplorez des palettes prêtes à l’emploi et enregistrez vos favorites.
EssayerExplorez les harmonies sur une roue interactive et créez des palettes équilibrées.
Essayer