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 écrit ce mélange à sa manière. CSS et les outils de conception utilisent les codes HEX et les valeurs RGB. HSL, HSV et HWB décrivent une couleur par sa teinte — l’angle sur le cercle chromatique — ainsi que par sa saturation et sa luminosité, ce qui est plus facile à ajuster manuellement. 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 sorte que des écarts identiques entre leurs valeurs paraissent identiques à l’œil, ce qui est utile pour créer des palettes et des dégradés. CSS moderne prend en charge ces quatre formats. Les terminaux utilisent des codes de couleur ANSI, et CSS propose aussi 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, axe du vert au rouge et axe du bleu au jaune
LCH lch(62.31, 90.07, 52.36) Luminosité, chroma et teinte CIE
OKLab oklab(69.58% 0.1482 0.1406) Luminosité et deux axes de couleur, dans un modèle plus récent que LAB
OKLCH oklch(69.58% 0.2043 43.49) Luminosité, chroma et teinte dans OKLab
XYZ xyz(46, 30.77, 3.52) Espace colorimétrique CIE 1931 sur lequel repose LAB
HCG hcg(24, 100%, 0%) Teinte, chroma et niveau de gris
Nom de couleur orangered 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
AppleScript RGB {65535, 26214, 0} Rouge, vert et bleu de 0 à 65535, comme les écrit 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 proposés ici fonctionnent de la même manière, du convertisseur de couleur général à ceux qui portent sur une seule paire, comme HEX vers RGB, RGB vers CMYK ou HEX vers 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 et le résultat apparaît au fur et à mesure de la saisie, prêt à être copié. Avec Détection automatique comme source — le réglage initial du convertisseur de couleur — l’outil détermine le format d’après l’écriture de la couleur. Le bouton d’inversion inverse 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 comme rgb(), hsl() ou oklch(), avec des virgules ou des espaces entre les valeurs, et une opacité facultative en 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%), ainsi que des teintes 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 du RGB, ou comme du HSL si les deux derniers sont des pourcentages, et quatre nombres comme du CMYK, sauf s’ils ressemblent à des valeurs RGB avec une opacité.
  • Des noms de couleur, quelle que soit la casse, avec ou sans espaces : Rebecca Purple fonctionne.
  • Des valeurs HSB écrites sous la forme hsb(), ainsi que 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 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 écrêtés dans la plage de 0 à 255. Ainsi, oklch(70% 0.3 145) devient #00c800.
  • Le résultat sous forme de nom de couleur est la couleur nommée CSS la plus proche. Il n’est donc exact que pour les couleurs qui ont un nom : #ff6600 donne orangered, qui correspond à #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 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.
  • Le CMYK est calculé à l’aide de la formule de base, sans profil colorimétrique d’imprimante. Les valeurs CMYK utilisées par un imprimeur pour une même couleur peuvent donc différer.
  • Les niveaux de gris correspondent à la moyenne des valeurs rouge, verte et bleue.

Conseils

  • Les résultats HEX, RGB, HSL, HWB, OKLab, OKLCH et les noms de couleur sont du CSS valide ; 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 court. Choisissez ANSI 256 ou ANSI 16 comme source pour les codes de terminal.
  • HSV et HSB sont deux noms pour le même modèle.