L’espace colorimétrique standard utilisé par la plupart des écrans depuis des décennies. Toutes les valeurs hexadécimales y appartiennent. Son gamut est limité : un écran moderne peut afficher des couleurs que sRGB ne peut pas décrire.
#4080c0Un espace colorimétrique plus large, pris en charge par la plupart des écrans modernes. Il permet des couleurs plus vives, notamment des verts et des rouges que sRGB ne peut pas atteindre.
P3 exige un écran et un navigateur compatibles. Sinon, les deux cercles affichent la couleur de repli sRGB.
Un espace colorimétrique qui correspond à notre perception de la luminosité. Contrairement à HSL, deux couleurs ayant la même valeur de clarté paraissent réellement aussi lumineuses. Utile pour créer des palettes et des mélanges de couleurs accessibles.
HSL · L 65%OKLCH · L 65%Chaque couleur d’une ligne partage la même valeur L. Comparez les variations de luminosité dans chaque ligne.
La composante de transparence d’une couleur, de totalement opaque à totalement invisible. Une bordure avec alpha se fond dans la surface située dessous. Une couleur hexadécimale opaque reste posée dessus. La différence est subtile, mais toujours perceptible.
#808080Comparez une bordure avec alpha et une bordure opaque #808080 sur différents fonds.
Une variable de couleur nommée selon sa fonction plutôt que sa valeur. --color-border-subtle au lieu de #e0e0e0. Quand la valeur change, tout ce qui utilise ce jeton est mis à jour.
--color-border-subtle
#e0e0e0Modifiez --color-border-subtle pour changer les trois bordures ensemble.
La différence de luminance entre une couleur de premier plan et une couleur de fond. Les WCAG exigent 4,5:1 pour le texte courant, et 3:1 pour le grand texte et les composants d’interface.
WCAG AA : 4,5:1 pour le texte courant ; 3:1 pour le grand texte et les composants d’interface.