CSS: Pourquoi DarkGray est-il plus lumineux que Gray?

La norme CSS définit la couleur "Gray" (gris) plus foncée que "DarkGray" (gris foncé), tandis que "LightGray" (gris clair) est, comme prévu, plus claire que ces deux autres nuances. Comment est-ce possible? Je voudrais répondre à cette question dans ces information.

En bref: Cette particularité du standard CSS a, comme c'est souvent le cas dans de telles circonstances, des raisons historiques pour maintenir la compatibilité.

Les Couleurs

Concrètement, il s'agit des couleurs suivantes issues des standards HTML 3.2 et X11, qui constituent la base des couleurs CSS3:

HTML 3.2 et CSS 1

Initialement, le standard HTML ne contenait que 16 noms de couleurs différents. Il s'agissait des "Couleurs VGA" introduites avec HTML 3.2 et CSS 1, qui correspondaient pour l'essentiel aux couleurs de base avec quelques dégradés rudimentaires.

En plus de "Black" (noir) et "White" (blanc), cette norme ne contenait que "Gray" (gris) défini avec la valeur RVB #808080 ainsi que "Silver" (argent) défini avec #C0C0C0, mais aucun nom de couleur pour le gris clair ou le gris foncé.

Développement de CSS3

Cela a changé avec CSS 3. Le World Wide Web Consortium W3C voulait prendre en charge davantage de noms de couleurs et une telle liste existait déjà à cette époque: les noms de couleurs X11, publiés en juin 1986 et étendus jusqu'à 1989 pour inclure plus de couleurs, presque jusqu'au niveau actuel. Cette liste de couleurs a été compilée pour le X Window System (logiciel Unix pour créer des interfaces utilisateur graphiques) et contenait plus de 100 noms de couleurs différents. Dans le même temps, ces noms de couleurs étaient également pris en charge par quelques premiers navigateurs tels que Mosaic et Netscape Navigator, car ces deux programmes étaient initialement développés en tant qu'applications X. De plus, la liste était open source. Voilà donc en fait les conditions idéales pour une adoption dans le standard CSS.

Cependant, malheureusement, il y avait un petit problème: les couleurs X ne pouvaient pas être simplement adoptées un par un, car certaines couleurs étaient définies différemment que dans l'ancienne norme CSS1, déjà prise en charge. Et bien entendu, le nouveau standard CSS devait rester compatible avec l’ancien.

X11 définissait DarkGray comme #A9A9A9 (66%), Gray comme #BEBEBE (75%) ainsi que LightGray comme #D3D3D3 (83%), alors que la norme précédente ne connaissait ni DarkGray ni LightGray, mais définissait Gray comme #808080 (50%), donc plus sombre que le DarkGray du X11. X11 était donc cohérent en interne et définissait "gris foncé" plus foncé que "gris" et "gris clair" plus clair que "gris", mais cela n'était pas cohérent avec la valeur déjà définie de "gris".

Le noir (Black) et le blanc (White), en revanche, ne posaient aucun problème, car les deux couleurs étaient déjà incluses dans les deux normes et étaient définies de la même manière avec #000000 respectivement  #FFFFFF.

Le Compromis

Puisque le consortium voulait adopter autant de couleurs que possible de X11 (également parce que certains navigateurs fonctionnaient déjà avec ces couleurs), mais en même temps, ils ne voulaient pas contredire la norme existante, le consortium a décidé du compromis consistant à adopter DarkGray et LightGray de X11 avec exactement la définition X11, mais en conservant en même temps l'ancienne définition de Gray.

Grâce à ce compromis, nous devons désormais vivre avec le fait que, contrairement aux attentes, le "gris" dans la norme CSS est plus foncé que le "gris foncé" respectivement que le "gris" dans sa luminosité ne se situe pas entre "gris foncé" et "gris clair", comme on pourrait s'y attendre.

Autres Valeurs et Noms de Gris

Vous pouvez trouver plus de valeurs de gris définies par la norme CSS ainsi que des informations supplémentaires sur ce sujet, notamment des tables de couleurs, dans mon article sur les valeurs de gris.