Convertisseur de couleurs – consultez 37 notations
#3B82F6 vaut rgb(59, 130, 246) et cmyk(76%, 47%, 0%, 4%). Saisissez ou collez une couleur dans le champ Convertir de, choisissez sa notation dans la liste en dessous, puis la notation voulue sous Convertir vers. Le résultat s’affiche pendant la frappe.
Comment fonctionne ce convertisseur de couleurs ?
Les logiciels n’enregistrent pas une couleur de la même façon. Figma et CSS attendent un code hexadécimal[1], la boîte de dialogue de choix des couleurs de Word et d’Excel affiche trois nombres RVB[2], l’imprimeur demande du CMJN, et une application Android garde la couleur dans un seul nombre, avec l’opacité au début[3]. Le convertisseur fait passer une couleur d’une de ces notations à une autre.
Les listes sous Convertir de et Convertir vers contiennent les mêmes 37 notations, réparties en six groupes : Les plus utilisés, CSS, Pour les développeurs, Vidéo et JPEG, Microsoft Office et CIE. Vous pouvez écrire dans l’un ou l’autre des deux champs, le convertisseur remplit le second.
Un même code peut désigner deux couleurs différentes selon la notation. C’est pourquoi le champ lit d’abord votre saisie dans la notation choisie dans sa liste. Si elle ne convient pas, le champ cherche une notation qui convient, change la liste et l’indique sur une ligne en dessous. Cela se produit après une courte pause dans la frappe, ou tout de suite quand vous collez. Collez par exemple 3900150 dans un champ réglé sur HEX : deux lignes apparaissent, « Nous avons passé la notation en Nombre décimal (ordre RVB). » et « Cette saisie peut aussi correspondre à Nombre décimal d’Office (VBA, Excel). Choisissez la bonne notation dans la liste sous le champ. » La seconde ligne donne l’autre lecture possible, et c’est vous qui choisissez la bonne dans la liste.
Vous pouvez aussi choisir une couleur sans rien taper. La pastille de couleur à côté du champ Convertir de ouvre le sélecteur de couleurs de votre système. Dans Chrome, Edge et Opera sur ordinateur s’ajoute à côté le bouton Prélever une couleur à l’écran, qui prend la couleur de n’importe quel point de l’écran, même en dehors de la fenêtre du navigateur[4]. Firefox, Safari et Chrome sur Android n’offrent pas cette fonction aux pages web, et le bouton n’y apparaît pas[4].
Tout effacer vide les deux champs, et Copier le résultat copie le contenu du champ Convertir vers dans le presse-papiers. Tout le calcul se fait dans votre navigateur, vos couleurs n’arrivent pas sur notre serveur.
Quel est le code couleur de l’or, du rouge ou du beige ?
| Couleur (nom CSS) | HEX | RVB | CMJN |
|---|---|---|---|
| noir (black) | #000000 | 0, 0, 0 | 0%, 0%, 0%, 100% |
| blanc (white) | #FFFFFF | 255, 255, 255 | 0%, 0%, 0%, 0% |
| rouge (red) | #FF0000 | 255, 0, 0 | 0%, 100%, 100%, 0% |
| vert (green) | #008000 | 0, 128, 0 | 100%, 0%, 100%, 50% |
| vert citron (lime) | #00FF00 | 0, 255, 0 | 100%, 0%, 100%, 0% |
| bleu (blue) | #0000FF | 0, 0, 255 | 100%, 100%, 0%, 0% |
| bleu marine (navy) | #000080 | 0, 0, 128 | 100%, 100%, 0%, 50% |
| jaune (yellow) | #FFFF00 | 255, 255, 0 | 0%, 0%, 100%, 0% |
| or (gold) | #FFD700 | 255, 215, 0 | 0%, 16%, 100%, 0% |
| orange | #FFA500 | 255, 165, 0 | 0%, 35%, 100%, 0% |
| marron, brun (brown) | #A52A2A | 165, 42, 42 | 0%, 75%, 75%, 35% |
| bordeaux (maroon) | #800000 | 128, 0, 0 | 0%, 100%, 100%, 50% |
| rose (pink) | #FFC0CB | 255, 192, 203 | 0%, 25%, 20%, 0% |
| pourpre (purple) | #800080 | 128, 0, 128 | 0%, 100%, 0%, 50% |
| violet | #EE82EE | 238, 130, 238 | 0%, 45%, 0%, 7% |
| magenta (fuchsia) | #FF00FF | 255, 0, 255 | 0%, 100%, 0%, 0% |
| gris (gray) | #808080 | 128, 128, 128 | 0%, 0%, 0%, 50% |
| gris clair (lightgray) | #D3D3D3 | 211, 211, 211 | 0%, 0%, 0%, 17% |
| argent (silver) | #C0C0C0 | 192, 192, 192 | 0%, 0%, 0%, 25% |
| beige | #F5F5DC | 245, 245, 220 | 0%, 0%, 10%, 4% |
| turquoise | #40E0D0 | 64, 224, 208 | 71%, 0%, 7%, 12% |
| bleu sarcelle (teal) | #008080 | 0, 128, 128 | 100%, 0%, 0%, 50% |
| olive | #808000 | 128, 128, 0 | 0%, 0%, 100%, 50% |
| cyan (aqua) | #00FFFF | 0, 255, 255 | 100%, 0%, 0%, 0% |
Quels sont les codes couleur des drapeaux français et canadien ?
Dans les deux pays, les valeurs à utiliser à l’écran et à l’impression viennent des chartes graphiques du gouvernement.
France
Les nuances du drapeau français n’ont jamais été réglementées. De 1974 à 2020, la présidence de la République a utilisé un bleu plus clair, proche de celui du drapeau européen, et depuis juillet 2020 le drapeau bleu marine est de nouveau hissé sur tous les bâtiments de la présidence[6].
Pour sa communication, l’État utilise depuis 2024 une charte graphique aux tons vifs[6]. Elle donne le bleu France #000091, soit R 0, V 0, B 145, le blanc #FFFFFF et le rouge Marianne #E1000F, soit R 225, V 0, B 15. Pour l’impression, le bleu France vaut C 100, M 90, J 20, N 7 et Pantone 072 C, et le rouge Marianne C 0, M 100, J 100, N 0 et Pantone 485 C[7]. Vous pouvez saisir ces valeurs RVB telles quelles, avec les lettres R, V et B, dans le champ Convertir de.
Canada
Au Canada, le Programme fédéral de l’image de marque fixe la couleur du symbole du drapeau dans le mot-symbole « Canada » et dans les signatures du gouvernement : le rouge du PFIM, Pantone 032, CMYK 0, 100, 100, 0 et RGB 235, 45, 55[8]. La norme écrit ces valeurs avec les sigles anglais CMYK et RGB, même dans sa version française. Dans le convertisseur, ces trois nombres RVB donnent #EB2D37.
Quelle différence entre modèle de couleur, code couleur et espace de couleur ?
Un modèle de couleur dit de quoi une couleur est faite. Un écran reproduit les couleurs par synthèse additive à partir de trois couleurs primaires, le rouge, le vert et le bleu, d’où le sigle RVB[9]. L’imprimerie décrit une couleur par les proportions de quatre encres, cyan, magenta, jaune et noir, d’où le sigle CMJN, en anglais CMYK[10]. HSL et HSB transforment les nombres RVB en teinte, saturation et luminosité, plus faciles à lire et à régler à la main[5].

Un code couleur, ou notation, est la forme sous laquelle un logiciel enregistre les nombres d’un modèle. #3B82F6, rgb(59, 130, 246) et le nombre 3900150 sont trois notations de la même couleur RVB. Le convertisseur en connaît 37, qui diffèrent par l’échelle, par l’ordre des canaux et par la possibilité de garder l’opacité.
Un espace de couleur fixe quelles couleurs on peut noter et leur aspect exact. Le Web utilise sRGB, l’espace de couleur que Hewlett-Packard et Microsoft ont proposé en 1996[11]. Les écrans à large gamme de couleurs en affichent davantage, et CSS les décrit notamment dans l’espace Display P3[5]. Lab, LCH, Oklab, OKLCH et XYZ ne dépendent d’aucun écran. Lab couvre toutes les couleurs qu’un être humain peut voir[5], donc toute couleur trouve sa place dans ces notations.
À quoi ressemble #3B82F6 dans chacune des 37 notations ?
#3B82F6, dans toutes les notations des listes, dans l’ordre des listes. Cette couleur n’a pas de nom CSS propre, la ligne Nom CSS donne donc le nom le plus proche. Le convertisseur a calculé toutes les valeurs.| Notation dans la liste | Groupe | Couleur #3B82F6 |
|---|---|---|
| HEX | Les plus utilisés | #3B82F6 |
| RVB (0–255) | Les plus utilisés | rgb(59, 130, 246) |
| HSL | Les plus utilisés | hsl(217.2, 91.2%, 59.8%) |
| HSB / HSV (TSL dans Photoshop, HSB dans Figma) | Les plus utilisés | hsv(217.2, 76%, 96.5%) |
| CMJN (sans profil de couleur) | Les plus utilisés | cmyk(76%, 47%, 0%, 4%) |
| Nom CSS | Les plus utilisés | dodgerblue |
| RVB (syntaxe avec espaces) | CSS | rgb(59 130 246) |
| RVB en pourcentage | CSS | rgb(23.1% 51% 96.5%) |
| HWB | CSS | hwb(217.2 23.1% 3.5%) |
| OKLCH | CSS | oklch(62.31% 0.18801 259.81) |
| Oklab | CSS | oklab(62.31% -0.03325 -0.18505) |
| CIE Lab (blanc D50, comme en CSS) | CSS | lab(54.62 8.76 -65.79) |
| CIE LCH (blanc D50, comme en CSS) | CSS | lch(54.62 66.37 277.59) |
| Display P3 | CSS | color(display-p3 0.3047 0.5035 0.9338) |
| Adobe RGB (1998) | CSS | color(a98-rgb 0.3427 0.5057 0.9498) |
| ProPhoto RGB | CSS | color(prophoto-rgb 0.43812 0.43688 0.8984) |
| Rec. 2020 | CSS | color(rec2020 0.44191 0.53087 0.93257) |
| sRGB linéaire | CSS | color(srgb-linear 0.04374 0.22323 0.92158) |
| RVB 0–1 (Unity, matplotlib) | Pour les développeurs | 0.2314, 0.5098, 0.9647 |
| Android, couleur en XML (opacité en premier) | Pour les développeurs | #FF3B82F6 |
| Android, entier ARGB (Java, Kotlin) | Pour les développeurs | 0xFF3B82F6 |
| Flutter, Jetpack Compose | Pour les développeurs | Color(0xFF3B82F6) |
| UIColor (UIKit) | Pour les développeurs | UIColor(red: 0.231, green: 0.51, blue: 0.965, alpha: 1) |
| SwiftUI | Pour les développeurs | Color(red: 0.231, green: 0.51, blue: 0.965) |
| Nombre décimal (ordre RVB) | Pour les développeurs | 3900150 |
| HSV d’OpenCV (teinte 0–180) | Pour les développeurs | 109, 194, 246 |
| HSV 0–1 (Python colorsys) | Pour les développeurs | 0.6034, 0.7602, 0.9647 |
| RGB565 (Arduino, écrans TFT) | Pour les développeurs | 0x3C1E |
| YCbCr (JPEG, 0–255) | Vidéo et JPEG | Y 122, Cb 198, Cr 83 |
| YCbCr BT.601 (vidéo SD, 16–235) | Vidéo et JPEG | Y 121, Cb 189, Cr 89 |
| YCbCr BT.709 (vidéo HD, 16–235) | Vidéo et JPEG | Y 122, Cb 186, Cr 92 |
| HSL d’Office (échelle 0–255) | Microsoft Office | 154, 233, 153 |
| Nombre décimal d’Office (VBA, Excel) | Microsoft Office | 16155195 |
| XYZ (blanc D65) | CIE | color(xyz-d65 0.26419 0.23548 0.90345) |
| XYZ (blanc D50) | CIE | color(xyz-d50 0.23691 0.22563 0.68038) |
| CIE xyY | CIE | x 0.18829, y 0.16782, Y 0.23548 |
| CIE Luv (blanc D65) | CIE | L 55.63, u -25.62, v -103.14 |
Que signifient HEX, RVB, HSL, HSB, CMJN et nom CSS ?
Ces notations se trouvent dans le groupe Les plus utilisés. Vous les croisez dans les logiciels de graphisme, les suites bureautiques et en CSS.
HEX
Un code hexadécimal écrit les trois nombres RVB en base 16, deux caractères par canal : rouge, vert puis bleu. Chaque paire va de 00 à FF, c’est-à-dire de 0 à 255, ce qui fait 256 fois 256 fois 256, soit 16 777 216 couleurs. Quand les deux caractères de chaque paire sont identiques, le code se raccourcit à trois caractères : #FF0 vaut #FFFF00[5].
Dans Photoshop, vous tapez un code hexadécimal dans le champ de texte # du sélecteur de couleurs Adobe[12]. Dans LibreOffice, c’est le champ Hex # de la boîte de dialogue Choisir une couleur[13], et dans GIMP 3.2 le champ Notation HTML, qui accepte aussi les noms de couleurs CSS[14]. Le convertisseur HEX en RVB détaille le calcul étape par étape.
RVB (0–255)
RVB donne trois nombres de 0 à 255 : la quantité de lumière rouge, verte et bleue d’une couleur. Trois zéros donnent le noir, trois fois 255 le blanc. Le sélecteur de couleurs Adobe a pour cela les zones de texte R, V et B[12], LibreOffice les champs Rouge, Vert et Bleu, de 0 à 255[13], et la boîte de dialogue de choix des couleurs de Word, Excel et PowerPoint les zones Rouge, Vert et Bleu de l’onglet des couleurs personnalisées[2]. Le sigle français est RVB[9], CSS garde l’anglais rgb(), et le champ du convertisseur accepte rvb(59, 130, 246) comme rgb(59, 130, 246). Le convertisseur RVB en HEX fait le chemin inverse, des nombres vers le code hexadécimal.
HSL
HSL décrit une couleur par sa teinte, sa saturation et sa luminosité, d’où le sigle français TSL[15]. La teinte est un angle sur le cercle chromatique, en degrés : 0 pour le rouge, 120 pour le vert et 240 pour le bleu, et la saturation et la luminosité sont des pourcentages[5]. À 50 % de luminosité, la couleur est la plus pure, et 0 % et 100 % donnent toujours le noir et le blanc. CSS comprend HSL, vous pouvez donc coller le résultat directement dans une feuille de style. Le convertisseur HEX en HSL explique ce qui distingue HSL de HSB et de l’échelle d’Office.
HSB / HSV (TSL dans Photoshop, HSB dans Figma)
HSB et HSV sont deux noms du même modèle, qu’Alvy Ray Smith a défini en 1978[16]. La teinte fonctionne comme en HSL, mais le troisième nombre, la luminosité B (brightness en anglais) ou la valeur V, donne la couleur pure à 100 %, alors qu’en HSL une luminosité de 100 % donne le blanc. Le rouge pur #FF0000 vaut donc hsv(0, 100%, 100%) en HSB et hsl(0, 100%, 50%) en HSL.
Le sigle TSL prête à confusion. En français, il désigne d’ordinaire HSL[15], mais le sélecteur de couleurs Adobe de Photoshop appelle TSL le modèle HSB, avec les champs T, S et L : la teinte va de 0° à 360°, la saturation et la luminosité sont en pourcentage[12]. C’est pourquoi la notation HSB / HSV du convertisseur porte l’indication « TSL dans Photoshop ». LibreOffice présente ce modèle avec les champs Teinte, Saturation et Brillance, la teinte allant de 0 à 359[13], et Figma l’appelle HSB[1]. Le convertisseur écrit le résultat sous la forme hsv(…), et dans le logiciel vous tapez seulement les trois nombres.
CMJN (sans profil de couleur)
CMJN donne les pourcentages de quatre encres d’imprimerie : cyan, magenta, jaune et noir. Dans le sélecteur de couleurs Adobe, vous saisissez ces pourcentages dans les champs C, M, J et N[12], et LibreOffice a les champs Cyan, Magenta, Jaune et Noir[13]. Le convertisseur CMJN en RVB donne d’autres exemples de calcul.
Nom CSS
Les noms de couleurs CSS, comme gold, navy ou tomato, sont en anglais, et les majuscules ne comptent pas[5]. Le champ les accepte aussi en deux mots : Royal Blue donne #4169E1. Quand une couleur n’a pas de nom propre, le champ du résultat affiche le plus proche, avec en dessous la ligne « Cette couleur n’a pas de nom CSS propre, nous affichons donc le plus proche. » Le bleu France #000091 reçoit ainsi le nom darkblue.
Quelles notations de couleur existent en CSS ?
Le groupe CSS rassemble les autres notations qu’un navigateur comprend dans une feuille de style[5].
RVB (syntaxe avec espaces)
Le CSS récent sépare les nombres par des espaces : rgb(59 130 246). L’ancienne syntaxe avec des virgules veut dire la même chose[5], et le champ accepte les deux.
RVB en pourcentage
Les canaux peuvent aussi s’écrire en pourcentage, 100 % valant 255 : rgb(100% 0% 0%) est donc le rouge pur[5].
HWB
HWB décrit une couleur par sa teinte et par la quantité de blanc et de noir qu’on y mélange. La spécification CSS le présente comme proche de HSL, mais souvent encore plus simple à manier pour un être humain. Ce modèle vient lui aussi d’Alvy Ray Smith, qui l’a décrit en 1996[5]. Le rouge pur avec 50 % de blanc s’écrit hwb(0 50% 0%), soit #FF7F80.
OKLCH
OKLCH donne la luminosité L en pourcentage, la chroma C et la teinte H en degrés. Le calcul se fait dans l’espace Oklab, que Björn Ottosson a publié en décembre 2020[5]. Ce L suit la clarté que perçoit l’œil. En HSL, le bleu pur et le jaune pur ont la même luminosité de 50 %, alors que le jaune paraît bien plus clair. En OKLCH, le bleu a 45,2 % et le jaune 96,8 %[5].
Il est donc plus simple de construire en OKLCH une palette où les couleurs de même L paraissent vraiment aussi claires les unes que les autres.
Oklab
Oklab est le même espace qu’OKLCH, mais au lieu de la chroma et de l’angle de teinte, il a deux axes : a, du vert au rouge, et b, du bleu au jaune[5]. En pratique, a et b restent compris entre −0,5 et +0,5[5].
CIE Lab (blanc D50, comme en CSS)
L’espace CIELAB, ou L*a*b* CIE 1976, est l’un des deux espaces que la CIE a définis en 1976, à partir de l’espace CIE XYZ[17]. Il décrit une couleur par la luminosité L, de 0 à 100, et par deux axes, a du vert au rouge et b du bleu au jaune. Dans le sélecteur de couleurs Adobe, la zone de texte L accepte les valeurs de 0 à 100, et les zones A et B celles de −128 à +127[12].
Les valeurs Lab dépendent toujours du blanc de référence. CSS calcule avec le blanc D50 et passe du blanc D65 de sRGB au D50 par la transformation de Bradford[5], et ce convertisseur fait de même. Un outil qui calcule Lab pour le blanc D65 donne d’autres valeurs a et b pour la même couleur, et les deux résultats sont justes.
CIE LCH (blanc D50, comme en CSS)
LCH est Lab écrit autrement : la luminosité L reste, et la chroma C et l’angle de teinte H prennent la place des axes a et b[5]. OKLCH est à Oklab ce que LCH est à Lab.
Display P3
La spécification CSS présente Display P3 comme un espace typique des écrans actuels à large gamme de couleurs[5]. En CSS, il s’écrit color(display-p3 …) avec trois nombres de 0 à 1. Dans Figma, le profil de couleur d’un fichier peut être sRGB ou Display P3[1]. Un code hexadécimal est toujours en sRGB[5], donc une couleur copiée en hexadécimal depuis un fichier Display P3 peut changer d’aspect.
Adobe RGB (1998)
En CSS, Adobe RGB (1998) s’appelle a98-rgb. Son primaire vert se trouve sur le diagramme de chromaticité en x 0,21 et y 0,71, contre x 0,3 et y 0,6 en sRGB, cet espace contient donc des verts et des cyans plus saturés[5]. Sa courbe de transfert utilise l’exposant 256/563, proche de 1/2,2 sans lui être égal[5]. Le vert pur de sRGB, #00FF00, y vaut color(a98-rgb 0.565 1 0.2344).
ProPhoto RGB
Kodak a mis au point ProPhoto RGB, et l’ISO l’a normalisé sous le nom ROMM RGB. Il utilise le blanc D50, le même que Lab en CSS, et des primaires impossibles à obtenir physiquement, et la spécification CSS indique que la photographie numérique s’en sert pour les versions d’archive des images[5]. En CSS, il s’écrit color(prophoto-rgb …). Le convertisseur donne ici cinq décimales, car avec quatre certaines couleurs 8 bits ne reviennent pas aux mêmes valeurs RVB.
Rec. 2020
Rec. 2020 est l’espace de la Recommandation UIT-R BT.2020 pour la télévision Ultra HD, 4K et 8K, et la spécification CSS rappelle que les écrans actuels n’en affichent pas toute la gamme[5]. Un vert hors de sRGB, comme color(rec2020 0 1 0), reste tel quel dans cette notation, alors que le code hexadécimal donne la couleur la plus proche, #00F272.
sRGB linéaire
Le sRGB linéaire a les mêmes primaires et le même blanc que sRGB, mais sans courbe de transfert, si bien que les nombres augmentent proportionnellement à la quantité de lumière[5]. Les couleurs sombres y reçoivent de très petits nombres, c’est pourquoi cette notation demande plus de décimales que sRGB pour éviter les bandes visibles dans les dégradés[5]. #3B82F6 y vaut color(srgb-linear 0.04374 0.22323 0.92158), alors que son rouge vaut 0,231 en sRGB.
Comment écrire une couleur dans le code d’une application ?
Le groupe Pour les développeurs rassemble les notations qu’on tape dans du code : Unity, Android, Flutter, Swift, Python, LaTeX, l’API de Discord et les écrans pour Arduino.
RVB 0–1 (Unity, matplotlib)
Unity donne les composantes d’une couleur en nombres de 0 à 1[18], tout comme matplotlib en Python[19]. En LaTeX, le paquet xcolor prend dans le modèle rgb des fractions de 0 à 1 et dans le modèle RGB des entiers de 0 à 255[20]. Pour passer d’une valeur de 0 à 255 à une fraction, divisez-la par 255 : 59 devient 0,2314.
Android, couleur en XML (opacité en premier)
Dans les fichiers de ressources Android, une couleur commence par un dièse et prend la forme #RGB, #ARGB, #RRGGBB ou #AARRGGBB[21]. L’opacité vient en premier, alors qu’en CSS un code à huit caractères se termine par l’opacité[5]. La même suite de caractères donne donc deux couleurs différentes : #803B82F6 est sous Android le #3B82F6 avec environ 50 % d’opacité, mais en CSS c’est le violet rgba(128, 59, 130, 0.96). Le champ lit un code à huit caractères selon la notation choisie dans sa liste : comme CSS sous HEX, comme Android sous « Android, couleur en XML (opacité en premier) ».
Android, entier ARGB (Java, Kotlin)
Dans le code Java et Kotlin, Android garde depuis le niveau d’API 1 les couleurs dans un seul entier de 32 bits, avec les canaux dans l’ordre A, R, G, B[3]. La documentation prend l’exemple de 0xff0000ff, un bleu opaque[3]. Avec l’octet d’opacité FF, le nombre devient négatif en Java, parce qu’un int a un signe : 0xFF3B82F6 vaut donc -12877066. Dans cette notation, le champ accepte les deux formes et lit tel quel un nombre sans octet d’opacité, comme 0x3B82F6. Sa couleur a alors une opacité de 0, comme sous Android.
Flutter, Jetpack Compose
Flutter construit une couleur à partir d’un nombre hexadécimal avec l’opacité en premier, comme Color(0xFF42A5F5), que sa documentation montre à côté de Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5)[22]. Jetpack Compose a une fonction Color qui crée une couleur à partir d’un nombre ARGB[23], donc Color(0xFF3B82F6) fonctionne tel quel dans les deux.
UIColor (UIKit)
UIColor, dans UIKit, prend le rouge, le vert, le bleu et l’alpha sous forme de fractions. Depuis iOS 10, il travaille dans l’espace sRGB étendu et ne coupe donc pas les composantes inférieures à 0 ou supérieures à 1[24]. Le champ accepte aussi les composantes écrites sous forme de division, comme on les voit souvent dans du code Swift : UIColor(red: 59/255, green: 130/255, blue: 246/255, alpha: 1) donne #3B82F6.
SwiftUI
SwiftUI crée une couleur avec Color(red:green:blue:opacity:) et appelle l’alpha opacity[25]. Le convertisseur n’ajoute opacity que si la couleur est en partie transparente.
Nombre décimal (ordre RVB)
Cette notation range les trois canaux dans un seul nombre : le rouge multiplié par 65 536, plus le vert multiplié par 256, plus le bleu. Discord l’utilise : les bots et les webhooks donnent la couleur d’un embed sous forme d’entier dans le champ color[26]. Le bleu France #000091 s’écrit 145 dans cette notation, puisqu’il n’a ni rouge ni vert.
HSV d’OpenCV (teinte 0–180)
Pour les images 8 bits, OpenCV divise la teinte par deux pour qu’elle tienne dans un octet. La teinte va donc ici de 0 à 180, la saturation et la valeur de 0 à 255[27]. Le bleu France vaut 120, 255, 145 dans OpenCV, alors que sa teinte HSB est de 240°.
HSV 0–1 (Python colorsys)
Le module colorsys de la bibliothèque standard de Python donne la teinte, la saturation et la valeur en fractions de 0 à 1[28], y compris la teinte, que les autres notations donnent en degrés. Une teinte de 0,5 correspond ici à 180°, et le bleu France s’écrit 0.6667, 1, 0.5686.
RGB565 (Arduino, écrans TFT)
RGB565 tient une couleur sur 16 bits : 5 bits de rouge, 6 de vert et 5 de bleu, le rouge occupant les bits de poids fort[29]. C’est ainsi que la bibliothèque Adafruit GFX enregistre les couleurs des écrans couleur pour Arduino, avec le blanc en 0xFFFF et le rouge en 0xF800[30]. Seize bits donnent 65 536 couleurs[30], le résultat est donc la plus proche d’entre elles : #3B82F6 devient 0x3C1E et revient en #3A82F7.
Le convertisseur arrondit chaque composante au niveau le plus proche, comme le format UNORM de Direct3D, où tous les bits à un signifient la valeur maximale[31]. La fonction color565() d’Adafruit GFX supprime les bits de poids faible[32], son résultat peut donc être plus bas d’un niveau sur une composante. Quand RGB565 (Arduino, écrans TFT) est choisi dans la liste, le champ accepte 0xF800, #F800 et un nombre décimal comme 63488.
Comment convertir du RVB en YCbCr ?
YCbCr sépare une couleur en luminance Y et en deux différences de couleur : Cb, le bleu moins la luminance, et Cr, le rouge moins la luminance[33]. C’est ainsi que les fichiers JPEG et la vidéo numérique enregistrent la couleur. Le groupe Vidéo et JPEG propose trois variantes de cette notation, qui diffèrent par le poids des canaux et la plage des nombres.
YCbCr (JPEG, 0–255)
Le format de fichier JPEG (JFIF) enregistre Y, Cb et Cr sur toute la plage de 0 à 255. Il pondère le rouge par 0,299, le vert par 0,587 et le bleu par 0,114, puis arrondit le résultat et le limite à 0–255[34]. Le blanc vaut donc Y 255, Cb 128, Cr 128 et le rouge pur Y 76, Cb 85, Cr 255, car la formule donne 255,5 pour Cr, ramené à 255.
YCbCr BT.601 (vidéo SD, 16–235)
La Recommandation UIT-R BT.601, pour la télévision en définition standard, reprend les poids du JPEG mais laisse une marge dans le signal : la luminance occupe les codes 16 à 235 et les différences de couleur 16 à 240, centrées sur 128[33]. Le noir y vaut Y 16, Cb 128, Cr 128 et le blanc Y 235, Cb 128, Cr 128.
YCbCr BT.709 (vidéo HD, 16–235)
La Recommandation UIT-R BT.709, pour la télévision HD, garde la même plage de codes mais change les poids : 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu[35]. Le rouge pur vaut donc Y 63, Cb 102, Cr 240 en BT.709 et Y 81, Cb 90, Cr 240 en BT.601, si bien qu’un lecteur qui décode une vidéo HD en BT.601 affiche des couleurs légèrement décalées.
Les codes YCbCr sur 8 bits ont moins de niveaux que le RVB, et la plage 16–235 encore moins, donc une couleur convertie aller-retour peut revenir décalée d’un ou deux niveaux sur un canal. Le champ accepte trois nombres avec leurs lettres, comme Y 81, Cb 90, Cr 240, ou les trois nombres seuls dans l’ordre Y, Cb, Cr.
Comment lire une couleur depuis Word ou Excel ?
HSL d’Office (échelle 0–255)
La boîte de dialogue de choix des couleurs de Word, Excel et PowerPoint propose dans l’onglet des couleurs personnalisées les modèles de couleurs RVB et HSL[2]. En HSL, Office compte la saturation et la luminosité jusqu’à 255 : une saturation de 255 est le maximum, et une luminosité de 255 donne le blanc[2]. Le convertisseur lit aussi la teinte sur cette échelle. Une échelle aussi grossière ne tombe pas sur chaque couleur d’écran : #3B82F6 vaut 154, 233, 153 dans Office, et ces nombres, recalculés, donnent #3C83F6.
Nombre décimal d’Office (VBA, Excel)
La fonction RGB de VBA renvoie une couleur sous la forme d’un seul nombre entier[36], et c’est avec elle qu’on règle la couleur de remplissage d’une cellule Excel par la propriété Interior.Color[37]. Dans ce nombre, le rouge occupe l’octet de poids faible, comme dans la valeur COLORREF de Windows[38] : les canaux sont donc dans l’ordre inverse de celui de la notation Nombre décimal (ordre RVB). Le bleu France vaut ainsi 9502720 dans Excel et 145 dans l’ordre RVB.
Pour connaître le remplissage de la cellule A1, lancez une macro d’une seule ligne, MsgBox Range("A1").Interior.Color. Collez le nombre de la fenêtre de message dans un champ réglé sur Nombre décimal d’Office (VBA, Excel), et le convertisseur le transforme en HEX, RVB ou CMJN.
À quoi servent les notations XYZ, xyY et Luv ?
XYZ est le système de coordonnées que la Commission internationale de l’éclairage (CIE) a défini en 1931, à partir des couleurs qui avaient servi à ses expériences sur la vision[39]. L’espace CIELAB en est dérivé[17]. Y représente la luminance, et CSS l’échelonne de façon que le blanc ait Y = 1[5].
XYZ (blanc D65)
color(xyz-d65 …) donne XYZ par rapport au blanc D65, celui de sRGB et de Display P3. CSS lit de la même façon la forme courte color(xyz …)[5]. Le blanc #FFFFFF y vaut color(xyz-d65 0.95046 1 1.08906).
XYZ (blanc D50)
color(xyz-d50 …) donne XYZ par rapport au blanc D50, à partir duquel CSS calcule Lab et LCH[5]. Le blanc y vaut color(xyz-d50 0.9643 1 0.8251), la même couleur a donc d’autres valeurs X et Z dans les deux notations XYZ.
CIE xyY
Pour représenter les couleurs sur une feuille plate, on élimine la luminosité et on ne garde que la chromaticité : les deux dimensions du diagramme de chromaticité sont le quotient de deux des composantes trichromatiques par la somme des trois[39]. La notation xyY y ajoute la luminance Y, que le convertisseur garde sur l’échelle de 0 à 1 de la notation XYZ, si bien que le blanc #FFFFFF vaut x 0.3127, y 0.329, Y 1.
CIE Luv (blanc D65)
L’espace L*u*v* CIE 1976, ou CIELUV, a été défini par la CIE en 1976 pour la caractérisation des écrans, en même temps que L*a*b* pour celle des surfaces[40]. Le convertisseur utilise le blanc D65, le même que sRGB, donc #FFFFFF vaut L 100, u 0, v 0 et le rouge pur L 53.24, u 175.01, v 37.77.
Comment écrire une couleur avec de la transparence ?
L’opacité, appelée aussi canal alpha, indique à quel point une couleur cache ce qui se trouve derrière elle : à 0 elle est entièrement transparente, à 1, soit 100 %, entièrement opaque[5]. En CSS, elle s’écrit après une barre oblique, rgb(59 130 246 / 50%), dans l’ancienne syntaxe comme quatrième nombre de rgba(59, 130, 246, 0.5), et dans un code hexadécimal comme les deux derniers caractères, par exemple #3B82F680[5]. Le RVBA, ou RGBA, n’est donc que du RVB avec ce quatrième nombre.
Les deux caractères d’opacité d’un code à huit caractères vont de 00 à FF, c’est-à-dire de 0 à 255 : 80 correspond donc à 128 sur 255, soit 50,2 %. Voilà pourquoi « RVB (syntaxe avec espaces) » affiche #3B82F680 sous la forme rgb(59 130 246 / 0.502).
Ces notations ne gardent pas l’opacité : CMJN (sans profil de couleur), Nom CSS, Nombre décimal (ordre RVB), HSV d’OpenCV (teinte 0–180), RGB565 (Arduino, écrans TFT), YCbCr (JPEG, 0–255), YCbCr BT.601 (vidéo SD, 16–235), YCbCr BT.709 (vidéo HD, 16–235), HSL d’Office (échelle 0–255), Nombre décimal d’Office (VBA, Excel), CIE xyY et CIE Luv (blanc D65). Avec elles, une ligne apparaît sous le résultat, par exemple « CMJN (sans profil de couleur) ne garde pas l’opacité, le résultat affiche donc la couleur sans transparence. »
Le mot-clé transparent désigne en CSS un noir transparent, rgb(0 0 0 / 0%)[5], et le convertisseur le lit de la même façon : transparent et rgba(0,0,0,0) donnent tous deux #00000000.
Pourquoi le CMJN du convertisseur diffère-t-il de celui du logiciel d’impression ?
Parce que le convertisseur calcule le CMJN sans profil de couleur, avec une formule que la spécification CSS qualifie de naïve. Pour firebrick, #B22222, elle donne cmyk(0%, 81%, 81%, 30%), le même résultat que celui du W3C[41]. On obtient ainsi quatre nombres pour une couleur d’écran, sans savoir comment elle sortira sur le papier.

Un imprimeur calcule le CMJN avec un profil ICC qui décrit sa presse, ses encres et son papier. Dans l’exemple de la même spécification, le résultat naïf s’écarte de l’impression de 14,3 unités DeltaE 2000, un écart que le W3C juge très visible[41]. Le bleu France montre bien cet écart : la marque de l’État lui donne le CMJN C 100, M 90, J 20, N 7[7], alors que la formule donne pour #000091 cmyk(100%, 100%, 0%, 43%).
Quand vous convertissez dans Photoshop une image RVB en mode CMJN, les couleurs qui sortent de la gamme CMJN sont corrigées, et cette gamme dépend de l’espace de travail CMJN choisi dans les paramètres de couleurs[42]. LibreOffice affiche des champs CMJN dans la boîte de dialogue Choisir une couleur, mais n’imprime qu’en RVB[13]. Préparez donc un fichier destiné à l’impression en CMJN avec le profil fourni par votre imprimeur, et gardez les visuels destinés à l’écran en RVB ou en HEX. Le convertisseur RVB en CMJN explique pas à pas comment changer le mode d’un fichier et quels profils les imprimeurs demandent.
Que devient une couleur en dehors de sRGB ?
En OKLCH, Oklab, CIE Lab (blanc D50, comme en CSS), CIE LCH (blanc D50, comme en CSS), Display P3, Adobe RGB (1998), ProPhoto RGB, Rec. 2020, sRGB linéaire, XYZ (blanc D65), XYZ (blanc D50), CIE xyY et CIE Luv (blanc D65), le convertisseur donne la couleur exacte, même quand elle sort de sRGB. Les autres notations ne couvrent que sRGB : pour elles, le convertisseur cherche la couleur la plus proche avec la méthode de CSS Color 4[5] et l’indique sous le résultat, par exemple « Cette couleur sort de l’espace sRGB, donc HEX affiche la couleur la plus proche qu’il peut contenir. »
Ces couleurs viennent par exemple de Tailwind CSS. Dans sa version 4, Tailwind a fait passer toute sa palette par défaut de RVB à OKLCH pour profiter de la gamme de couleurs plus large des écrans récents[43]. Son blue-500 y vaut oklch(62.3% 0.214 259.815)[44]. Cette couleur sort de sRGB, et la couleur sRGB la plus proche selon le convertisseur est #2B7FFF. Dans la version 3, blue-500 valait encore #3b82f6[45], la couleur des exemples du convertisseur.
Pourquoi le convertisseur ne donne-t-il pas de couleurs RAL, NCS ou Pantone ?
Parce que RAL, NCS et Pantone sont des systèmes de couleurs physiques, dont seuls les propriétaires publient les équivalents numériques. RAL vend une bibliothèque numérique avec des valeurs RVB et Lab pour plus de 2 500 couleurs[46]. Pantone donne les équivalents RVB, CMJN, HEX et Lab les plus proches de ses couleurs dans l’application Pantone Connect[47], et l’aide de Microsoft renvoie au site de Pantone pour trouver les valeurs RVB à saisir dans la boîte de dialogue de choix des couleurs d’Office[2]. NCS montre ses couleurs sur la plateforme NCS+[48], et ce système est la norme de référence pour désigner les couleurs en Suède depuis 1979[49]. Avec la version d’octobre 2023, Photoshop a perdu ses trois derniers catalogues de couleurs Pantone[12].
Pour utiliser une de ces couleurs à l’écran, reprenez les valeurs de la bibliothèque du propriétaire et saisissez-les dans le champ Convertir de. Pour une peinture murale, une façade ou des menuiseries commandées dans une teinte RAL, choisissez la couleur sur un nuancier physique. Un écran émet de la lumière alors que la peinture la réfléchit, donc la même teinte paraît différente sur un mur et sur un moniteur.
Quelles notations ce convertisseur accepte-t-il ?
| Votre saisie | Notation sous Convertir de | Résultat sous Convertir vers | Comment nous la lisons |
|---|---|---|---|
| #38F | HEX | rgb(51, 136, 255) | Un code à trois caractères s’allonge en doublant chaque caractère, comme en CSS. |
| 3B82F6 | HEX | rgb(59, 130, 246) | Le dièse n’est pas obligatoire, un code sans # copié d’une charte graphique fonctionne aussi. |
| color: #3B82F6; | HEX | rgb(59, 130, 246) | Vous pouvez coller telle quelle une ligne de feuille de style, nous ignorons le nom de la propriété et le point-virgule. |
| 16155195 | HEX | rgba(22, 21, 81, 0.58) | Le champ HEX lit huit chiffres comme un code avec opacité, et une ligne en dessous propose Nombre décimal d’Office (VBA, Excel), notation dans laquelle ce nombre d’Excel donne #3B82F6. |
| R 59 V 130 B 246 | RVB (0–255) | rgb(59, 130, 246) | Les lettres R, V et B, celles des logiciels en français, désignent le RVB. |
| 59 130 246 | RVB (0–255) | rgb(59, 130, 246) | Trois nombres sans notation se lisent en RVB, et une ligne en dessous propose aussi HSL d’Office (échelle 0–255) et HSV d’OpenCV (teinte 0–180). |
| 0,231 0,51 0,965 | RVB 0–1 (Unity, matplotlib) | rgb(59, 130, 246) | Trois fractions avec virgule décimale se lisent en RVB 0–1. |
| hsl(217, 91%, 60%) | HSL | rgb(60, 131, 246) | Des pourcentages entiers ne tombent pas sur chaque couleur d’écran, le résultat s’écarte donc d’un niveau de #3B82F6. |
| T 217 S 76 L 96 | HSB / HSV (TSL dans Photoshop, HSB dans Figma) | rgb(59, 130, 245) | Les lettres T, S et L sont celles du TSL de Photoshop, c’est-à-dire du HSB. |
| C 17 | M 38 | J 83 | N 22 | CMJN (sans profil de couleur) | rgb(165, 123, 34) | Les lettres C, M, J et N désignent les encres du CMJN, et les barres verticales séparent les nombres, comme dans certaines chartes graphiques. |
| 54,62 8,76 -65,79 | CIE Lab (blanc D50, comme en CSS) | rgb(59, 130, 246) | Un nombre négatif ne peut pas être du RVB, du HSL ou du CMJN, donc les trois nombres se lisent comme L, a et b en Lab. |
| 0xFF3B82F6 | Android, entier ARGB (Java, Kotlin) | rgb(59, 130, 246) | Le préfixe 0x suivi de huit caractères est un nombre ARGB de Java ou de Kotlin, et une ligne en dessous propose aussi HEX. |
| 0xF800 | RGB565 (Arduino, écrans TFT) | rgb(255, 0, 0) | Le préfixe 0x suivi de quatre caractères est une couleur 16 bits tirée d’un code, comme une constante de couleur pour un écran Arduino, donc le champ passe à RGB565 (Arduino, écrans TFT). |
| Y 81, Cb 90, Cr 240 | YCbCr (JPEG, 0–255) | rgb(238, 14, 14) | Les lettres Y, Cb et Cr désignent le YCbCr. Le champ choisit la variante JPEG, et une ligne en dessous propose aussi YCbCr BT.601 (vidéo SD, 16–235), où cette saisie donne #FE0000, et YCbCr BT.709 (vidéo HD, 16–235). |
| color(srgb 0.231 0.51 0.965) | HEX | rgb(59, 130, 246) | La liste n’a pas d’entrée propre pour color() avec l’espace srgb, le champ reste donc sur HEX, et la ligne en dessous indique « Nous avons lu cette saisie comme une fonction color() de CSS. » |
| rouge | HEX | Le champ reste vide. | Le champ ne connaît que les noms de couleurs CSS en anglais, et pour un mot français il répond « Nous ne reconnaissons pas cette saisie comme une couleur. Un exemple en HEX : #3B82F6. » |
Sources
- About color models — Figma (en anglais)
- Choix des couleurs dans la boîte de dialogue Couleurs — Support Microsoft
- Color (android.graphics) — Android Developers (en anglais)
- EyeDropper API — MDN Web Docs (en anglais)
- CSS Color Module Level 4, Editor’s Draft — CSS Working Group, W3C (en anglais)
- Drapeau de la France — Wikipédia
- Les couleurs, Marque de l’État — Gouvernement, info.gouv.fr
- Couleurs, Norme graphique du Programme fédéral de l’image de marque — Secrétariat du Conseil du Trésor du Canada
- Rouge-vert-bleu — Wikipédia
- Quadrichromie — Wikipédia
- sRGB — Wikipédia
- Choisir des couleurs dans Adobe Photoshop (copie d’archive du 17 octobre 2025) — Adobe
- Sélectionner une nouvelle couleur — Aide de LibreOffice
- Traduction française de GIMP 3.2.6, fichier po-libgimp/fr.po — GIMP, GNOME GitLab
- Teinte saturation lumière — Wikipédia
- Teinte Saturation Valeur — Wikipédia
- L*a*b* CIE 1976 — Wikipédia
- Color — Unity Scripting Reference (en anglais)
- Specifying colors — Matplotlib (en anglais)
- Extending LaTeX’s color facilities: the xcolor package, v3.02 — Uwe Kern, CTAN (en anglais)
- More resource types: Color — Android Developers (en anglais)
- Color class — Flutter API (en anglais)
- androidx.compose.ui.graphics, Color — Android Developers (en anglais)
- UIColor init(red:green:blue:alpha:) — Apple Developer (en anglais)
- Color init(_:red:green:blue:opacity:) — Apple Developer (en anglais)
- Message: Embed Object — Discord Developer Portal (en anglais)
- Color conversions — OpenCV (en anglais)
- colorsys: Conversions between color systems — Documentation Python (en anglais)
- Working with 16-bit RGB — Microsoft Learn (en anglais)
- Adafruit GFX Graphics Library, Coordinate System and Units — Adafruit (en anglais)
- Data Conversion Rules, Direct3D — Microsoft Learn (en anglais)
- Fichier Adafruit_SPITFT.cpp, fonction color565 — Adafruit, GitHub (en anglais)
- Recommandation UIT-R BT.601-7, points 2.5.1 à 2.5.3 — UIT
- Recommandation UIT-T T.871, JPEG File Interchange Format (JFIF), article 7 — UIT (en anglais)
- Recommandation UIT-R BT.709-6, points 3.2 à 3.4 — UIT
- RGB function — Microsoft Learn (en anglais)
- Interior.Color property (Excel) — Microsoft Learn (en anglais)
- COLORREF — Microsoft Learn (en anglais)
- CIE XYZ — Wikipédia
- L*u*v* CIE 1976 — Wikipédia
- CSS Color Module Level 5, Editor’s Draft — CSS Working Group, W3C (en anglais)
- Conversion d’une image dans un autre mode colorimétrique (copie d’archive du 29 novembre 2025) — Adobe
- Tailwind CSS v4.0 — Tailwind Labs (en anglais)
- theme.css avec la palette par défaut de Tailwind CSS 4.3.3 — Tailwind Labs, GitHub (en anglais)
- colors.js dans Tailwind CSS 3.4.17 — Tailwind Labs, GitHub (en anglais)
- RAL Digital colour library — RAL (en anglais)
- Pantone Connect — Pantone (en anglais)
- NCS Colour — NCS Colour AB (en anglais)
- Natural Color System — Wikipédia
- Couleur du Web — Wikipédia
- Noms de couleur X11 — Wikipédia
Les résultats des tableaux ont été calculés par la fonction de cet outil et vérifiés par un test automatique avant publication. Les règles, normes et chiffres sur lesquels s'appuie le texte proviennent des sources citées ci-dessus.
Dernière révision du contenu : · rédigé et vérifié par l'équipe Arteon
Questions fréquentes sur la conversion de couleurs
Pourquoi darkgray est-il plus clair que gray ?
Parce que les deux noms viennent de systèmes différents. Seize noms CSS, dont gray, viennent des 16 couleurs de la palette VGA reprises par HTML, et beaucoup d’autres de la liste du système X11[5][50]. Dans X11, gray valait 190 et darkgray 169[51], darkgray y était donc plus foncé. En CSS, gray garde la valeur 128 de HTML (#808080) et darkgray celle de X11 (#A9A9A9), ce qui rend darkgray plus clair. Le vert pose le même problème[50] : en CSS, green est le vert foncé #008000, et le vert vif #00FF00 s’appelle lime.
Comment trouver les couleurs d’une image ou d’une capture d’écran ?
Chargez-la dans l’extracteur de couleurs d’image, qui en tire jusqu’à 12 couleurs dominantes avec leurs codes HEX. Collez ensuite le code voulu dans le champ Convertir de pour le voir dans toutes les autres notations.
Comment vérifier qu’un texte dans cette couleur reste lisible ?
Le convertisseur ne mesure pas le contraste : saisissez la couleur du texte et celle du fond dans le vérificateur de contraste des couleurs. Il calcule le rapport de contraste et indique si la paire respecte les niveaux AA et AAA des WCAG 2.1.

Vous avez une question ou une suggestion ?
Si vous repérez une erreur dans un résultat ou s’il vous manque une notation de couleur, écrivez-nous.