Que signifient tous ces formats de couleur ?

À l’écran, une couleur est un mélange de lumière rouge, verte et bleue, et chaque format représente ce mélange à sa manière. CSS et les outils de conception utilisent des codes HEX et des valeurs RGB. HSL, HSV et HWB décrivent une couleur par sa teinte — l’angle sur le cercle chromatique — ainsi que par sa vivacité et sa luminosité, ce qui facilite les réglages manuels. CMYK indique les quantités d’encre cyan, magenta, jaune et noire utilisées pour l’impression. LAB, LCH, OKLab et OKLCH sont conçus de façon que des écarts identiques entre leurs valeurs paraissent à peu près équivalents à l’œil. C’est utile pour créer des palettes et des dégradés, et CSS moderne prend en charge ces quatre formats. Les terminaux utilisent des codes de couleur ANSI, et CSS propose également des couleurs nommées, comme tomato.

Voici le même orange dans chaque format :

Format Exemple Signification des valeurs
HEX #ff6600 Rouge, vert et bleu, chacun représenté par deux chiffres hexadécimaux
RGB rgb(255, 102, 0) Rouge, vert et bleu, de 0 à 255
HSL hsl(24, 100%, 50%) Teinte, saturation et luminosité
HSV hsv(24, 100%, 100%) Teinte, saturation et valeur, également appelé HSB
HWB hwb(24 0% 0%) Teinte, blancheur et noirceur
CMYK cmyk(0%, 60%, 100%, 0%) Encres cyan, magenta, jaune et noire
LAB lab(62.31, 55, 71.33) Luminosité CIE, du vert au rouge et du bleu au jaune
LCH lch(62.31, 90.07, 52.36) Luminosité CIE, chroma et teinte
OKLab oklab(69.58% 0.1482 0.1406) Luminosité et deux axes de couleur, comme dans LAB
OKLCH oklch(69.58% 0.2043 43.49) Luminosité, chroma et teinte dans OKLab
XYZ xyz(46, 30.77, 3.52) L’espace colorimétrique CIE XYZ, sur lequel repose LAB
HCG hcg(24, 100%, 0%) Teinte, chroma et niveau de gris
Nom de couleur orangered La couleur nommée CSS la plus proche
ANSI 16 91 Code de terminal correspondant à l’une des 16 couleurs de base
ANSI 256 208 Code de terminal correspondant à l’une des 256 couleurs
RGB AppleScript {65535, 26214, 0} Rouge, vert et bleu de 0 à 65535, selon la représentation d’AppleScript
Niveaux de gris gray(46.7%) Luminosité de 0 % à 100 %

Description de l’outil

Cet outil convertit une couleur entre ces 17 formats et affiche un échantillon sous le résultat. Tous les convertisseurs de couleur fonctionnent de la même façon, du convertisseur de couleurs général à ceux qui convertissent une paire précise, comme HEX vers RGB, RGB vers CMYK ou HEX vers un nom de couleur : ils s’ouvrent sur les formats indiqués dans leur nom, et les menus Source et Cible permettent d’en choisir d’autres. Collez une couleur : le résultat s’affiche au fur et à mesure de la saisie, prêt à être copié. Avec Détection automatique comme source, le réglage initial du convertisseur de couleurs, l’outil détermine le format à partir de la représentation de la couleur. Le bouton d’inversion change le sens de la conversion.

Exemples

Entrée Cible Résultat
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Nom de couleur tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Ce que vous pouvez coller

  • Des codes HEX de 3, 4, 6 ou 8 chiffres, avec ou sans #. Un quatrième chiffre ou une dernière paire définit l’opacité.
  • Des fonctions telles que rgb(), hsl() ou oklch(), avec des virgules ou des espaces entre les valeurs, et une opacité facultative comme quatrième valeur ou après une barre oblique : rgba(37, 99, 235, 0.5) ou rgb(37 99 235 / 50%).
  • Des pourcentages pour le rouge, le vert et le bleu, comme dans rgb(100%, 40%, 0%), et des teintes exprimées en deg, rad, grad ou turn, comme dans hsl(0.5turn, 100%, 50%).
  • Des nombres seuls, sans nom de fonction, comme 255, 102, 0. La détection automatique interprète trois nombres comme des valeurs RGB, ou comme des valeurs HSL si les deux dernières sont des pourcentages, et quatre nombres comme des valeurs CMYK, sauf s’ils semblent correspondre à des valeurs RGB avec une opacité.
  • Des noms de couleur, quelle que soit leur casse, avec ou sans espaces : Rebecca Purple fonctionne.
  • Des valeurs HSB écrites sous la forme hsb(), et des couleurs AppleScript entre accolades, comme {65535, 26214, 0}.

Fonctionnement

Les calculs sont effectués par color-convert, une bibliothèque JavaScript de conversion des couleurs.

  • L’opacité est conservée pour les formats HEX, RGB, HSL, HWB, OKLab et OKLCH, qui peuvent la représenter. Les autres formats ne la prennent pas en compte.
  • LAB, LCH et XYZ utilisent les valeurs CIE avec le point blanc D65. Les fonctions CSS lab() et lch() utilisent le point blanc D50 ; leurs valeurs diffèrent donc légèrement.
  • LAB, LCH, OKLab et OKLCH peuvent décrire des couleurs que les écrans ne peuvent pas afficher. Lorsqu’une telle couleur est convertie en HEX, RGB ou dans un autre format destiné à l’écran, ses canaux sont limités à la plage de 0 à 255. Ainsi, oklch(70% 0.3 145) devient #00c800.
  • Le résultat sous forme de nom de couleur correspond à la couleur nommée CSS la plus proche. Il est donc exact uniquement pour les couleurs qui portent un nom : #ff6600 donne orangered, soit #ff4500.
  • Les résultats ANSI 16 et ANSI 256 sont approximatifs, car ces palettes ne comportent que 16 ou 256 couleurs. Les résultats ANSI 16 sont des codes de couleur de premier plan, de 30 à 37 et de 90 à 97 ; les codes d’arrière-plan, de 40 à 47 et de 100 à 107, sont interprétés comme les mêmes couleurs.
  • Les valeurs CMYK sont calculées à l’aide de la formule de base, sans profil colorimétrique d’imprimante. Les valeurs CMYK utilisées par un imprimeur peuvent donc différer pour une même couleur.
  • Le niveau de gris correspond à la moyenne des valeurs rouge, verte et bleue.

Conseils

  • Les résultats HEX, RGB, HSL, HWB, OKLab, OKLCH et les noms de couleur sont valides en CSS. Vous pouvez donc les coller tels quels dans une feuille de style.
  • La détection automatique interprète un nombre à trois chiffres, comme 208, comme un code HEX abrégé. Pour les codes de terminal, choisissez ANSI 256 ou ANSI 16 comme source.
  • HSV et HSB sont deux noms pour le même modèle.