Gray ou Grey : orthographe, nuances et codes couleur

« Gray » ou « grey » ? La réponse dépend entièrement du côté de l'Atlantique où vous vous trouvez — et le choix dans le code, selon la convention suivie, peut produire des résultats différents. C'est l'une de ces questions de couleur où l'orthographe a réellement une importance dans les contextes techniques, même si les deux mots désignent le même phénomène visuel : le neutre achromatique entre le noir et le blanc, et toutes les variantes quasi-neutres chaudes et froides qui s'y regroupent.

Cet article couvre la question orthographique, les règles CSS, la réalité technique de ce qui fait qu'une couleur est « grise », un guide pratique pour choisir entre gris chauds et froids, et un tableau de référence des codes hex gris clés sur tout le spectre de luminosité.

Orthographe américaine vs britannique : Gray vs Grey

La différence orthographique est l'un des exemples les plus clairs de la divergence entre l'anglais américain et britannique :

Les deux orthographes sont anciennes. Le mot remonte au vieil anglais grǣg, et « gray » comme « grey » apparaissent dans des textes anglais datant de la période médiévale. La divergence quant à l'orthographe dominante a suivi le schéma général de l'anglais américain se standardisant autour d'une variante tandis que l'anglais britannique en retenait une autre.

Un moyen mnémotechnique utile : grAy est américain (American), grEy est européen (European). Les voyelles A et E correspondent aux continents.

Dans l'usage courant, aucune des deux orthographes n'est incorrecte — elles désignent la même couleur. Les guides de style et les chartes graphiques spécifient généralement une orthographe pour la cohérence. Si vous écrivez pour un public international sans préférence régionale claire, « gray » a un léger avantage dans les contextes web car c'est l'orthographe préférée de la spécification CSS (plus de détails ci-dessous).

Couleurs nommées CSS : Gray est le standard

Lors de l'établissement des standards de couleurs HTML et CSS, une décision a été prise sur quelle orthographe encoder. Les deux orthographes sont acceptées en CSS, mais elles ne désignent pas toujours la même couleur — ce qui crée un piège technique subtil.

La famille des gris CSS

CSS comprend plusieurs couleurs nommées grises. Voici l'ensemble complet, avec les deux variantes orthographiques le cas échéant :

Note importante : pour la plupart des formes composées (lightgray, darkgray, dimgray, slategray), les deux orthographes existent et désignent des valeurs hex identiques. Pour le gray / grey de base, les deux correspondent aussi à #808080. La distinction importe surtout pour les développeurs qui s'appuient sur les valeurs par défaut du navigateur — en pratique, CSS gère correctement les deux orthographes.

La règle technique la plus importante : dans les codes hex et les valeurs RGB, le mot « gray » vs « grey » n'a aucune importance — seuls les chiffres comptent. #808080 est #808080 quelle que soit la façon dont vous l'appelez.

Qu'est-ce qui rend le gris « gris » ? La réalité technique

Un gris pur — techniquement appelé couleur achromatique — a des valeurs égales dans les trois canaux RGB. Lorsque rouge, vert et bleu sont identiques, le résultat est un neutre sans teinte :

En termes HSL, tout gris véritablement achromatique a une saturation de 0 % et une teinte indéfinie. Le pourcentage de luminosité détermine son degré de clarté.

La plupart des couleurs « grises » dans le design réel, cependant, ne sont pas parfaitement achromatiques — elles portent de légères dominantes chromatiques qui les rendent « chaudes » ou « froides ».

50 nuances de gris : codes hex clés sur tout le spectre

Une référence pratique couvrant toute la gamme du quasi-blanc au quasi-noir :

Le gris d'accessibilité important : #767676

Ce gris spécifique a une importance capitale en design web : c'est le gris le plus clair qui atteint un ratio de contraste de 4,5:1 par rapport au blanc #FFFFFF, ce qui correspond au minimum WCAG AA pour le texte normal. Tout gris plus clair que #767676 échoue au WCAG AA en tant que texte sur fond blanc.

Cela signifie que le CSS gray (#808080) échoue techniquement au WCAG AA — il n'atteint qu'un ratio de contraste d'environ 3,95:1 par rapport au blanc. Malgré son appellation « gris » et son apparence relativement sombre, il n'est pas suffisamment foncé pour du texte courant accessible. Utilisez #767676 ou une valeur plus foncée pour tout texte destiné à être accessible.

Gris froid vs gris chaud : la vraie question du designer

En pratique, la distinction la plus importante pour les designers n'est pas « gray vs grey » — c'est le gris chaud versus le gris froid.

Les gris froids tendent vers le bleu, le vert ou le violet. Ils paraissent élégants, modernes et cliniques. Ils s'associent bien avec d'autres couleurs froides et créent une esthétique tech.

Les gris chauds tendent vers le rouge, l'orange ou le jaune. Ils paraissent naturels, accessibles et terreux. Ils s'associent bien avec les tons bois, la terre cuite et d'autres matières naturelles chaudes.

Les gris neutres — parfaitement achromatiques sans teinte — se situent entre les deux. En pratique, les gris véritablement neutres sont perçus différemment selon les couleurs environnantes (un effet de contexte connu sous le nom de contraste simultané).

Exemples de gris chauds et froids

Comment identifier un gris chaud ou froid par son code hex

Regardez les valeurs RGB : - Si le bleu est le plus élevé parmi les trois canaux → gris froid - Si le rouge ou le vert est le plus élevé → gris chaud - Si les trois sont égaux → gris neutre

Par exemple : - #708090 = rgb(112, 128, 144) → bleu (144) est le plus élevé → gris froid - #9B9B8A = rgb(155, 155, 138) → bleu (138) est le plus bas → gris chaud - #808080 = rgb(128, 128, 128) → tous égaux → gris neutre

Le gris dans le design web moderne

Le gris est sans doute la couleur la plus importante en design web. On le retrouve dans : - Les fonds de page — l'utilisation de gris clairs plutôt que de blanc réduit la fatigue visuelle et crée une hiérarchie visuelle - Les composants d'interface — les bordures, séparateurs, fonds de champs de saisie et de cartes sont presque universellement gris - La typographie — le texte courant sur le web est souvent gris foncé plutôt que noir pur, ce qui réduit la dureté visuelle - Les états désactivés — les éléments interactifs grisés signalent universellement l'indisponibilité

Valeurs de gris pratiques pour les systèmes de design web

L'échelle de gris Tailwind CSS (de #F9FAFB à #030712) est devenue une référence largement adoptée pour les systèmes de design web. Utilisez le générateur de nuances pour créer une échelle de gris de style Tailwind de 50 à 950 à partir de n'importe quelle valeur de gris de base.

Stratégie de gris pour le mode sombre

La conception en mode sombre nécessite une sélection soigneuse des gris. La tentation d'utiliser le noir pur #000000 comme fond de mode sombre doit être résistée dans la plupart des cas — le noir pur crée un contraste inconfortablement dur avec le texte blanc. À la place :

• Les fonds de mode sombre fonctionnent mieux dans la plage #121212 à #1E1E1E — foncés, mais pas noirs
• Les surfaces de mode sombre (cartes, dialogues) doivent être un ou deux tons plus claires que le fond : #2C2C2C à #3A3A3A
• Le texte sur fonds sombres fonctionne mieux en blancs cassés chauds (de #E8E8E8 à #F5F5F5) plutôt qu'en blanc pur

Conversion des nuances de gris entre modèles de couleur

Pour tout gris, la conversion est simple car la propriété achromatique rend le CMJN et les autres modèles prévisibles :

Pour les gris véritablement achromatiques (R, G, B égaux), la valeur CMJN est toujours C:0 M:0 J:0 N:{X} où N est égal à 100 moins le pourcentage de luminosité. Utilisez le convertisseur de couleurs pour gérer les gris chauds et froids avec une teinte non nulle, où les valeurs CMJN deviennent plus complexes.

Points clés à retenir

• Orthographe : « Gray » est anglais américain ; « grey » est anglais britannique. En CSS, les deux sont valides pour les couleurs nommées ; la plupart correspondent à des valeurs hex identiques. Le gray et le grey de base correspondent tous deux à #808080
• Définition technique : Un vrai gris achromatique a des canaux RGB égaux (R=G=B) et une saturation HSL de 0 %. Tout déséquilibre dans les canaux crée des gris chauds (rouge/vert plus élevé) ou froids (bleu plus élevé)
• Seuil critique d'accessibilité : #767676 est le gris le plus clair qui passe le WCAG AA (4,5:1) en tant que texte sur fond blanc. Le CSS gray #808080 échoue — il n'atteint qu'environ 3,95:1 de contraste
• Identification chaud vs froid : Si le canal bleu est le plus élevé → gris froid. Si le rouge/vert est le plus élevé → gris chaud. Canaux égaux → neutre
• Design web : Les fonds gris, les bordures et les variantes de texte constituent la couche structurelle de presque toute interface web. Utilisez des fonds en mode clair autour de #F5F5F5 et des fonds en mode sombre autour de #121212 à #1E1E1E
• Utilisez le générateur de nuances pour construire une gamme complète de gris et le convertisseur pour traduire n'importe quel gris en CMJN, HSL, RGB ou OKLCH