<color>

On peut fournir une valeur de type <color> en utilisant l'une des syntaxes décrites ci-après.

Les couleurs nommées sont des identifiants, insensibles à la casse, qui représentent une couleur donnée, comme red pour rouge, blue pour bleu, black pour noir, ou encore lightseagreen. Bien que ces noms décrivent plus ou moins, en anglais, les couleurs auxquelles ils sont associés, leur sémantique est arbitraire et il n'y a pas de règle stricte pour déterminer un nom donné.

La liste complète des mots-clés correspondants est disponible sur cette page (en-US).

Le mot-clé currentcolor représente la valeur de la propriété color d'un élément. Cela permet d'utiliser la valeur color sur les propriétés qui ne la reçoivent pas par défaut.

Si currentcolor est utilisé comme valeur pour la propriété color, c'est la valeur héritée pour la propriété color qui est alors utilisée.

<div style="color: blue; border: 1px dashed currentcolor;">
  La couleur de ce texte est bleue.
  <div style="background: currentcolor; height:9px;"></div>
  Ce bloc est entouré d'une bordure bleue.
</div>

Le modèle de couleurs RGB définit des couleurs dans l'espace de couleur sRGB selon ses composantes rouge, vert (green en anglais), et bleu. Une composante alpha optionnelle décrit l'opacité de la couleur (et donc sa transparence).

Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec #) ou une notation fonctionnelle (rgb(), rgba()).

Notation hexadécimale (en-US) : #RGB[A] ou #RRGGBB[AA]

R (rouge), G (vert, green en anglais), B (bleu), et A (alpha) sont des caractères hexadécimaux (de 0 à 9 et de A à F). A est optionnel. Ainsi, #ff0000 sera équivalent à #ff0000ff. La notation sur trois chiffres (#RGB) est une version plus courte de la notation sur six chiffres (#RRGGBB). On a par exemple #f09 qui représente la même couleur que #ff0099. De la même façon, la notation RGB sur quatre chiffres (#RGBA) est une version plus courte de la notation sur huit chiffres (#RRGGBBAA), #0f38 représente par exemple la même couleur que #00ff3388.

rgb() ou rgba() : rgb[a](R, G, B[, A]) or rgb[a](R G B[ / A])

R (rouge), G (vert, green en anglais), et B (bleu) peuvent être des nombres (type <number>) ou des pourcentages (type <percentage>) où le nombre 255 correspond à 100%. A (alpha) peut être un nombre (type <number>) compris entre 0 et 1, ou un pourcentage (type <percentage>) où le nombre 1 correspond à 100% (opacité complète).

Le modèle de couleurs HSL définit des couleurs dans l'espace de couleur sRGB selon ses composantes de teinte (hue en anglais), de saturation, et de luminosité. Une composante alpha optionnelle décrit l'opacité de la couleur (et donc sa transparence).

La plupart des conceptrices et concepteurs trouvent le modèle HSL plus intuitif que le modèle RGB, car il permet d'ajuster indépendamment la teinte, la saturation et la luminosité. HSL permet également de créer plus facilement une palette de nuances sur la même teinte. Toutefois, utiliser HSL afin de créer des variations de couleurs peut produire des résultats surprenants, car il n'est pas uniforme pour la perception. Ainsi, hsl(240 100% 50%) et hsl(60 100% 50%) ont la même composante de luminosité, mais la première est bien plus sombre que la seconde.

Les couleurs HSL sont exprimées à l'aide des notations fonctionnelles hsl() et hsla().

hsl() ou hsla() : hsl[a](H, S, L[, A]) ou hsl[a](H S L[ / A])

H (pour la teinte, hue en anglais) est un angle (type <angle>) sur le cercle des couleurs. Lorsqu'il est écrit sans unité, il est interprété comme étant exprimé en degré. Par définition, on a red=0deg=360deg, et les autres couleurs distribuées sur le cercle avec green=120deg, blue=240deg, etc. Sa valeur étant un <angle>, elle boucle sur elle-même et on a donc -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.

S (saturation) et L (luminosité) sont exprimées en pourcentages. Une saturation à 100% indique une couleur complètement saturée, tandis qu'une saturation à 0% fournira un niveau de gris (une couleur complètement désaturée). Une luminosité à 100% fournira du blanc, tandis qu'une luminosité à 0% fournira du noir et 50% une luminosité « normale ».

A (alpha) peut être un nombre (type <number>) compris entre 0 et 1, ou un pourcentage (type <percentage>), où 1 correspond à 100% (opacité complète).

Similaire au modèle de couleurs HSL, le modèle de couleurs HWB définit une couleur donnée dans l'espace de couleur sRGB selon ses composantes de teinte, de blancheur et de noirceur.

Comme avec le modèle HSL, il peut être plus intuitif de travailler avec le modèle HWB qu'avec le modèle RGB. La teinte est indiquée de la même façon, mais est ici suivie de la quantité de blancheur et de noirceur respectives, exprimées en pourcentages. Cette fonction permet également d'indiquer une valeur pour la composante alpha.

Les couleurs du modèle HWB sont exprimées à l'aide de la notation fonctionnelle hwb().

hwb(): hwb(H W B[ / A])

Comme pour le modèle HSL, H (la teinte, hue en anglais) un angle (type <angle>) sur le cercle des couleurs. Lorsqu'il est écrit sans unité, il est interprété comme étant exprimé en degré. Par définition, on a red=0deg=360deg, et les autres couleurs distribuées sur le cercle avec green=120deg, blue=240deg, etc. Sa valeur étant un <angle>, elle boucle sur elle-même et on a donc -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.

W (blancheur, whiteness en anglais) et B (noirceur, blackness) sont des pourcentages (type <percentage>). Ces deux valeurs sont mélangées et il faut donc 0% de blancheur et 100% de noirceur afin de produire du noir. Réciproquement, il faudra 100% de blancheur et 0% de noirceur pour produire du blanc. 50% sur l'une ou l'autre des valeurs produira une teinte de gris intermédiaire avec une teinte de la couleur fournie avec le premier paramètre.

A (alpha) peut être un nombre (type <number>) compris entre 0 et 1, ou un pourcentage (type <percentage>), où 1 correspond à 100% (opacité complète). Lorsqu'on fournit une valeur alpha, celle-ci doit être précédée d'une barre oblique (/).

En mode de couleurs forcé (détectable avec la caractéristique média forced-colors), la plupart des couleurs sont restreintes à la palette définie par l'utilisatrice/l'utilisateur et le navigateur. Les couleurs système sont exposées avec les mots-clés suivants, qui peuvent être utilisés afin de s'assurer que le reste de la page s'intègre bien avec la palette restreinte. Ces valeurs peuvent être utilisées dans d'autres contextes, mais ne sont pas prises en charge par l'ensemble des navigateurs.

Les mots-clés de cette liste sont définis dans le module de spécification CSS Color de niveau 4 : ActiveText, ButtonBorder, ButtonFace, ButtonText, Canvas, CanvasText, Field, FieldText, GrayText, Highlight, HighlightText, LinkText, Mark, MarkText, VisitedText.

Cette notation a été introduite par le module de spécification CSS Color de niveau 4. Les couleurs Lab sont définies à l'aide de la notation fonctionnelle lab(). Ces couleurs ne sont pas limitées à un espace de couleur spécifique et il est possible de représenter toutes les couleurs visibles par l'œil humain.

Cette notation a été introduite par le module de spécification CSS Color de niveau 4. Les couleurs LCH sont définies à l'aide de la notation fonctionnelle lch(). Ces couleurs ne sont pas limitées à un espace de couleur spécifique et il est possible de représenter toutes les couleurs visibles par l'œil humain.

LCH est la forme polaire de Lab et est souvent plus pratique à utiliser, car les composantes de chroma et de teinte sont indépendantes plutôt que d'être mélangées. Ce modèle est similaire à HSL dans cette représentation polaire/cylindrique, mais il est plus uniforme quant à la perception. À la différence de HSL où hsl(60 100% 50%) hsl(240 100% 50%) sont décrits avec la même luminosité, LCH (et Lab) affectent différentes luminosités à ces couleurs :

• La première (jaune) aura L=97.6
• La seconde (bleue) aura L=29.6.

Aussi, LCH peut être utilisé afin de créer des palettes de couleurs différentes, avec des résultats prévisibles.

Cette notation a été introduite par le module de spécification CSS Color de niveau 4. Les couleurs définies grâce à la fonction color() peuvent être définies par rapport à n'importe quel espace de couleur prédéfini ou personnalisé (dans ce cas l'espace de couleur sera défini avec une règle @color-profile).

Pour les animations et les dégradés, les valeurs <color> sont interpolées selon chacune de leurs composantes rouge, verte, bleu. Chaque composante est interpolée comme un nombre décimal. L'interpolation des couleurs s'effectue dans l'espace de couleur sRGBA avec les alpha pré-multipliés afin d'éviter l'apparition de couleurs grises. Pour les animations, la vitesse de l'interpolation est déterminée par la fonction de transition.

Certaines personnes distinguent difficilement les couleurs entre elles. La recommandation WCAG 2.1 indique que la couleur ne doit pas être utilisée comme unique façon de transmettre un message, d'indiquer une action ou de fournir un résultat. Voir l'article Couleur et contraste pour plus d'informations.

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color> (en-US)         

<absolute-color-base> = 
  <hex-color> (en-US)                |
  <absolute-color-function>  |
  <named-color> (en-US)              |
  transparent                

<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>  

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<rgba()> = 
  <legacy-rgba-syntax>  |
  <modern-rgba-syntax>  

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<hsla()> = 
  <legacy-hsla-syntax>  |
  <modern-hsla-syntax>  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-rgba-syntax> = 
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )      

<modern-rgba-syntax> = 
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsla-syntax> = 
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

Dans cet exemple, on fournit un élément <div> et un champ texte. Saisir une couleur valide dans le champ texte permettra d'appliquer cette couleur sur l'élément <div>, vous permettant ainsi de tester vos valeurs de couleur.

HTML

<div></div>
<hr />
<label for="color">Veuillez saisir une valeur de couleur valide&nbsp;:</label>
<input type="text" id="color" />

CSS

div {
  width: 100%;
  height: 200px;
}

const inputElem = document.querySelector("input");
const divElem = document.querySelector("div");

function validTextColor(stringToTest) {
  if (stringToTest === "") {
    return false;
  }
  if (stringToTest === "inherit") {
    return false;
  }
  if (stringToTest === "transparent") {
    return false;
  }

  const image = document.createElement("img");
  image.style.color = "rgb(0, 0, 0)";
  image.style.color = stringToTest;
  if (image.style.color !== "rgb(0, 0, 0)") {
    return true;
  }
  image.style.color = "rgb(255, 255, 255)";
  image.style.color = stringToTest;
  return image.style.color !== "rgb(255, 255, 255)";
}

inputElem.addEventListener("change", () => {
  if (validTextColor(inputElem.value)) {
    divElem.style.backgroundColor = inputElem.value;
    divElem.textContent = "";
  } else {
    divElem.style.backgroundColor = "white";
    divElem.textContent = "Valeur de couleur invalide";
  }
});

Résultat

Dans cet exemple, on indique différentes façons de créer une même couleur avec les différentes syntaxes RGB.

/* Ces variations de syntaxe définissent toutes la même valeur, un rose vif complètement opaque. */

/* Syntaxe hexadécimale */
#f09
#F09
#ff0099
#FF0099

/* Syntaxe fonctionnelle */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* Erreur ! On ne mélange pas nombres et pourcentages. */
rgb(255 0 153)

/* Syntaxe hexadécimale avec une valeur alpha */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* Syntaxe fonctionnelle avec une valeur alpha */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, .5)
rgb(255, 0, 153, 0.5)
rgb(255, 0, 153, 100%)

/* Syntaxe avec l'espace comme séparateur des paramètres */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Syntaxe fonctionnelle avec des valeurs décimales */
rgb(255, 0, 153.6, 1)
rgb(2.55e2, 0e0, 1.53e2, 1e2%)

• La propriété opacity qui permet de définir la transparence à l'échelle d'un élément.
• Certaines propriétés fréquemment employées et qui utilisent ce type de données :
  • color,
  • background-color,
  • border-color,
  • box-shadow,
  • outline-color,
  • text-shadow
• Appliquer des couleurs aux éléments HTML en utilisant CSS