Le gris est une couleur fumée et neutre créée en mélangeant le noir et le blanc, lui conférant une qualité équilibrée. Il est achromatique, ce qui signifie qu'il n'a techniquement pas de couleur, et n'apparaît donc pas sur le cercle chromatique. Bien que le gris puisse évoquer la formalité et la sophistication, sa neutralité peut également susciter des sentiments de tristesse ou de monotonie dans certains contextes.
Le gris est défini par les codes et valeurs de couleur suivants pour garantir la cohérence sur diverses plateformes et appareils numériques.
- Code HEX : #898989
- Valeur RGB : 53,7 % rouge, 53,7 % vert, et 53,7 % bleu
L'accessibilité joue un rôle crucial dans le choix des couleurs en design UX et UI. La communauté Figma propose des plugins pour s'assurer que vos designs respectent les Web Content Accessibility Guidelines.
Voici quelques façons d'utiliser le gris dans vos designs :
- Créer une esthétique minimaliste. Le gris peut créer un look épuré et moderne, parfait pour les interfaces qui privilégient la simplicité et mettent l'accent sur le contenu.
- Établir l'ambiance. Le gris peut apporter une sensation de sophistication et de sérieux ou évoquer des sentiments de tristesse.
- L'utiliser comme base. Cette teinte neutre et équilibrée est un excellent choix pour des éléments comme les arrière-plans et le texte, offrant une apparence propre et discrète qui soutient divers styles de design et palettes de couleurs.
Gardez à l'esprit que la couleur et sa signification peuvent varier d'une culture à l'autre et à tout moment. Si vous créez une interface pour un public international, renseignez-vous sur la signification des couleurs pour chaque pays concerné.
Pour des variations dans le même spectre fumé que le gris, considérez :
- Le gris froid (#CBCBCB) est une version plus claire du gris, ajoutant une touche de légèreté.
- L'argent (#C4C4C4) est une nuance de gris plus brillante qui ajoute une touche d'élégance.
- L'étain (#909EAE) est une teinte grisâtre avec une subtile nuance bleue.
- L'ardoise (#6D8196) est un gris plus profond et plus frais avec une pointe de bleu.
Le gris est une couleur neutre, ce qui lui permet de bien s'accorder avec presque toutes les couleurs du spectre. Voici quelques idées pour stimuler votre créativité :
- Le bleu-gris (#6A89A7) complète la fraîcheur du gris tout en ajoutant du dynamisme, parfait pour des esthétiques épurées et modernes.
- La terre de sienne brûlée (#ED7B58) ajoute une touche chaleureuse et terreuse qui complète la neutralité du gris.
- Le gris anthracite (#353E43) apporte profondeur et dimension, créant une sensation sophistiquée et professionnelle.
- Le rouge cramoisi (#B22222) offre une explosion d'énergie sans submerger le calme du gris.
D'autres couleurs à considérer incluent le blanc cassé pour un effet élégant, l'aqua pour un contraste lumineux, et les verts subtils pour compléter la neutralité du gris, comme la mousse sur une pierre.
Bien que le gris soit neutre, il peut jurer avec des couleurs extrêmement saturées comme :
- Le vert néon (#2CFF05) perturbe la neutralité du gris, créant un contraste intense.
- L'indigo (#560591) est une couleur profonde, créant une discordance au lieu de compléter la fraîcheur du gris.
- Le rose (#FF1D8D) entre en dissonance avec la fraîcheur du gris, provoquant une tension visuelle.
- Le jaune (#FFFF00) domine le gris moyen, produisant un contraste sévère.
Le gris incarne la neutralité et l'équilibre, véhiculant l'impartialité et la sophistication. Il est couramment utilisé dans les environnements professionnels pour établir l'autorité et la confiance.
En psychologie des couleurs, le gris représente l'impartialité et est souvent associé au système judiciaire, à l'équité et à la quête de vérité. Les gris plus clairs évoquent le calme et la sécurité, tandis que les tons plus foncés peuvent apporter des sentiments de morosité et de pessimisme en raison de leur manque de dynamisme.
Dans le design d'interface, le gris peut améliorer la lisibilité et véhiculer le professionnalisme. Cependant, une utilisation excessive du gris peut rendre les designs peu inspirants ou déprimants. Les nuances plus claires fonctionnent bien pour les arrière-plans, tandis que les plus foncées peuvent ajouter du sérieux. Utilisez les gris foncés avec parcimonie pour éviter de créer une expérience utilisateur terne.
Le mot « gris » trouve son origine dans les langues germaniques, spécifiquement de l'anglais ancien « græg », qui signifie « poindre » ou « s'éclaircir ». La première utilisation enregistrée de « gris » en anglais remonte à environ 700 après J.-C.
Le gris a été un incontournable de la mode, des tuniques simples des paysans aux robes élégantes de la noblesse. Les artistes l'ont utilisé pour l'ombrage et la représentation de la nature, tandis que les architectes ont incorporé des pierres et des briques grises dans les bâtiments à travers différentes époques. Même dans la joaillerie, les perles et les pierres précieuses apparaissent dans diverses nuances de gris.
Aujourd'hui, le gris reflète l'efficacité moderne et l'innovation tout en véhiculant le professionnalisme, la sophistication et le luxe. Les gris plus clairs continuent d'être populaires pour leur esthétique minimaliste, tandis que les tons plus foncés peuvent évoquer un sentiment de vie urbaine.
Variantes de couleur
Nuances
Teintes
Tons
Teintes
Harmonies de couleurs
Complémentaire
Complémentaire fractionnée
Monochrome
Analogue
Triadique
Tétradique
Palettes personnalisées
Nuances de gris
Bord tranchant
Le gris compte
Vérificateur de contraste
Contraste 3,5
- Texte en grand format
#898989
- Texte normal
Le mode de conception, d'alignement et de création compte. Utilisez Figma.
| Catégorie | ||
|---|---|---|
Non conforme | Non conforme | |
Conforme | Non conforme | |
Conforme | Non conforme |
Contraste 6
- Texte en grand format
#898989
- Texte normal
Le mode de conception, d'alignement et de création compte. Utilisez Figma.
| Catégorie | ||
|---|---|---|
Conforme | Non conforme | |
Conforme | Conforme | |
Conforme | Conforme |
Simulations de couleurs
Protanopie
Deutéranopie
Tritanopie
Achromatopsie
La couleur hexadécimale #898989, connue sous le nom de Gris, a des valeurs RVB de R:137, G:137, B:137 et des valeurs CMJN de C:0, M:0, Y:0, K:46.
| VALUE | CSS | |
|---|---|---|
| HEX | #898989 | #898989 |
| RGB DECIMAL | 137, 137, 137 | RGB(137,137,137) |
| RGB PERCENTAGE | 53.7, 53.7, 53.7 | RGB(53.7%,53.7%,53.7%) |
| CMYK | 0, 0, 0, 46 | |
| HSL | HSL(0.0, 0.0%, 53.7%) | HSL(0.0, 0.0%, 53.7%) |
| HSV (OR HSB) | 0.0°, 0.0, 53.7 | |
| WEB SAFE | #153153153 | #153153153 |
| BINARY | 10001001, 10001001, 10001001 | |
| iOS - SwiftUI | Color(red: 0.537, green: 0.537, blue: 0.537) | |
| iOS - UIKit | UIColor(red: 0.537, green: 0.537, blue: 0.537, alpha: 1) | |
| Android - Compose | Color(0xFF898989) |
