Le gris symbolise l'équilibre, la neutralité et la sophistication. Situé entre le blanc et le noir, c'est l'une des couleurs les plus polyvalentes en design.
Le gris est un neutre situé entre le blanc et le noir. Il symbolise l'équilibre, la neutralité et la sophistication, et est essentiel pour la structure, la typographie et les surfaces en UI.
En design web, branding et interfaces numériques, il est utilisé pour ajouter de l'élégance, améliorer la lisibilité et créer des compositions propres qui laissent le contenu principal ressortir sans distraire l'utilisateur.
Le gris est souvent associé à des concepts tels que :
Sa signification peut varier selon le contexte, bien qu'il transmette généralement calme, objectivité et sophistication.
En psychologie des couleurs, le gris transmet calme, stabilité et rationalité. Comme ce n'est pas une couleur dominante, il aide à réduire le bruit visuel et favorise la concentration, c'est pourquoi c'est l'une des couleurs les plus utilisées dans les interfaces numériques et les produits technologiques.
Les émotions qu'il transmet habituellement sont :
Utilisé en excès, il peut paraître froid, c'est pourquoi il est souvent combiné avec des couleurs plus vives pour ajouter du dynamisme.
Le gris est présent dans presque toutes les disciplines liées au design. On le retrouve couramment dans :
Sa neutralité en fait une excellente couleur de soutien pour presque tout projet.
Parmi les couleurs HTML et CSS les plus connues liées au gris figurent :
| Nom | Échantillon | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Gainsboro | |||||
| LightGray | |||||
| Silver | |||||
| DarkGray | |||||
| Gray | |||||
| DimGray | |||||
| SlateGray | |||||
| LightSlateGray | |||||
| DarkSlateGray |
Des gris les plus clairs aux tons anthracite, chaque variante apporte une personnalité différente à l'interface.
Couleurs HTMLTous les gris ne se ressentent pas de la même manière. Leur température chromatique change complètement l'ambiance d'une interface et c'est l'une des idées clés recherchées lorsqu'on travaille avec des palettes neutres.
Ils ont une légère teinte marron, rouge ou jaune et créent des environnements plus accueillants. Ils conviennent bien au branding artisanal, à l'e-commerce de produits physiques et aux interfaces au ton humain.
Ils contiennent des sous-tons bleu ou vert et paraissent plus technologiques et minimalistes. Ils sont courants dans les logiciels, tableaux de bord et produits numériques.
Ils sont largement utilisés dans les design systems comme Material Design, Tailwind CSS ou Bootstrap. Des échelles comme gray, slate, zinc ou cool gray aident à construire une typographie, des bordures et des surfaces cohérentes.
De nombreux designers recherchent des termes comme palette grise, gris neutre, slate gray ou cool gray. Comprendre ces différences aide à choisir la bonne échelle et utiliser le gris plus efficacement en UI.
Le gris s'accorde avec pratiquement toute couleur grâce à sa neutralité. Quelques combinaisons très utilisées :
#FFFFFF#111111#2563EB#16A34A#FFA500#FFD700#EF4444#7C3AED#EC4899#DAA520Ces combinaisons aident à créer des interfaces élégantes, modernes et faciles à lire.
Le gris n'a pas de couleur complémentaire, car il appartient au groupe des couleurs achromatiques avec le blanc et le noir. Son principal avantage est qu'il peut équilibrer presque toute combinaison chromatique sans perturber l'harmonie du design.
Le gris fonctionne comme neutre au sein de toute harmonie chromatique. Les harmonies de cette page utilisent la même logique que la Roue chromatique et le Générateur de palettes de Matizly.
Il adoucit les transitions entre couleurs proches et réduit la saturation visuelle.
Les variations sont générées avec les mêmes fonctions du studio Matizly. Pour les gris, les plus utiles sont les échelles de luminosité et les sous-tons chauds ou froids :
Gris clairs
Ces échelles aident à construire une typographie secondaire, des bordures, des états désactivés et des surfaces de manière cohérente.
Les palettes avec du gris transmettent élégance, professionnalisme et minimalisme. Quelques combinaisons populaires :
3 couleurs
3 couleurs
3 couleurs
3 couleurs
3 couleurs
3 couleurs
Ces combinaisons sont courantes en design web, applications mobiles et branding corporate.
PalettesLe gris joue un rôle très important dans l'accessibilité des interfaces.
Les gris clairs peuvent être difficiles à lire sur fond blanc, tandis que les gris foncés offrent généralement un excellent contraste sans la dureté visuelle du noir pur.
Vérifier systématiquement le ratio de contraste selon les directives WCAG aide à créer des expériences plus accessibles.
Texte gris foncé / fond blanc
10.31:1AA ✓
Texte blanc / fond gris foncé
10.31:1AA ✓
Texte gris moyen / fond blanc
4.83:1AA ✓
Texte blanc / fond slate
7.58:1AA ✓
Le gris permet de créer des dégradés élégants et discrets. Quelques combinaisons courantes :
#6B7280 → #FFFFFF#6B7280 → #111111#6B7280 → #2563EB#6B7280 → #C0C0C0#6B7280 → #16A34A#6B7280 → #7C3AEDCes dégradés apparaissent fréquemment dans les tableaux de bord, applications mobiles, produits technologiques et interfaces minimalistes.
Générateur de dégradésLe gris est l'une des couleurs les plus importantes en design d'interface. Sa capacité à organiser visuellement l'information le rend essentiel dans presque tout design system moderne.
Le gris symbolise l'équilibre, la neutralité, le professionnalisme et la stabilité. C'est une couleur qui transmet calme et sophistication.
Le gris s'accorde très bien avec le blanc, le noir, le bleu, le vert, l'orange, le jaune, le rouge, le violet et l'or.
Le gris n'a pas de couleur complémentaire car il appartient aux couleurs achromatiques avec le blanc et le noir.
Il est largement utilisé en design web, interfaces utilisateur, applications mobiles, branding corporate, technologie, architecture et design industriel.
Les gris chauds ont une légère teinte marron, rouge ou jaune et paraissent plus accueillants. Les gris froids contiennent des sous-tons bleu ou vert et paraissent plus technologiques et minimalistes. Les gris neutres sont la base de nombreux design systems.
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