<hue>

Syntaxe

Une valeur <hue> peut être soit un <angle>, soit un nombre (<number>).

Valeurs

<angle>

Un angle exprimé en degrés, grades, radians ou tours à l'aide de deg, grad, rad ou turn respectivement.

<number>

Un nombre réel, représentant des degrés de l'angle de teinte.

Comme un <angle> est périodique, <hue> est normalisé dans l'intervalle [0deg, 360deg). Il s'enroule implicitement de sorte que 480deg équivaut à 120deg, -120deg équivaut à 240deg, -1turn équivaut à 1turn, etc.

Description

La roue chromatique ci-dessus montre les teintes à tous les angles dans l'espace colorimétrique sRGB espace colorimétrique. En particulier, rouge est à 0deg, jaune à 60deg, vert à 120deg, cyan à 180deg, bleu à 240deg et magenta à 300deg.

Les angles correspondant à des teintes particulières diffèrent selon l'espace colorimétrique. Par exemple, l'angle de teinte du vert sRGB est 120deg dans l'espace sRGB, mais 134,39deg dans l'espace CIELAB.

Le tableau suivant liste les couleurs typiques à différents angles dans les espaces colorimétriques sRGB (utilisé par hsl() et hwb()), CIELAB (utilisé par lch()) et Oklab (utilisé par oklch()) :

Interpolation des valeurs <hue>

Les valeurs <hue> sont interpolées comme des valeurs <angle>, et l'algorithme d'interpolation par défaut est plus courte. Dans certaines fonctions CSS liées à la couleur, cela peut être remplacé par le composant <hue-interpolation-method>.

Syntaxe formelle

<hue> = 
  <number>  |
  <angle>   

Exemples

Modifier la teinte d'une couleur à l'aide d'un curseur

L'exemple suivant montre l'effet du changement de la valeur hue de la notation fonctionnelle hsl() sur une couleur.

HTML

<input type="range" min="0" max="360" value="0" id="hue-slider" />
<p>Hue: <span id="hue-value">0deg</span></p>
<div id="box"></div>

CSS

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}
p {
  font-family: sans-serif;
}
span {
  font-family: monospace;
  background: rgb(0 0 0 / 10%);
  padding: 3px;
}
#hue-slider {
  width: 90%;
}

#box {
  background-color: hsl(0 100% 50%);
}

JavaScript

const hue = document.querySelector("#hue-slider");
const box = document.querySelector("#box");
hue.addEventListener("input", () => {
  box.style.backgroundColor = `hsl(${hue.value} 100% 50%)`;
  document.querySelector("#hue-value").textContent = `${hue.value}deg`;
});

Résultat

Approximation des teintes rouges dans différents espaces colorimétriques

L'exemple suivant montre une couleur rouge similaire dans différents espaces colorimétriques. Les valeurs dans les fonctions lch() et oklch() sont arrondies pour plus de lisibilité.

HTML

<div data-color="hsl-red">hsl()</div>
<div data-color="hwb-red">hwb()</div>
<div data-color="lch-red">lch()</div>
<div data-color="oklch-red">oklch()</div>

CSS

[data-color="hsl-red"] {
  /* hsl(<hue> <saturation> <lightness>) */
  background-color: hsl(0 100% 50%);
}
[data-color="hwb-red"] {
  /* hwb(<hue> <whiteness> <blackness>) */
  background-color: hwb(0 0% 0%);
}
[data-color="lch-red"] {
  /* lch(<lightness> <chroma> <hue>) */
  background-color: lch(50 150 40);
}
[data-color="oklch-red"] {
  /* oklch(<lightness> <chroma> <hue>) */
  background-color: oklch(0.6 0.4 20);
}

div {
  font-family: monospace;
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
  display: inline-block;
}

Résultat

Spécifications

Compatibilité des navigateurs

css.types.color.hsl

css.types.color.hwb

css.types.color.lch

css.types.color.oklch

Voir aussi

• Le type de donnée <color>
• Le type de donnée <hue-interpolation-method>