Le RGB ne suffit pas : les notations de couleur HSL, CMYK et OKLCH

Dans l’article précédent, Comment les ordinateurs créent les couleurs : RGB, HEX et binaire, nous avons vu qu’une couleur n’est que trois nombres — rouge, vert, bleu, chacun de 0 à 255. Les écrans fonctionnent très bien avec ces nombres. Mais dès qu’un humain commence à travailler avec la couleur, le RGB devient vite peu pratique.

RGB est pratique, mais peu intuitif

« Un rouge légèrement plus clair. » Comment faire ça en RGB ? Il faut monter les trois canaux en même temps. « Juste baisser la saturation » — en regardant seule la valeur RGB, on ne sait pas quoi modifier. « Imprimer cette couleur exactement sur papier » — impossible avec RGB.

D’autres notations de couleur ont vu le jour pour répondre à ces problèmes.

HSL — la façon dont les humains pensent la couleur

HSL décompose une couleur en teinte · saturation · luminosité. hsl(14, 100%, 60%) correspond à #FF5733, mais chaque composante a un sens clair.

Si RGB est le langage de la machine, HSL est celui du designer. On peut travailler sur la même couleur en se demandant ce qu’on veut changer.

Hue — la teinte fait le tour en 360°

La teinte tourne comme une horloge, de 0° à 360°. 0° et 360° sont le même rouge.

Saturation — l’intensité de la couleur

À teinte égale, réduire la saturation rapproche progressivement la couleur du gris.

Lightness — la luminosité va du noir au blanc

L à 0% donne toujours du noir, à 100% toujours du blanc. 50% correspond à la luminosité « naturelle » de la couleur.

L’utilité réelle de HSL — créer des palettes

En gardant la même teinte (Hue) et en variant uniquement L, on obtient un ensemble de couleurs naturellement harmonieux. La même opération en RGB demanderait de calculer manuellement neuf cases ; en HSL, il suffit de faire varier L de 12 % à 92 % par paliers.

Ces deux palettes se génèrent en une seule déclaration CSS.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... il suffit de faire varier L par paliers de 10 */
}

C’est là que HSL brille vraiment dans la construction d’un système de design.

CMYK — le langage de l’encre

Pour mettre de la couleur sur du papier plutôt que sur un écran, il faut un système complètement différent. CMYK représente les proportions des quatre encres utilisées en imprimerie.

Pourquoi le noir s’appelle « K » et non « B » ? Pour ne pas confondre avec Blue. Le terme vient de « Key plate » — la plaque de référence en imprimerie, sur laquelle les autres encres s’alignent.

La lumière s’éclaircit en s’ajoutant ; l’encre s’assombrit

La différence fondamentale entre RGB et CMYK tient au mode de mélange.

L’encre rouge paraît rouge parce qu’elle absorbe les autres longueurs d’onde et ne renvoie que le rouge. L’encre soustrait la lumière. Plus on superpose d’encres, plus la couleur s’assombrit. En théorie, mélanger C, M et Y donne du noir, mais en pratique on obtient un brun terne — d’où l’encre noire (K) ajoutée séparément.

Où utilise-t-on le CMYK ?

Pour le design d’écran, on ne touche presque jamais au CMYK. Il n’entre en jeu que pour l’impression sur papier.

• Envoi de fichiers à un imprimeur — cartes d’affaires, affiches, livres, emballages. L’imprimeur convertit les fichiers RGB en CMYK à la réception.
• Travail en impression dans Photoshop / Illustrator — on règle le mode colorimétrique sur CMYK dès le départ.
• Guide de marque — les valeurs HEX pour l’écran et CMYK pour l’impression sont indiquées ensemble, pour que la couleur de marque soit cohérente sur les deux supports.

Pourquoi les couleurs à l’écran diffèrent de l’impression — le Gamut

L’espace colorimétrique d’un écran (gamut RGB) et celui des encres (gamut CMYK) ne se correspondent pas. Un rose fluo éclatant à l’écran ne peut pas être reproduit à l’impression — aucune encre ne peut le produire.

Les designers print choisissent donc des couleurs situées dans le gamut CMYK avant de commencer. Un design créé en RGB et imprimé tel quel donne souvent des couleurs ternes.

Comment noter les valeurs CMYK

On indique le pourcentage de chaque encre. 0 % = aucune encre, 100 % = pleine charge.

Un noir obtenu avec K 100 % seul donne un noir terne, presque gris. En imprimerie, on ajoute CMY en dessous pour obtenir un noir plus profond.

OKLCH — les coordonnées de l’œil humain

Ce modèle de couleur s’est imposé dans les années 2020. Son principe : « naturel pour l’œil humain ».

Les trois coordonnées ressemblent à celles de HSL.

• L — Lightness (luminosité, 0–1)
• C — Chroma (saturation, 0–environ 0,4)
• H — Hue (teinte, 0–360°)

Pourtant HSL a un problème caché. À L = 50% identique, la luminosité perçue varie beaucoup selon la couleur. Voyons ça en comparaison.

En une phrase : RGB et HSL sont des coordonnées machine. OKLCH est une coordonnée humaine.

L, C, H — le rôle de chaque paramètre

Voici ce qui se passe quand on ne modifie qu’une coordonnée à la fois.

Cas d’usage

• Palette à luminosité uniforme — aligner huit couleurs de catégorie sur la même luminosité perçue
• Conversion automatique mode sombre/clair — inverser simplement L pour obtenir un thème sombre naturel
• Accessibilité — prédire avec précision le contraste entre texte et arrière-plan
• Dégradés — transitions naturelles sans bande grise au milieu

OKLCH est intégré à CSS Color Level 4 et utilisable directement dans les navigateurs modernes.

.btn { background: oklch(67% 0.18 30); }       /* orange */
.btn:hover { background: oklch(60% 0.18 30); } /* L baissé de 7 → exactement cette nuance en moins */

Quoi utiliser et quand

Pour la grande majorité des travaux numériques, RGB/HEX suffit. HSL vaut la peine d’être gardé en tête pour créer des palettes, et OKLCH est un vrai atout pour le design en modes sombre et clair.

Gérer les couleurs avec fns

Une fois qu’on sait qu’une couleur est un nombre, l’étape suivante est de garder ses couleurs favorites à portée de main. fns regroupe derrière une seule touche les actions d’extraction, de sauvegarde et de rappel de couleurs.

Capturer une couleur n’importe où sur l’écran avec l’Eyedropper — ⌘+Shift+K

L’Eyedropper est un outil qui capture la couleur exacte de n’importe quel pixel à l’écran. C’est l’équivalent du sélecteur de couleur disponible dans Figma ou Photoshop, rendu accessible dans tout le système.

Appuyez sur ⌘+Shift+K depuis n’importe où, et l’Eyedropper de fns apparaît. Un pixel d’une maquette, une zone précise d’une photo, la couleur d’arrière-plan d’une autre appli — déplacez la souris et cliquez pour capturer exactement cette couleur.

• Chaque clic copie automatiquement dans le presse-papier. Aucune action « Copier » supplémentaire n’est nécessaire.
• Depuis le widget Eyedropper, vous choisissez le format — RGB, HEX, HSL, CMYK ou OKLCH — dans lequel la couleur est copiée.
• Un aperçu visuel de la couleur capturée et les couleurs système proches sont affichés en même temps.

Eyedropper → copie automatique → rappel depuis le sélecteur de presse-papier : le flux ne se coupe jamais. Pas besoin d’ouvrir séparément un outil comme le Nuancier numérique macOS, ni d’appuyer sur un raccourci de copie à chaque fois.

Le presse-papier reconnaît automatiquement les couleurs

L’historique du presse-papier de fns détecte automatiquement si le texte copié est un code couleur, quel qu’en soit le format.

Quand on rappelle une couleur depuis l’historique, difficile de se souvenir quelle couleur correspond à quel texte. fns affiche une petite puce de couleur à côté de chaque entrée pour l’identifier d’un coup d’œil.

Filtrer uniquement les couleurs

Une seule touche permet de filtrer l’historique du presse-papier pour n’afficher que les codes couleur. En plein travail de design, pour revoir les couleurs utilisées récemment, inutile de fouiller dans les textes, URLs et bouts de code.

• Dans le même sélecteur, un mot-clé de filtre comme color: n’affiche que les entrées couleur
• Recherche par nom de couleur — taper « bleu » ou « rouge » filtre sur les teintes correspondantes
• Les couleurs similaires sont regroupées visuellement

Convertir une couleur dans un autre format

Il est possible de rappeler une couleur dans une notation différente. Si vous avez copié #FF5733 depuis Figma et souhaitez le coller en CSS sous la forme rgb(...), sélectionnez l’entrée dans le sélecteur de presse-papier fns et un raccourci clavier effectue la conversion automatiquement.

Plus besoin d’ouvrir un convertisseur à chaque fois qu’on passe de Figma (HSB) à CSS (HSL/HEX/OKLCH).

Expansion de texte et raccourcis de couleurs

Enregistrez vos couleurs de marque les plus fréquentes comme abréviations texte.

Ces abréviations fonctionnent partout — dans un champ de couleur CSS, dans Figma, dans un message Slack ou dans un éditeur de code. Plus besoin de chercher et copier une couleur de la charte graphique à chaque fois.

Toutes ces minutes passées à ouvrir un convertisseur et transposer un code couleur dans un autre format, fns les récupère pour vous.

Curieux de savoir d’où viennent ces nombres au départ — les bases des trois canaux RGB, le binaire et la notation HEX ? Commencez par Comment les ordinateurs créent les couleurs : RGB, HEX et binaire.