Pipette

Nuances de Gris

Dans cet article, nous aimerions aborder le sujet "valeurs grises". Pour cela, nous allons d'abord regarder quelles caractéristiques et quelle forme ont les valeurs de gris dans les différents modèles de couleurs courants. Ensuite, nous comparons une série de différentes valeurs de gris du noir au blanc dans un tableau, où les valeurs de gris sont graduées toujours selon les mêmes étapes d'une couleur à l'autre. Ce tableau permet de comprendre facilement les explications introduites dans les sections concernant les modèles de couleur. Enfin, nous examinerons les termes courants utilisés pour les différentes nuances de gris dans différents contextes.

Cet article est divisé en les sections suivantes:

Valeurs de Gris dans le Modèle de Couleurs RVB/RGB

Dans le modèle de couleur RVB ou RGB, lorsque les proportions de rouge (R), de vert (G, Green) et de bleu (B) sont identiques, le résultat est toujours une valeur de gris. Si chacune de ces proportions vaut 0, le résultat est noir (en notation hexadécimale #000 ou #000000). En revanche, si toutes les parts sont à 100 %, le résultat est blanc (en notation hexadécimale #FFF ou #FFFFFF respectivement 255 en notation décimale). Entre les deux, toutes les autres valeurs de gris sont classées en conséquence.

Valeurs de Gris dans le Modèle de Couleurs CMY/CMJ

Le modèle de couleur CMY ou CMJ se comporte de la même manière que le modèle de couleur RGB/RVB. Ici aussi, une valeur de gris apparaît avec exactement les mêmes proportions des composants cyan (C), magenta (M) et jaune (Y, Yellow). Toujours dans ce modèle, la valeur de luminosité respectivement la valeur de gris peut être réglée en faisant varier constamment ces trois valeurs.

Cependant, dans le modèle de couleur CMY soustractif, la direction est opposée au modèle de couleur RGB additif: alors que dans le modèle de couleur CMY, pour la couleur noire, toutes les composantes doivent être de 100 % et de 0 % pour la couleur blanche, dans le modèle de couleur RGB, c'est exactement l'inverse. Dans le modèle de couleur RGB, le blanc est obtenu lorsque tous les composants sont à 100 % et le noir lorsque chacun des 3 composants sont à 0 %.

Valeurs de Gris dans le Modèle de Couleurs CMYK/CMJN

Une valeur de gris est obtenue dans le modèle CMYK ou CMJN en maintenant les valeurs de cyan (C), magenta (M) et jaune (Y, Yellow) arbitrairement constantes et en réglant la valeur de gris via la proportion de K (Key, Black, Noire). Dans ce processus, K peut adopter des valeurs de 0 à 100 %. Étant donné que "K" représente la proportion de noir, dans le modèle de couleur CMYK, en supposant que le cyan, le magenta et le jaune sont à 0 %, nous obtenons automatiquement un noir pur avec une valeur K de 100 % et la couleur blanche si nous définissons le K valeur à 0 %.

Cependant, si nous fixons les valeurs de cyan, magenta et jaune à 100 %, en raison du mélange de couleurs soustractif, il se comporte exactement dans l'autre sens: dans ce cas, nous obtenons un noir pur avec une valeur K de 0 % et un blanc avec une valeur K de 100 pour cent. Si le cyan, le magenta et le jaune ont une valeur identique, qui est comprise entre 0 et 100 %, on obtient toujours des valeurs de gris et un noir pur en faisant varier la valeur K, mais plus du blanc pur. Plus les valeurs identiques de cyan, magenta et jaune sont élevées, plus la valeur de gris est foncée à partir d'une valeur K de 0 %. Si le cyan, le magenta et le jaune sont même à 100 %, nous obtenons toujours du noir, quel que soit le pourcentage de la valeur de K.

Valeurs de Gris dans le Modèle de Couleurs HSV

Dans le modèle de couleur HSV, une valeur de gris résulte d'une saturation (S, Saturation) de 0 %. Avec cela, la teinte sélectionnée (H, Hue) ne joue plus de rôle et la luminosité (V, Value) détermine où se situe le gris entre le blanc et le noir.

Cela signifie qu'avec une saturation de 0 %, nous pouvons réguler la valeur de gris uniquement par la luminosité. Avec une luminosité de 0 %, nous obtenons du noir, avec une luminosité de 100 %, nous obtenons du blanc, entre les deux se trouvent les valeurs de gris. Dans ce processus, la hue peut prendre n'importe quelle valeur sans changer le résultat, car elle est complètement désactivée par la saturation de 0 %. Cependant, généralement, on n'utilise pas une valeur H arbitraire pour les valeurs de noir, blanc et gris, mais une valeur de 0 %, car cela reflète le mieux l'insignifiance de cette valeur.

Valeurs de Gris dans le Système CIE/XYZ

Le modèle de couleurs XYZ, respectivement le système de valence standard CIE développé par la Commission internationale de l'éclairage, se comporte complètement différemment des modèles de couleurs présentés jusqu'à présent. Ce modèle tente de prendre en compte la perception humaine et de représenter toutes les couleurs possibles (ce que les autres modèles ne peuvent pas).

Pour y parvenir, ce système définit différents observateurs et conditions d'éclairage afin de s'adapter au plus grand nombre de situations possible. En fonction de l'éclairage que vous choisissez, les valeurs résultant de la conversion d'autres modèles de couleurs varieront en conséquence.

L'un des types d'éclairage les plus courants et les plus fréquemment utilisés est l'éclairage standard CIE D65 (lumière du jour moyenne), qui est également utilisé par exemple pour sRGB, Adobe RGB et la norme TV PAL/SECAM. Dans ces conditions d'éclairage, le blanc RVB est à X = 95,047 ; Y = 100.000 et Z = 108.883, alors que le noir RVB est à X = 0 ; Y = 0 et Z = 0. Les nuances de gris intermédiaires augmentent dans le même rapport entre elles, mais contrairement à tous les autres modèles de couleurs présentés jusqu'à présent, comme RVB, CMJ, CMJN ou HSV, elles ne suivent pas une gradation linéaire exacte. Par exemple, bien que le gris RVB à 50 % soit exactement à mi-hauteur de l'échelle dans tous les autres systèmes, dans le système XYZ dans les conditions D65, il est à X = 20,518 ; Y = 21,586 et Z = 23,507 seulement à environ 20 % de l'échelle.La raison pour cela est que les couleurs de l’espace colorimétrique XYZ ne sont pas réparties uniformément. Si vous utilisez d'autres conditions d'éclairage, le noir RVB reste à 0 tandis que seul le maximum de l'échelle (là où se situe le blanc RVB) change.

Lors de l'utilisation de la variante xyz standardisée Yxy (également connue sous le nom xyY) dans des conditions de lumière du jour moyenne (éclairage standard CIE D65), la couleur blanche ou le point blanc se trouve au milieu de l'espace colorimétrique CIE xy (au milieu de l'espace colorimétrique standard CIE) à la position de coordonnées x = 0,313 et y = 0,328 avec une luminosité de Y = 100 %. Toutes les valeurs de gris, y compris le noir, sont également à ce stade, mais avec une valeur de luminosité Y de 0 % (noir) en passant par les nuances de gris correspondantes jusqu'à 100 % (blanc). Si nous choisissons un autre type d’éclairage, le point blanc se déplacerait vers un autre endroit. Par exemple, le point blanc de l'éclairage standard CIE D55 (soleil direct) est à x = 0,3324 et 0,3474, tandis que l'éclairage standard CIE E (point blanc du point avec la même énergie) est exactement au tiers pour les deux valeurs.

Valeurs de Gris dans le Système TColor

La valeur TColor, basée sur le modèle de couleur RVB, calcule les composantes RVB du rouge, du vert et du bleu en un seul nombre (plus d'informations sur la formule de calcul dans l'article lié). Cela fait du système TColor le seul de tous les modèles de couleurs présentés ici qui n'utilise qu'une seule valeur pour décrire complètement une couleur.

Avec ce calcul, le noir donne une valeur TColor de 0, le blanc donne la valeur 16777215. Entre les deux se trouvent les 254 niveaux de gris entiers différents du modèle RVB (256 niveaux de gris du noir au gris en passant par le blanc), toujours à la même distance de 65793. Chaque 65793ème valeur TColor est donc une valeur de gris. Le nombre 65793 résulte du parcours complet de deux canaux de couleurs (256 x 256 = 65536 couleurs) plus 256 + 1 couleurs du troisième canal de couleurs.

Tableau des Couleurs avec des Valeurs de Gris

Pour démontrer ces particularités des différents modèles de couleurs, le tableau suivant contient des valeurs de gris entre noir (haut) et blanc (bas) ainsi que les valeurs correspondantes dans divers modèles de couleur. Sous le tableau, vous trouverez une explication des différentes colonnes.

 HEX%RGBCMYCMYKHSVXYZXYZXYZTColor
 #0000000,000100,0100,00,000,000,000,000
 #0505051,96598,098,01,960,140,150,17328965
 #0A0A0A3,921096,196,13,920,290,300,33657930
 #0F0F0F5,881594,194,15,880,450,480,52986895
 #1414147,842092,292,27,840,670,700,761315860
 #1919199,802590,290,29,800,920,971,061644825
 #1E1E1E11,763088,288,211,81,231,301,411973790
 #23232313,733586,386,313,71,601,681,832302755
 #28282815,694084,384,315,72,022,122,312631720
 #2D2D2D17,654582,482,417,62,492,622,862960685
 #32323219,615080,480,419,63,033,193,473289650
 #37373721,575578,478,421,63,633,824,163618615
 #3C3C3C23,536076,576,523,54,294,524,923947580
 #41414125,496574,574,525,55,025,295,764276545
 #46464627,457072,572,527,55,826,126,674605510
 #4B4B4B29,417570,670,629,46,697,047,664934475
 #50505031,378068,668,631,47,628,028,745263440
 #55555533,338566,766,733,38,639,089,895592405
 #5A5A5A35,299064,764,735,39,7210,211,15921370
 #5F5F5F37,259562,762,737,310,911,412,56250335
 #64646439,2210060,860,839,212,112,713,96579300
 #69696941,1810558,858,841,213,414,115,46908265
 #6E6E6E43,1411056,956,943,114,815,617,07237230
 #73737345,1011554,954,945,116,317,118,77566195
 #78787847,0612052,952,947,117,918,820,57895160
 #7D7D7D49,0212551,051,049,019,520,522,38224125
 #82828250,9813049,049,051,021,222,324,38553090
 #87878752,9413547,147,152,923,024,226,48882055
 #8C8C8C54,9014045,145,154,924,926,228,69211020
 #91919156,8614543,143,156,926,928,330,89539985
 #96969658,8215041,241,258,829,030,533,29868950
 #9B9B9B60,7815539,239,260,831,232,835,710197915
 #A0A0A062,7516037,337,362,733,435,238,310526880
 #A5A5A564,7116535,335,364,735,837,641,010855845
 #AAAAAA66,6717033,333,366,738,240,243,811184810
 #AFAFAF68,6317531,431,468,640,742,946,711513775
 #B4B4B470,5918029,429,470,643,445,649,711842740
 #B9B9B972,5518527,527,572,546,148,552,812171705
 #BEBEBE74,5119025,525,574,548,951,556,112500670
 #C3C3C376,4719523,523,576,551,954,659,412829635
 #C8C8C878,4320021,621,678,454,957,862,913158600
 #CDCDCD80,3920519,619,680,458,061,066,513487565
 #D2D2D282,3521017,617,682,461,364,470,213816530
 #D7D7D784,3121515,715,784,364,668,074,014145495
 #DCDCDC86,2722013,713,786,368,071,677,914474460
 #E1E1E188,2422511,811,888,271,675,382,014803425
 #E6E6E690,202309,809,8090,275,279,186,215132390
 #EBEBEB92,162357,847,8492,279,083,190,515461355
 #F0F0F094,122405,885,8894,182,887,194,915790320
 #F5F5F596,082453,923,9296,186,891,399,416119285
 #FAFAFA98,042501,961,9698,090,995,6104,016448250
 #FFFFFF100,002550,000,00100,095,0100,0109,016777215

Dans la première colonne du tableau, vous pouvez voir un petit carré avec le ton gris de la ligne correspondante du tableau. Viennent ensuite les valeurs individuelles des différents modèles de couleurs présentés:

Si vous voulez des valeurs plus précises ou voulez traiter les valeurs de gris, vous pouvez simplement choisir la couleur avec la Pipette. Il vous suffit de choisir les couleurs à partir de la fenêtre de votre navigateur avec la fonction de Pipette pour ne pas avoir à les saisir manuellement. La Pipette peut également être utilisée pour comprendre l'effet de la variation de chaque composant des différents modèles de couleurs sur le degré d'obscurité ou de luminosité en augmentant ou en diminuant progressivement les proportions de chaque composant dans le programme.

Le tableau a été généré automatiquement par une solution logicielle individuelle de Stefan Trost Media.

Noms des Valeurs de Gris spécifiques

Certaines des valeurs de gris présentées peuvent être décrites non seulement par leur valeur numérique dans l'un des différents modèles de couleurs, comme nous l'avons vu dans la dernière section, mais également par leurs propres noms, qui peuvent cependant différer selon le contexte.

Le tableau suivant compare certains de ces termes à partir de différents contextes. La plupart de ces noms de couleurs et constantes de couleurs proviennent du module de couleurs X11 / SVG / CSS3, qui peut également être utilisé pour colorer des sites Web, d'autres proviennent de langages de programmation tels que Java, Pascal (Delphi et Lararus) ou VBA (Visual Basic for Applications), du application framework et GUI toolkit Qt ainsi que du langage de balisage de texte et de document LaTeX et de la norme PWG 5101.1 (Media Color Names) développée par le Printer Working Group (PWG).

Les quatre premières colonnes contiennent un champ de couleur pour la valeur de gris, le code couleur hexadécimal et le pourcentage arrondi de tous les canaux de couleur du modèle de couleur RVB / RGB ainsi qu'une traduction française du nom respectif. Viennent ensuite les noms individuels des contextes respectifs. Si un contexte ne fournit pas un nom distinct pour l'une des valeurs de couleur répertoriées, le champ correspondant est marqué d'une ligne.

 HEX%NomX11 / CSSJavaPascalQtVBALaTeXPWG
 #0000000NoirBlackBLACKclBlackblackvbBlackblackBlack
 #40404025Gris Foncé-DARK_GRAYclDkGray--darkgrayDark Gray
 #69696941Gris NuageuxDimGray------
 #80808050GrisGray [CSS]GRAYclGraydarkGray-grayGray
 #A0A0A063Gris Moyen--clMedGraygray---
 #A9A9A966Gris FoncéDarkGray------
 #AFAFAF69Argent Foncé------Dark Silver
 #BEBEBE74Gris MédiumGray [X11]------
 #BFBFBF75Gris Pâle-----lightgray-
 #C0C0C075ArgentSilverLIGHT_GRAYclSilver/clLtGraylightGray--Silver
 #D3D3D383Gris ClairLightGray-----Light Gray
 #DCDCDC86GainsboroGainsboro------
 #E0E0E087Argent Pur------Clear Silver
 #E1E1E188Argent Clair------Light Silver
 #F5F5F596Blanc FuméeWhiteSmoke------
 #FFFFFF100BlancWhiteWHITEclWhitewhitevbWhitewhiteWhite


Dans tous les contextes, il existe un consensus pour utiliser les termes "noir" et "blanc" pour les couleurs avec les codes de couleur RVB hexadécimaux #000000 (part de couleur du rouge, du vert et du bleu de 0 %) respectivement #FFFFFF (part de couleur du rouge, du vert et du bleu de 100%). Mais également le terme "gris" est utilisé de manière relativement uniforme pour une part RVB de 50 % sur tous les canaux, ce qui correspond au code couleur RVB #808080.

Cependant, déjà les termes "gris clair" et "gris foncé" sont beaucoup plus ambigus. Alors que la plupart des contextes font référence à la valeur de couleur RVB #404040 comme gris foncé, Qt définit à la place la valeur de couleur #808080 comme "gris foncé", qui est appelé "gris" dans la plupart des autres contextes, tandis que CSS utilise même ce terme pour le valeur de couleur #A9A9A9, qui est plus claire que le gris normal à 50 %. De plus, le terme "gris clair" peut signifier une couleur allant de #BFBFBF à #D3D3D3, selon le contexte. Ici, vous découvrirez pourquoi la norme CSS définit DarkGray plus clair que le gris normal (Gray).

D'autres termes pour les nuances de gris - classés en fonction de leur luminosité du noir au blanc - sont les mots "gris nuageux" pour #696969, "gris moyen" pour #A0A0A0, "argent foncé" pour #AFAFAF, "gris pâle" pour #BFBFBF, "argent" pour #C0C0C0, "gainsboro" pour #DCDCDC, "argent pur" pour #E0E0E0, "argent clair" pour #E1E1E1 ainsi que "blanc fumée" pour #F5F5F5. Cependant, la plupart de ces termes supplémentaires sont seulement utilisés dans un ou quelques contextes. La plupart des termes désignant les nuances de gris sont définis par la norme CSS et le Printer Working Group.

L'ambiguïté des définitions des valeurs de gris existe non seulement entre différents contextes mais également au sein de certains espaces de définition. Par exemple, la valeur de gris #C0C0C0 est décrite par Pascal deux fois comme "argent" (clSilver) et "gris clair" (clLtGray). Les noms de couleurs du Printer Working Group (PWG) contiennent également plusieurs définitions multiples. Cela est dû à l'approche de cette palette de couleurs pour définir presque toutes les valeurs de couleur non seulement dans leur version pure mais aussi dans les nuances "dark", "light" et "clear". Dans le groupe des valeurs de gris sans valeur de couleur, cette gradation signifie que non seulement "Gray" se voit attribuer la valeur de gris #808080, mais que "Clear Black" et "Light Black" incarnent également la même valeur de gris. Il en va de même pour #C0C0C0 ("Silver" ou "Clear Gray") et #FFFFFF ("White" ou "Clear White"»).

Une autre forme de double définition peut être trouvée dans le standard CSS: CSS accepte non seulement l'écriture américaine "Gray" avec "a" mais aussi l'écriture anglaise "Grey" avec "e" à la place. Les mots "Grey", "DimGrey", "DarkGrey" et "LightGrey" peuvent donc être utilisés de manière équivalente à "Gray", "DimGray", "DarkGray" et "LightGray", même si d'anciens navigateurs comme le Netscape Navigator insistaient encore sur la variante "a".
Un autre type de double définition, encore différent, concerne les constantes de couleur Java: Normalement, le langage de programmation Java est sensible à la casse (case-sensitive). Cependant, les constantes de couleur indiquées dans le tableau peuvent être écrites aussi bien en minuscules qu'en majuscules. Cette particularité est due au fait que la première définition de ces constantes était en minuscules. Cependant, comme la convention Java recommande des constantes en majuscules, une redéfinition correspondante a été effectuée tout en conservant les variantes déjà définies pour des raisons de compatibilité. Sinon, l'approche habituelle dans le langage ou l'environnement de programmation respectif s'applique à l'écriture des constantes de couleur et des noms de couleurs, par exemple que CSS, Pascal et VBA ne sont pas sensibles à la casse et autorisent donc toutes les écritures et les considèrent comme équivalentes, tandis que LaTex et normalement aussi Java, par exemple, sont sensibles à la casse et n'acceptent que les écritures affichées.

Autres Chartes de Couleurs

Luminosité et Saturation | Luminosité | Saturation | Nuances de Gris | Noms de Couleur | Couleurs du Web