Qu'est-ce que la teinte ? La propriété de couleur la plus fondamentale

Si vous dépouillez une couleur de sa luminosité et de son éclat — si vous demandez « mais à quelle famille de couleur appartient-elle ? » — il reste la teinte. La teinte est la propriété la plus fondamentale de la couleur, la qualité qui distingue le rouge du bleu, l'orange du vert et le violet du jaune. Tous les autres attributs de couleur — son éclat, sa vivacité, sa douceur — existent comme des modifications de la teinte. Comprendre la teinte, c'est comprendre le squelette de tout le système de couleurs.

La teinte définie et positionnée sur le cercle chromatique

La teinte est l'attribut d'une couleur qui permet de la classer comme rouge, orange, jaune, vert, bleu, violet ou dans n'importe quelle nuance intermédiaire. C'est la question « de quelle couleur est-il ? » avant toute considération sur l'obscurité, la clarté ou la vivacité de la couleur.

Le modèle le plus intuitif pour la teinte est le cercle chromatique — un arrangement circulaire des teintes qui place les couleurs proches l'une de l'autre et les couleurs opposées face à face. Le cercle chromatique tel que la plupart des designers l'utilisent aujourd'hui est issu des travaux de Johann Wolfgang von Goethe (Théorie des couleurs, 1810) et a été affiné par le système de couleurs perceptuel de Munsell au début du vingtième siècle.

Le cercle chromatique traditionnel du peintre organise les teintes autour de :

Couleurs primaires : Rouge, Jaune, Bleu (dans le modèle de pigments traditionnel)
Couleurs secondaires : Orange (rouge + jaune), Vert (jaune + bleu), Violet (bleu + rouge)
Couleurs tertiaires : les six couleurs situées entre les primaires et les secondaires — rouge-orangé, jaune-orangé, jaune-vert, bleu-vert, bleu-violet, rouge-violet

L'idée clé du cercle chromatique est que la teinte est circulaire. En parcourant le cercle, on passe sans rupture du rouge à l'orange, au jaune, au vert, au cyan, au bleu, au violet, au magenta, puis de nouveau au rouge — sans frontière nette entre deux familles adjacentes. Cette circularité signifie que la « distance » entre deux teintes peut se mesurer comme un angle, ce qui est exactement la façon dont les modèles de couleur numériques la représentent.

La teinte dans les modèles de couleur HSL et HSV

En couleur numérique, la teinte s'exprime comme un angle en degrés, allant de 0 à 360. Cette représentation est utilisée à la fois dans HSL (Teinte, Saturation, Luminosité) et HSV (Teinte, Saturation, Valeur — aussi appelé HSB pour Luminosité), les deux modèles de couleur centrés sur la perception humaine les plus largement utilisés.

L'angle de teinte

Le cercle des teintes en HSL et HSV associe les familles de couleurs standard à des valeurs en degrés :

0° / 360° : Rouge — #FF0000
30° : Orange — #FF8000
60° : Jaune — #FFFF00
90° : Jaune-vert (chartreuse) — #80FF00
120° : Vert — #00FF00
150° : Vert printanier — #00FF80
180° : Cyan — #00FFFF
210° : Azur — #0080FF
240° : Bleu — #0000FF
270° : Violet — #8000FF
300° : Magenta — #FF00FF
330° : Rose — #FF0080

L'angle de teinte est le même en HSL et en HSV — ces deux modèles partagent la même définition de la teinte mais diffèrent dans la façon dont ils représentent la luminosité et la saturation. Le Convertisseur de couleurs affiche les valeurs HSL et HSV pour n'importe quelle couleur, afin que vous puissiez voir exactement où se situe une teinte sur cette échelle.

Pourquoi le cercle des teintes commence-t-il au rouge

Le choix de placer le rouge à 0° en HSL et HSV est une convention, pas une loi de la nature. Il a été choisi parce que le rouge est la longueur d'onde visible la plus longue et parce qu'il se situe au début intuitif du spectre visible lorsqu'on le déroule du violet-rouge au rouge. En OKLCH, l'angle de teinte est différent — la teinte 0° en OKLCH correspond à un rose-rouge, pas à un rouge pur, car OKLCH cartographie la teinte de façon plus fidèle à la perception humaine.

Angles de teinte en CSS (0–360 degrés)

CSS prend en charge l'angle de teinte dans sa fonction hsl() depuis CSS3. La spécification moderne CSS Color Level 4 étend la prise en charge de l'angle de teinte à toutes les fonctions de couleur cylindriques : hsl(), hwb(), lch() et oklch().

Utilisation basique de HSL avec la teinte

/* Rouge pur : teinte 0 */
color: hsl(0, 100%, 50%);

/* Orange : teinte 30 */
color: hsl(30, 100%, 50%);

/* Vert pur : teinte 120 */
color: hsl(120, 100%, 50%);

/* Bleu ciel vif : teinte 200 */
color: hsl(200, 90%, 55%);

/* Violet profond : teinte 270 */
color: hsl(270, 70%, 40%);

Le CSS moderne accepte également des unités d'angle au-delà de deg :

/* Ces trois valeurs correspondent à la même teinte : 60 degrés = jaune */
color: hsl(60deg, 100%, 50%);
color: hsl(0.1667turn, 100%, 50%);   /* 60/360 = 0,1667 tours */
color: hsl(1.0472rad, 100%, 50%);    /* 60° en radians */

Les degrés restent le standard pour la lisibilité, mais l'unité turn est utile pour penser aux rotations de teinte comme des fractions du cercle.

La teinte en OKLCH

En OKLCH, l'angle de teinte va toujours de 0 à 360, mais la correspondance avec les familles de couleurs est légèrement différente de HSL, car OKLCH est conçu autour de la perception humaine plutôt que de la commodité mathématique :

Teinte OKLCH ~0–30 : Rose-rouges et rouges
Teinte OKLCH ~50–80 : Oranges et jaunes
Teinte OKLCH ~120–160 : Jaune-verts et verts
Teinte OKLCH ~180–220 : Cyans et bleu-verts
Teinte OKLCH ~250–280 : Bleus
Teinte OKLCH ~300–330 : Violets et magentas

Comme l'échelle de teinte d'OKLCH tient compte de la perception des couleurs humaine, faire tourner la teinte d'une quantité égale en OKLCH produit des pas visuellement plus réguliers que la même rotation en HSL.

Rotation et décalage de teinte

L'une des choses les plus puissantes dans le fait de représenter la teinte comme un angle est que les relations de couleurs deviennent mathématiques. Vous pouvez définir des couleurs complémentaires, des harmonies triadiques et des palettes analogues en utilisant rien de plus que l'addition et la soustraction.

Couleurs complémentaires (rotation à 180°)

Le complément de n'importe quelle teinte se trouve exactement à 180° de l'autre côté du cercle chromatique. Les paires complémentaires créent un contraste maximum et une tension visuelle — elles vibrent l'une contre l'autre lorsqu'elles sont placées à saturation et luminosité similaires.

Rouge (0°) → Cyan (180°)
Orange (30°) → Azur (210°)
Jaune (60°) → Bleu (240°)
Vert (120°) → Magenta (300°)

En CSS, vous pouvez calculer le complément dynamiquement :

:root {
  --primary-hue: 220;
  --complement-hue: calc(var(--primary-hue) + 180);

  --primary: hsl(var(--primary-hue), 80%, 55%);
  --complement: hsl(var(--complement-hue), 80%, 55%);
}

Harmonie triadique (rotation à 120°)

Les harmonies triadiques divisent le cercle chromatique en trois parties égales. À partir de n'importe quelle teinte, ajoutez 120° et 240° pour obtenir un trio triadique équilibré.

:root {
  --hue-a: 30;   /* Orange */
  --hue-b: 150;  /* Vert printanier */
  --hue-c: 270;  /* Violet */
}

Couleurs analogues (décalage de ±30°)

Les couleurs analogues sont adjacentes sur le cercle — à moins de 30° les unes des autres. Elles créent des palettes harmonieuses à faible contraste qui semblent naturelles et cohérentes. Les palettes analogues sont courantes dans la nature (pensez aux feuillages d'automne : rouges, oranges et jaunes) et dans les systèmes de design minimalistes.

:root {
  --primary-hue: 200;          /* Bleu */
  --analogous-left: 170;       /* Bleu-vert */
  --analogous-right: 230;      /* Bleu-violet */
}

Utilisez le Générateur de palettes pour explorer ces relations harmoniques à partir de n'importe quelle couleur.

Décalage de teinte dans les gammes de couleurs

Lors de la génération d'une gamme de couleurs à plusieurs niveaux du clair au foncé, des décalages de teinte purs sont parfois appliqués délibérément pour rendre la gamme plus naturelle. Dans le monde réel, les couleurs ne font pas que s'éclaircir ou s'assombrir — elles se décalent souvent légèrement en teinte en s'éclaircissant (devenant plus chaudes) ou en s'assombrissant (devenant plus froides). C'est ce qu'on appelle un arc de teinte, et c'est l'une des techniques qui distinguent les palettes réalisées à la main des palettes algorithmiquement parfaites mais visuellement plates.

Par exemple, un bleu peut se décaler légèrement vers le cyan en s'éclaircissant et vers le violet en s'assombrissant, imitant la façon dont la lumière bleue se disperse dans l'atmosphère. En OKLCH, de petits ajustements de teinte de ±5–10° tout en ajustant la luminosité peuvent produire des gammes d'aspect plus naturel.

Teinte vs couleur : pourquoi elles ne sont pas identiques

C'est une distinction qui perturbe souvent les personnes rencontrant la théorie des couleurs pour la première fois : teinte et couleur ne sont pas des synonymes, même si dans le langage courant elles sont souvent traitées comme tels.

La couleur est multidimensionnelle

Une couleur est une expérience perceptuelle complète qui inclut la teinte, la luminosité et la chroma (ou saturation). Quand vous voyez une nuance spécifique de « bleu poudré » ou de « vert forêt » ou de « rose poudreux », vous percevez une couleur complète — avec les trois dimensions contribuant à l'expérience.

La teinte n'est qu'une de ces dimensions. C'est la famille de couleur — la direction générale sur le cercle chromatique. Mais la même teinte peut produire un nombre infini de couleurs distinctes selon son degré de clarté ou d'obscurité et selon qu'elle est vive ou atténuée.

La même teinte, une infinité de couleurs

Considérons la teinte 220° (une direction bleu froid). Toutes les couleurs suivantes partagent cette teinte unique :

#EBF5FF — fond blanc à peine teinté (très clair, saturation très faible)
#90C3F7 — bleu ciel doux (clair, saturation modérée)
#3498DB — bleu moyen net (luminosité moyenne, saturation élevée)
#1A5276 — bleu marine foncé (foncé, saturation modérée)
#0A1A2A — quasi-noir avec un sous-ton bleu (très foncé, saturation très faible)

Ces cinq couleurs ont des apparences radicalement différentes mais partagent la même teinte sous-jacente. Elles font toutes partie de la famille bleu-220° — mais ce ne sont pas la même couleur.

Pourquoi cette distinction compte pour les designers

Comprendre que la teinte est un attribut de la couleur — et non la couleur elle-même — conduit à de meilleures décisions de couleur :

Cohérence tonale : deux couleurs de teintes différentes mais de luminosité et de chroma similaires paraîtront également équilibrées dans une composition.
Identité colorimétrique : le « bleu » d'une marque est défini par les trois attributs. Spécifier simplement « nous utilisons le bleu » est insuffisant — l'angle de teinte, le niveau de saturation et la luminosité définissent tous précisément la couleur de marque.
Relations de couleurs : les harmonies comme complémentaire, triadique et analogue sont des relations purement de teinte. Bien les appliquer exige toujours d'ajuster correctement la luminosité et la chroma de chaque couleur pour un équilibre visuel.
Indépendance de la teinte : la teinte peut être modifiée sans affecter la luminosité perçue (en OKLCH), ce qui signifie que vous pouvez créer des palettes analogues où chaque couleur a un poids visuel égal.

Les couleurs achromatiques n'ont pas de teinte

Les noirs purs, les blancs et les gris sont achromatiques — ils ne contiennent aucune teinte. Formellement, la teinte est indéfinie pour les couleurs achromatiques, car il n'existe pas de famille de couleur à attribuer. En HSL, les couleurs achromatiques s'expriment avec n'importe quelle valeur de teinte et une saturation de 0 % — l'angle de teinte est sans signification lorsque la saturation est nulle. En OKLCH, les couleurs achromatiques ont une chroma de 0 et la valeur de teinte est à nouveau effectivement indéfinie.

Cela signifie que le noir pur (#000000), le blanc (#FFFFFF) et le gris pur (#808080) n'ont pas de teinte. De nombreux quasi-neutres dans les systèmes de design ont une chroma extrêmement faible mais une teinte définie — suffisamment pour les faire paraître « chauds » ou « froids » sans être une couleur manifestement teintée.

Points clés à retenir

La teinte est la famille de couleur — la question « de quelle couleur est-il ? » dépouillée de la luminosité et de la vivacité. C'est l'attribut de couleur le plus fondamental, et tout le reste de la description de la couleur en est une modification.
Sur le cercle chromatique, la teinte est circulaire et s'exprime comme un angle de 0° à 360°. Le rouge est à 0°, le vert à 120°, le bleu à 240°, et le spectre complet revient continuellement au rouge.
En CSS, l'angle de teinte est utilisé dans hsl(), hwb(), lch() et oklch(). Il accepte les unités deg, turn et rad, bien que les degrés soient le standard.
Les relations de couleurs sont de l'arithmétique de teinte : les couleurs complémentaires sont à 180° d'intervalle, les ensembles triadiques à 120° d'intervalle, et les couleurs analogues se situent à moins de 30° les unes des autres.
La teinte et la couleur ne sont pas identiques. La couleur inclut ensemble la teinte, la luminosité et la chroma/saturation. Un nombre infini de couleurs distinctes peuvent partager la même teinte — de la teinte la plus pâle à la nuance la plus sombre.
Les couleurs achromatiques (noir, blanc, gris pur) n'ont pas de teinte. Les couleurs quasi-neutres à chroma extrêmement faible peuvent techniquement avoir une teinte mais elle est perceptuellement imperceptible.
Le Convertisseur de couleurs affiche l'angle de teinte (en HSL et OKLCH) pour n'importe quelle couleur hexadécimale, afin que vous puissiez voir exactement où se situe chaque couleur sur le cercle. Le Générateur de palettes vous permet d'explorer les relations harmoniques en faisant tourner la teinte par pas mathématiquement précis.