Les couleurs web
Lorsque tu intègres ton design sur ton site web, tu cherche toujours comment trouver les variantes d'une teinte en transparence. Tu repasses sur ton logiciel de design pour connaître la valeur de référence en RVB et tu dois retenir les 3 nombres. Avec cette astuce de pro, plus la peine de te prendre la tête. Depuis que j'utilise cette solution, je gagne ue temps fou à intégrer mon design system !
Tu les connais déjà mais refaisons un petit tour pour savoir de quoi on parle. Il existe beaucoup de variantes pour écrire la même teinte en web :
Le colorName
C'est le premier moyen d'écrire les couleur dans le web. Il existe 147 noms de couleurs web standards reconnus par les navigateurs selon la spécification CSS. Inconvénient,; il est donc limité et assez ancien
La couleur hexadecimale
Deuxième utlisation la plus ancienne (1990), elle s'écrit avec un "#" devant 6 caractères du "A" au "F" et du 0 au 9. Elle est ultra compatible avec tous les logiciels de design et même directement implémenté dans les CMS&nbs^;: La suite Adobe, Affinity, Figma, Wordpress, Webflow …
Le RVB
Combinaison des couleurs additives (les lumières qui se mélangent), le RVB (en FR) ou RGB (Red Green Blue en EN) existe depuis 1996 dans les sites web et le CSS1.
Le RGBA
Cela devient intéressant : on implémente la transaprence de la couleur RVB à partir de 2001, soit à partir de l'introduction du CSS3. Il s'écrit comme le RVB, mais on y ajoute une 4ème dimension comme ceci :
"color: rvba(0, 0,0 , 0.5);" par exemple pour écrire un texte en noir opacité de 50%.
À noter que la 4ème dimension s'écrit avec un "." devant la décimale et non une virugule. On peut aussi ne pas écrire le 0 de l'unité qui divient facultatif à partir du CSS4 (2016-2023)
Le HSL / HSLA
Le format HSL est arrivé en même temps que le RVB (1996). Son utilisation est plus intuitive car on comprend facilement comment désaturer une teinte en jouant sur les degrés et les pourcentages de son écriture :
Hue / Teinte (en °, Saturation en %, Lightness / luminosité en %.
Mais je dois avouer que je ne l'utilise que très rarement dans les logiciels de conception graphique ou de prototypage et jamais en intégration pure. Et pourtant pour créer des teintes cohérentes en baissant leur luminosité c'est plus simple que de créer la couleur en RVB... Il faut peut-être que j'évolue dnas ce sens…
La transparence simple et rapide grâce à l'hexadécimale (#12345678)
L'hexadécimale est déjà connue (6 caractères d'où le "hexa"), mais l'implémentation de sa dimension transparente permet aujourd'hui d'intégrer les transparences d'une couleur en seulement 2 caractères de plus. Ils implémantent la couche alpha. C’est plus lisible et entièrement compatible depuis 2020 sur tous les navigateurs
Src : Can I Use, rrggbbaa hex color notation
Le tableau hexadécimale de la transparence
Voici le tableau intégrale des 2 derniers caractères correspondants à la valeur hexadécimale de la transparence de n'importe quelle couleurs.
- 100% — FF
- 99% — FC
- 98% — FA
- 97% — F7
- 96% — F5
- 95% — F2
- 94% — F0
- 93% — ED
- 92% — EB
- 91% — E8
- 90% — E6
- 89% — E3
- 88% — E0
- 87% — DE
- 86% — DB
- 85% — D9
- 84% — D6
- 83% — D4
- 82% — D1
- 81% — CF
- 80% — CC
- 79% — C9
- 78% — C7
- 77% — C4
- 76% — C2
- 75% — BF
- 74% — BD
- 73% — BA
- 72% — B8
- 71% — B5
- 70% — B3
- 69% — B0
- 68% — AD
- 67% — AB
- 66% — A8
- 65% — A6
- 64% — A3
- 63% — A1
- 62% — 9E
- 61% — 9C
- 60% — 99
- 59% — 96
- 58% — 94
- 57% — 91
- 56% — 8F
- 55% — 8C
- 54% — 8A
- 53% — 87
- 52% — 85
- 51% — 82
- 50% — 80
- 49% — 7D
- 48% — 7A
- 47% — 78
- 46% — 75
- 45% — 73
- 44% — 70
- 43% — 6E
- 42% — 6B
- 41% — 69
- 40% — 66
- 39% — 63
- 38% — 61
- 37% — 5E
- 36% — 5C
- 35% — 59
- 34% — 57
- 33% — 54
- 32% — 52
- 31% — 4F
- 30% — 4D
- 29% — 4A
- 28% — 47
- 27% — 45
- 26% — 42
- 25% — 40
- 24% — 3D
- 23% — 3B
- 22% — 38
- 21% — 36
- 20% — 33
- 19% — 30
- 18% — 2E
- 17% — 2B
- 16% — 29
- 15% — 26
- 14% — 24
- 13% — 21
- 12% — 1F
- 11% — 1C
- 10% — 1A
- 9% — 17
- 8% — 14
- 7% — 12
- 6% — 0F
- 5% — 0D
- 4% — 0A
- 3% — 08
- 2% — 05
- 1% — 03
- 0% — 00