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)
Astuces
- 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.
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.