Couleurs CSS

Le module Couleurs CSS définit les couleurs, les types de couleurs, le mélange des couleurs, l'opacité, ainsi que la manière d'appliquer ces couleurs et effets au contenu HTML.

Bien que ce module ne comporte que deux propriétés CSS, color et opacity, plus de 20 propriétés CSS et SVG, images CSS, règles at-rules et règles @media dépendent de ces deux propriétés.

Couleurs en action

Le convertisseur de syntaxe de couleur ci-dessous affiche les valeurs de la couleur actuellement sélectionnée en rouge-vert-bleu (RVB), hexadécimal (HEX), teinte, saturation et luminosité (TSL), et teinte, blancheur et noirceur (TBN) selon les formats de couleur CSS. Toutes les valeurs RVB, HEX, TSL et TBN ici, bien qu'écrites différemment, représentent la même couleur.

Sélectionner une couleur via le sélecteur de couleur et une opacité via le curseur met à jour les valeurs RVB, HEX, TSL et TBN. Lorsque vous choisissez une nouvelle couleur ou valeur d'opacité, la couleur de l'arrière-plan et celle du curseur sont mises à jour via les propriétés CSS background-color et accent-color, respectivement.

Pour voir le code de ce convertisseur de syntaxe de couleur, consultez la source sur GitHub ^(angl.).

Référence

Propriétés

Règles @ et descripteurs

Le module Couleurs CSS introduit également la règle @ @color-profile, ainsi que ses descripteurs components, rendering-intent et src. Actuellement, aucun navigateur ne prend en charge ces fonctionnalités.

Fonctions

Fonctions de couleur :
- rgb()
- hsl()
- hwb()
- lab()
- lch()
- oklab()
- oklch()
- color()
color-mix()
contrast-color()
light-dark()
dynamic-range-limit-mix()

Les modules Couleurs CSS introduisent également les fonctions device-cmyk(), contrast-color() et hdr-color(). Actuellement, aucun navigateur ne prend en charge ces fonctionnalités.

Appliquer la couleur aux éléments HTML avec CSS: Un guide pour utiliser CSS afin d'appliquer la couleur à différents types de contenu, y compris toutes les propriétés CSS acceptant <color> comme valeur.
Valeurs de couleur CSS: Un aperçu des espaces colorimétriques et des différentes notations fonctionnelles <color> disponibles en CSS.
Utiliser la couleur judicieusement: Théorie des couleurs et ressources, y compris comment trouver les bonnes couleurs pour créer une palette accessible, le contraste et l'impression en couleur.
Utiliser les couleurs relatives: Cet article explique la syntaxe relative des couleurs CSS, présente les différentes options et propose des exemples illustratifs.
Convertisseur de format de couleur: Un outil permettant de saisir ou de choisir une couleur et de copier sa valeur correspondante dans n'importe quel format de couleur CSS.
Comprendre la couleur et la luminance: Perception des couleurs et utilisation des couleurs en tenant compte des utilisateur·ice·s daltonien·ne·s, malvoyant·e·s et des utilisateur·ice·s avec des troubles vestibulaires ou d'autres troubles neurologiques.
WCAG 1.4.1 : Contraste des couleurs: Explication des exigences de contraste entre le fond et le contenu de premier plan pour garantir la lisibilité.