Palettes de couleurs — copiez les couleurs Web standards et Material Design
Une collection de référence des palettes de conception les plus consultées : couleurs Web standards, système de couleurs Material Design et une rampe de gris, chacune avec son code HEX et un bouton de copie en un clic.
Couleurs Web standards
Palette Material Design
Nuances de gris (couleurs neutres)
Ce qu'est une palette de couleurs
Cette page est un recueil des palettes de couleurs classiques employées en conception, présentées avec leurs codes HEX. Elle réunit trois ensembles : les 16 couleurs standard du web en usage depuis les débuts de CSS, les couleurs représentatives du système de couleurs Material Design systématisé par Google, et une échelle de gris divisant le blanc au noir en dix degrés. Un clic sur le code d'une couleur qui vous plaît, tel #2196F3, le copie pour le coller directement dans du CSS ou un outil de conception.
Choisir les couleurs une à une au jugé laisse le plus souvent un fouillis de tons voisins et une conception qui ne tient jamais tout à fait. Chaque couleur de cette page appartient à un système conçu comme un tout : choisir simplement le long des numéros de clarté de Material Design (50 à 900) ou des degrés de gris (gris à 90 %, à 80 % et ainsi de suite) facilite l'assemblage d'un ensemble cohérent, aligné en teinte et en clarté. La théorie des associations — complémentaires, analogues et le reste — est exposée dans la section du glossaire.
Comment utiliser la palette de couleurs
- Choisir le groupe qui convient à votre usage Les trois groupes — couleurs standard du web, Material Design et échelle de gris — se succèdent verticalement. Faites défiler jusqu'à celui qui se rapproche le plus de votre usage.
- Juger la couleur sur le nuancier Chaque échantillon paraît à côté du nom de la couleur et du code HEX : vous cernez donc vos candidates tout en voyant à l'écran leur rendu réel.
- Appuyer sur le bouton de copie Cliquez sur le bouton de copie sous une couleur qui vous plaît et le code HEX passe automatiquement dans le presse-papiers.
-
Coller dans du CSS ou un outil de conception
Collez le code HEX copié directement dans une propriété CSS
colorou dans le sélecteur de couleurs de Figma, d'Adobe XD et consorts.
Astuces pour en tirer le meilleur parti
- Cliquez sur le bouton « Copier » sous un échantillon pour copier instantanément son code HEX (ex. #F44336) dans le presse-papiers.
- Collez le code copié directement dans du CSS ou dans des outils de conception comme Figma et Adobe XD, sans reformatage nécessaire.
- Les couleurs Material Design sont nommées « couleur + numéro de teinte » (ex. Red 500) : un numéro plus élevé signifie une teinte plus foncée.
- La rampe de gris est pratique lorsqu'il faut un ensemble cohérent de tons pour le texte, l'arrière-plan et les bordures d'une même interface.
- En cas d'hésitation, partir des 16 couleurs Web standards donne généralement une palette lisible et bien contrastée.
Quand la palette de couleurs rend service
Choisir l'assise d'une gamme pour le web
Au moment d'arrêter la couleur de base d'un site entier, prendre des nuances d'une même teinte dans une échelle de clarté Material Design fait que la répartition des couleurs entre en-tête, corps et boutons se met en place d'elle-même.
Couleurs d'état des composants d'interface
Préparez les couleurs des états normal, survolé et enfoncé d'un bouton comme des clartés différentes d'une même teinte — Blue 500 à Blue 700, par exemple — et vous exprimez le changement d'état tout en gardant l'unité.
Concevoir le contraste entre texte et fond
En choisissant couleurs de fond et de texte dans l'échelle de gris, associer des degrés éloignés donne une meilleure lisibilité. Pour un verdict rigoureux, un vérificateur de contraste distinct vaut la peine.
Unifier les couleurs des présentations et des graphiques
Plutôt que de choisir chaque fois au jugé les couleurs des diapositives et des graphiques, reprendre les noms et codes HEX de cette page comme guide interne empêche les couleurs de dériver d'un document à l'autre.
Le vocabulaire des gammes de couleurs
- Code HEX
- Une notation exprimant une couleur par six chiffres hexadécimaux sous la forme #RRGGBB. Rouge, vert et bleu reçoivent chacun deux chiffres ; c'est la notation la plus répandue en CSS et dans les outils de conception.
- Material Design
- Le système de conception que Google a publié en 2014. Il systématise les palettes au moyen de numéros de clarté de 50 à 900 pour chaque teinte, le numéro le plus grand désignant le ton le plus sombre.
- Couleurs complémentaires
- Une association de couleurs situées en position opposée sur le cercle chromatique. Comme elles se mettent mutuellement en valeur, on y recourt pour choisir une couleur d'accent quand on veut un contraste marqué.
- Couleurs analogues
- Une association de couleurs voisines sur le cercle chromatique. L'écart de teinte étant faible, l'ensemble ressort volontiers uni et posé ; on y recourt souvent pour choisir la couleur de base d'un site.
- Gamme triadique
- Une technique associant trois couleurs aux positions qui divisent le cercle chromatique en trois. Plus douce que les complémentaires, elle s'équilibre plus aisément que les analogues tout en offrant davantage de variété.
- Échelle de gris
- Une suite de degrés dépourvus de teinte, faite seulement de clair et de sombre du blanc au noir. Elle sert d'assise pour régler l'écart de clarté entre fond et texte et assurer la lisibilité.
- TSL
- Une manière d'exprimer une couleur par trois grandeurs : teinte, saturation et luminosité. Face au HEX, elle se prête aux réglages intuitifs, tel le fait de ne changer que la clarté à teinte constante.
Questions fréquentes
color: #F44336;. La même notation fonctionne aussi telle quelle dans la plupart des outils de conception et des langages de programmation.
Anecdote — Pourquoi les designers évitent de choisir une couleur « au feeling »
Lorsque Google a dévoilé « Material Design » en 2014, il ne s'agissait pas d'un simple guide de style visuel, mais d'un système de conception complet destiné à unifier couleur, typographie, animation et mise en page sous un même ensemble de règles cohérentes. Sa palette de couleurs a été conçue avec une rigueur particulière : chaque teinte (Red, Blue, Green, etc.) dispose de numéros de 50 à 900, ce qui permet aux designers de construire un schéma de couleurs cohérent sur toute une application sans se fier uniquement à leur intuition.
Choisir des couleurs au coup par coup a tendance à disperser dans l'application des teintes proches mais subtilement différentes, ce qui donne un design perçu comme incohérent. Choisir plutôt depuis une palette systématique préétablie garde le schéma de couleurs cohérent, tout en permettant d'exprimer naturellement les différents états d'un bouton (normal, survol, pressé) en se déplaçant simplement sur l'échelle de teinte au sein d'une même couleur.
La façon de spécifier une couleur en CSS a été étendue de nombreuses fois au fil des années. CSS1, apparu en 1996, ne prenait en charge que 16 couleurs nommées de base et les codes HEX. Aujourd'hui, on peut aussi spécifier une couleur dans des espaces plus proches de la perception humaine, comme HSL, HWB ou LAB. Malgré cela, le code HEX reste de loin la notation la plus utilisée en pratique : il demeure le langage commun partagé entre designers et développeurs.