Convertisseur de modèles de couleur (RGB, HSL, HSV, CMJN)

Saisissez un code couleur HEX ou choisissez-en un avec le sélecteur de couleur pour calculer instantanément ses valeurs équivalentes en RGB, HSL, HSV (TSV) et CMJN, affichées côte à côte.

En quoi les modèles de couleur diffèrent

Modèle Description Usage courant
RGB Un modèle de couleur additif qui mélange les trois couleurs primaires de la lumière (rouge, vert, bleu), chacune sur une échelle de 0 à 255. Les écrans, le développement web (CSS) et le format de base de la plupart des logiciels de retouche d'image.
HSL Représente une couleur par sa teinte, sa saturation et sa luminosité. C'est plus proche de la façon dont les humains décrivent intuitivement les couleurs. La fonction CSS `hsl()`, et l'ajustement de la teinte/saturation dans les outils de palettes de couleurs.
HSV/TSV Représente une couleur par sa teinte, sa saturation et sa valeur (luminosité). Ressemble au HSL mais définit le troisième axe différemment. Les sélecteurs de couleur d'outils de design comme Photoshop et Illustrator.
CMJN Un modèle de couleur soustractif qui superpose quatre encres : cyan, magenta, jaune et une plaque clé (noir). Le design d'impression et la publication assistée par ordinateur (PAO), où la couleur est reproduite avec de l'encre sur papier.

Ce que signifie convertir entre modèles colorimétriques

Convertir entre modèles colorimétriques consiste à exprimer une seule et même couleur sous forme de nombres dans des systèmes différents : RVB, TSL, TSV (aussi appelé TSB) et CMJN. Le RVB suit la manière dont un écran émet la lumière ; le TSL et le TSV décrivent la couleur selon des axes plus proches de la perception humaine – teinte, saturation et luminosité ou valeur ; le CMJN suit la superposition des encres d’imprimerie. La couleur est identique, mais l’axe depuis lequel on la regarde est tout autre.

Donnez à cet outil une seule couleur, sous forme de code hexadécimal ou via le sélecteur, et il la convertit d’un coup dans les quatre systèmes. Cela répond aux situations qu’une conversion isolée ne couvre pas : changer la notation employée en CSS, réconcilier la façon dont différents logiciels de création spécifient la couleur, ou vérifier des valeurs CMJN pour l’impression – autrement dit, les cas où l’on souhaite comparer plusieurs modèles côte à côte.

Comment utiliser le convertisseur

  1. Saisissez un code hexadécimal Il est accepté avec ou sans le croisillon initial, de même que la forme abrégée à trois chiffres comme #f60.
  2. Ou choisissez une couleur avec le sélecteur Ce que vous retenez se reporte automatiquement dans le champ du code hexadécimal.
  3. Vérifiez la couleur dans l’aperçu La pastille vous permet de confirmer à l’œil que la valeur saisie a bien été interprétée comme vous l’entendiez.
  4. Consultez les résultats en RVB, TSL, TSV et CMJN Les valeurs des quatre systèmes s’affichent simultanément.
  5. Utilisez les valeurs qu’il vous faut Reportez-les dans la fonction hsl() de CSS, vérifiez les valeurs CMJN pour l’impression, ou tout ce que la tâche réclame.

Astuces pour en tirer le meilleur parti

  • Le champ HEX accepte les codes avec ou sans le `#` initial, aussi bien la forme abrégée à 3 chiffres (par exemple `#f60`) que la forme complète à 6 chiffres.
  • Toute couleur choisie avec le sélecteur est automatiquement reportée dans le code HEX, ce qui permet de choisir une couleur visuellement tout en vérifiant les valeurs numériques exactes.
  • Si vous voulez définir une couleur de fond ou de texte en CSS avec la fonction `hsl()`, vous pouvez utiliser directement les valeurs HSL affichées ici au format `hsl(H, S%, L%)`.
  • Lors de la préparation de fichiers pour l'impression, gardez à l'esprit que les valeurs CMJN affichées ici sont une conversion simplifiée ; les valeurs réelles utilisées par le profil ICC d'un imprimeur peuvent différer légèrement.

Quand ce convertisseur est utile

Changer l’écriture d’une couleur en CSS

Convertissez un code hexadécimal fourni dans une maquette vers les valeurs TSL dont vous avez besoin lorsque vous voulez ajuster la teinte ou la saturation via la fonction hsl() de CSS.

Vérifier des valeurs CMJN indicatives pour l’impression

Avant de réemployer sur un imprimé une palette choisie pour le web, regarder l’équivalent en CMJN rend plus perceptible l’écart entre l’écran et le papier. Lorsque la fidélité compte, confirmez la conversion à part avec le profil ICC de l’imprimeur.

Transmettre une couleur d’un logiciel de création à un autre

Photoshop, Illustrator et leurs semblables présentent souvent leur sélecteur en TSV (TSB) ; lorsque les valeurs paraissent en désaccord avec un code de couleur web, cet outil montre la correspondance.

Affiner une palette

Décomposer une couleur en teinte, saturation et luminosité rend bien plus lisible la direction de l’ajustement – conserver la teinte et ne modifier que la clarté, par exemple. Pour bâtir des palettes détaillées, un générateur dédié mérite d’être employé en complément.

Termes des modèles colorimétriques

RVB
Modèle additif exprimant la couleur par mélange de lumière rouge, verte et bleue. Chaque composante est donnée par un nombre de 0 à 255 ; c’est la façon fondamentale de spécifier une couleur sur les écrans et en CSS.
TSL
Modèle exprimant la couleur par la teinte, la saturation et la luminosité. Face aux nombres bruts du RVB, il rend bien plus intuitif le réglage de la clarté et de la vivacité.
TSV (TSB)
Modèle exprimant la couleur par la teinte, la saturation et la valeur ou clarté. Il ressemble au TSL mais définit autrement le troisième axe, et il est largement adopté dans les sélecteurs de logiciels comme Photoshop.
CMJN
Modèle soustractif exprimant la couleur par superposition de quatre encres : cyan, magenta, jaune et la plaque clé, c’est-à-dire le noir. C’est le modèle avec lequel travaille la création destinée à l’impression.
Teinte
Le type de couleur – rouge, vert, bleu, etc. – donné comme un angle de 0 à 360 degrés. C’est l’axe commun au TSL et au TSV, qui parcourt un cercle du rouge au jaune, au vert, au bleu et au violet avant de revenir au rouge.
Saturation
Degré de vivacité d’une couleur. Près de 0 pour cent elle tend vers le gris ; près de 100 pour cent elle devient une couleur pure et éclatante.
Luminosité et valeur
La luminosité du TSL décrit la proportion de noir ou de blanc mélangée, tandis que la valeur du TSV décrit la quantité de noir mêlée à la couleur. C’est le cas d’école d’une même couleur donnant des nombres différents selon le modèle.
Plaque clé (N)
La composante d’encre noire du CMJN. Le cyan, le magenta et le jaune seuls peinent à produire un noir profond ; l’impression dépose donc de l’encre noire à part pour que le texte et les zones sombres restent nets.

Questions fréquentes

Le RGB représente une couleur en mélangeant les trois couleurs primaires de la lumière (rouge, vert, bleu), chacune sur une échelle de 0 à 255, et c'est le format de base utilisé en interne par les ordinateurs. Le HSL réexprime la même couleur avec trois axes plus proches de l'intuition humaine (teinte, saturation, luminosité), ce qui facilite des ajustements comme "un peu plus clair" ou "un peu plus vif".

HSV et HSL partagent les mêmes axes de teinte (H) et de saturation (S), mais définissent le troisième axe différemment. La luminosité du HSL décrit à quel point une couleur est mélangée vers le noir ou le blanc, tandis que la valeur du HSV décrit uniquement la quantité de noir mélangée à la couleur. Quand on veut choisir une couleur vive et presque pure, le HSV est souvent jugé plus intuitif, ce qui explique qu'il soit le modèle utilisé dans les sélecteurs de couleur d'outils comme Photoshop.

En théorie, mélanger à parts égales de l'encre cyan, magenta et jaune devrait produire du noir, mais les encres réelles ne sont jamais parfaitement pures, si bien que le mélange des trois ne donne qu'un brun terne. Pour obtenir des noirs nets et profonds (notamment pour le texte), l'industrie de l'imprimerie ajoute une encre noire dédiée, la plaque clé, notée N (ou K en anglais).

Les écrans créent la couleur par synthèse additive, en combinant de la lumière rouge, verte et bleue, si bien que le RGB, basé sur les primaires de la lumière, s'impose naturellement. L'impression, elle, fonctionne par synthèse soustractive, en superposant sur le papier des encres qui absorbent la lumière, d'où l'usage du CMJN, les primaires de l'encre plus le noir. Comme les deux procédés reposent sur des principes différents, les couleurs à l'écran et celles imprimées ne correspondent pas toujours exactement, un écart appelé différence de gamme de couleurs (gamut).
Tool-kun

Anecdote — l'histoire derrière ces modèles de couleur

L'idée de synthèse additive des couleurs derrière le RGB remonte à la théorie des couleurs du XIXe siècle, mais elle ne s'est vraiment répandue en infographie qu'à partir des années 1970. Les premiers téléviseurs et moniteurs couleur créaient la couleur en allumant des luminophores rouges, verts et bleus sur un tube cathodique, si bien que le RGB a été adopté comme le modèle numérique correspondant directement à ce matériel physique.

Le HSL et le HSV ont tous deux été conçus par des chercheurs en infographie dans les années 1970 et 1980 pour résoudre un problème d'utilisabilité précis : ajuster directement des valeurs RGB brutes n'est pas intuitif pour les humains. Le HSV est notamment connu pour avoir été formalisé dans un article de 1978 par Alvy Ray Smith, qui deviendra plus tard l'un des cofondateurs de Pixar.

Le CMJN a évolué avec l'histoire de la technologie d'impression et provient d'une technique appelée impression en quadrichromie (four-color process printing). Comme le cyan, le magenta et le jaune seuls peinent à reproduire un noir profond, une plaque clé (noir) dédiée a été ajoutée pour résoudre cette limitation propre à l'impression. Le CMJN reste aujourd'hui la norme pour l'impression offset, les imprimantes à jet d'encre et bien d'autres technologies d'impression.