RÉPONSE DIRECTE
Quelle valeur utilise le mot-clé CSS gray ?
En CSS, gray produit #808080. Son équivalent RVB de base est 128, 128, 128, son équivalent HSL est 0.0°, 0.0 %, 50.2 % et son état de transparence est : alpha 1 : couleur opaque.
UTILISATION
Exemples CSS copiables
Valeur normative : W3C — CSS Color 4, named colors.
INTENTION DE RECHERCHE
gray CSS et nom français : ne pas les confondre
Le mot-clé gray fixe une valeur normative pour le navigateur. La fiche française correspondante peut retenir une autre référence éditoriale afin de décrire une famille de nuances : ce sont deux intentions différentes, clairement signalées.
Les mots-clés sont pratiques pour un prototype ou un exemple pédagogique. Dans un système de design, une variable sémantique documentée facilite les changements, les thèmes et l’audit des usages.
FICHE TECHNIQUE
Ce que gray garantit — et ce qu’il ne garantit pas
Gray est l’orthographe américaine retenue comme mot-clé CSS. Grey est un alias exact : les deux écritures produisent #808080.
Pour une base de code cohérente, choisissez une orthographe et appliquez-la partout ; la différence est lexicale, pas colorimétrique.
- Luminance relative
- 0.2159
- Contraste blanc
- 3.95:1
- Contraste noir
- 5.32:1
- HSL
- 0.0° · 0.0% · 50.2%
ORTHOGRAPHE AMÉRICAINE
Quand conserver gray dans un projet
gray est utile lorsqu’une base de code suit une convention américaine ou reprend les noms historiques de l’écosystème web. Cette convention facilite la recherche de variables comme --gray-700, mais elle ne transforme pas toutes les couleurs contenant « gray » en variantes régulières de #808080 : darkgray, slategray et lightslategray possèdent leurs propres valeurs.
Pour une migration, recherchez le jeton complet plutôt que la sous-chaîne « gray ». Remplacer aveuglément le mot dans des noms composés peut toucher des variables applicatives sans améliorer la cohérence. Testez ensuite les contrastes de chaque valeur, car la famille lexicale ne prédit pas la luminance.
SYNTAXES ET ALPHA
Écritures équivalentes et transparence
Pour une couleur opaque, le mot-clé, HEX, RGB et HSL peuvent décrire le même résultat sRGB. Ajouter une composante alpha change la composition sans modifier la valeur de base.
.par-mot-cle { color: gray; }
.par-valeur { color: #808080; }
.avec-alpha { background: rgb(128 128 128 / 65%); }
:root { --accent-interface: gray; }La syntaxe moderne autorise l’alpha avec la barre oblique dans rgb() et hsl(). Référence : W3C — CSS Color 4.
COMPARAISON NORMATIVE
gray et les mots-clés CSS proches
Le voisin numérique le plus proche hors alias exact est slategray. Les distances ci-dessous sont calculées dans OKLab ; elles aident à comparer les valeurs, mais ne changent pas leur définition normative.
NAVIGATEUR ET DOM
Contrôler la valeur réellement calculée
Les noms de couleurs CSS sont insensibles à la casse, mais une convention en minuscules facilite la recherche dans le code. Le navigateur peut sérialiser la valeur calculée en rgb() même si la feuille de style contient gray : cela ne signale pas une conversion approximative.
const element = document.querySelector('.exemple');
const valeur = getComputedStyle(element).color;
console.log(valeur); // valeur composée et sérialisée par le navigateurInspectez l’élément dans son état réel — thème, pseudo-classe, opacité du parent et arrière-plan inclus. Pour un test de contraste, utilisez la couleur visible après composition, pas seulement le jeton déclaré dans le fichier CSS.
QUESTIONS UTILES
Décider sans ambiguïté
gray fonctionne-t-il dans color et background ?
Oui. Un mot-clé <color> peut être utilisé dans toutes les propriétés qui acceptent une couleur, sous réserve de la grammaire propre à la propriété.
Faut-il préférer gray ou #808080 ?
Les deux peuvent être exacts pour ce cas. Le mot-clé expose l’intention ; la valeur explicite facilite les échanges avec des outils. Une variable sémantique évite de disperser le choix dans le code.
Le rendu sera-t-il identique à l’impression ?
Non garanti. CSS définit ici une couleur pour l’affichage et la composition. L’impression dépend d’un profil ICC, du procédé, de l’encre et du support.
ACCESSIBILITÉ
Contraste et couleur réellement composée
Sur gray, le contraste avec le blanc pur est de 3.95:1 et celui avec le noir pur de 5.32:1. Parmi ces deux choix, le noir est le plus contrasté ; vérifiez encore le seuil applicable au texte réel.
Une couleur ne doit pas être l’unique moyen de communiquer une information. Ajoutez libellé, icône, forme ou motif lorsque le sens est important. Source : WCAG 2.2.
CITER CETTE FICHE
Référence normative et attribution
Code Couleur, « gray en CSS : code couleur #808080 et exemples », https://www.code-couleur.com/codes-couleurs/css/gray.html, vérifié le 2026-08-22.SOURCES
Références vérifiables
Direction éditoriale : Nicolas Belotti · Révision : 22 août 2026.