Comment convertir un code HEX en RGB ?

Collez le code HEX dans le convertisseur et copiez la valeur RGB. À la main, découpez le code en trois paires et convertissez chacune de la base 16 en décimal : #2a9d8f devient 42, 157 et 143.

Comment convertir du RGB en HEX ?

Saisissez la valeur RGB, par exemple rgb(42, 157, 143) ou simplement 42, 157, 143, et copiez le HEX. Chaque canal devient deux chiffres hexadécimaux : 42 donne 2a, 157 donne 9d, 143 donne 8f.

Quelle est la différence entre HSL et HSV ?

Les deux utilisent un angle de teinte, mais la luminosité du HSL va du noir au blanc en passant par la couleur pure, alors que la valeur du HSV va seulement du noir à la couleur pure. CSS comprend le HSL ; le HSV (aussi appelé HSB) est utilisé par les sélecteurs de couleur des applications de design.

Qu'est-ce que l'OKLCH et pourquoi l'utiliser ?

OKLCH décrit une couleur par sa luminosité perçue, son chroma et sa teinte. Contrairement au HSL, une même luminosité paraît aussi claire pour toutes les teintes : les gammes et le contraste restent prévisibles quand vous changez de teinte. Tous les navigateurs actuels prennent en charge oklch() en CSS.

Peut-on convertir des couleurs avec transparence ?

Oui. Saisissez un HEX à 8 chiffres, rgb() avec un alpha après une barre oblique, rgba() ou hsla(), ou utilisez le curseur Alpha. Toutes les notations CSS incluent alors la valeur alpha.

La valeur CMYK est-elle fiable pour l'impression ?

C'est la conversion mathématique standard utilisée par les outils web. Le rendu imprimé réel dépend du papier, des encres et du profil colorimétrique : pour une impression où la couleur de marque est critique, validez les valeurs avec votre imprimeur ou dans une application qui gère les profils.

Combien existe-t-il de couleurs nommées en CSS ?

CSS définit 148 couleurs nommées, dont rebeccapurple et les deux orthographes grey et gray. Le convertisseur les accepte toutes et affiche le nom le plus proche de toute couleur saisie.

Convertisseur de couleurs : HEX, RGB, HSL, CMYK, OKLCH

Convertissez des couleurs entre HEX, RGB, HSL, HSV, CMYK et OKLCH. Tout s'exécute localement — rien n'est téléversé.

Entrée: HEX · RGB · HSL · HSV · CMYK · OKLCH · CSS names
Sortie: HEX · RGB · HSL · HSV · CMYK · OKLCH

Formats

#2a9d8f

Nom CSS le plus proche :

Opacité 100 %

Alpha100%

HEX#2a9d8f
HEX8#2a9d8fff
RGBrgb(42 157 143)
RGB(A)rgb(42, 157, 143)
HSLhsl(172.7 57.8% 39%)
HSV / HSBhsv(172.7, 73.2%, 61.6%)
HWBhwb(172.7 16.5% 38.4%)
CMYKcmyk(73.2%, 0%, 8.9%, 38.4%)
OKLCHoklch(63.04% 0.1013 183.03)
OKLaboklab(63.04% -0.1012 -0.0054)

Le CMYK utilise la formule standard. La couleur imprimée dépend du papier et du profil de l'imprimante.

Variations

cliquer pour utiliser

Teintes (vers le blanc)

Ombres (vers le noir)

Tons (vers le gris)

Complémentaire

#2a9d8f

#9d2a38

Analogue

#2a9d56

#2a9d8f

#2a729d

Triadique

#2a9d8f

#8f2a9d

#9d8f2a

Complémentaire adjacente

#2a9d8f

#9d2a72

#9d552a

Tétradique

#2a9d8f

#552a9d

#9d2a38

#729d2a

Convertir une couleur dans toutes les notations

Collez une couleur dans n'importe quel format et ce convertisseur l'affiche d'un coup dans tous les autres : HEX, RGB, HSL, HSV/HSB, HWB, CMYK, OKLCH, OKLab et le nom de couleur CSS le plus proche. La transparence est conservée partout, et sous les valeurs vous trouvez les teintes, ombres et tons de la couleur ainsi que ses harmonies complémentaires, analogues et triadiques, chacune à un clic de devenir la nouvelle couleur d'entrée. Tout est calculé dans votre navigateur pendant que vous tapez.

Comment convertir du HEX en RGB (ou autre chose)

Saisissez ou collez une couleur dans le champ : #2a9d8f, rgb(42 157 143), hsl(173 58% 39%), cmyk(73%, 0%, 9%, 38%), oklch(62% 0.1 183) ou un nom comme teal. Ou choisissez-la avec le sélecteur de couleur.
Toutes les notations se mettent à jour instantanément. Cliquez sur le bouton de copie à côté de celle qu'il vous faut.
Faites glisser le curseur Alpha pour rendre la couleur translucide ; le HEX à 8 chiffres et les fonctions CSS gérant l'alpha suivent.
Cliquez sur n'importe quelle nuance de teinte, d'ombre, de ton ou d'harmonie pour en faire la nouvelle couleur et continuer à explorer.

Les notations, et quand utiliser chacune

HEX: #rrggbb, ou #rrggbbaa avec alpha. La forme courte #rgb double chaque chiffre. La notation par défaut des outils de design et de CSS.
RGB: Rouge, vert et bleu de 0 à 255. Le CSS moderne écrit rgb(42 157 143 / 50%) ; l'ancienne forme rgba(42, 157, 143, 0.5) fonctionne toujours partout.
HSL: Teinte en degrés, saturation et luminosité en pourcentage. Facile à retoucher à la main, mais 50 % de luminosité n'a pas la même clarté selon la teinte : le jaune paraît bien plus clair que le bleu.
HSV / HSB: Teinte, saturation et valeur (ou brillance). Le modèle des sélecteurs de couleur de Photoshop, Figma et de la plupart des applications de design. Non valide en CSS.
HWB: Teinte, plus la quantité de blanc et de noir à mélanger. Valide en CSS depuis Color Level 4 et intuitif pour créer des variantes pastel ou atténuées.
CMYK: Pourcentages d'encre cyan, magenta, jaune et noir (CMJN) pour l'impression. Les valeurs utilisent ici la formule standard ; la couleur imprimée réelle dépend du papier et du profil colorimétrique de l'imprimante.
OKLCH: Luminosité, chroma et teinte dans un espace perceptuellement uniforme. Une même luminosité paraît aussi claire quelle que soit la teinte, ce qui en fait le meilleur choix pour construire des gammes de couleurs et des palettes accessibles. Pris en charge par tous les navigateurs actuels.
Noms CSS: Les 148 mots-clés comme tomato, rebeccapurple et slategray. Le convertisseur affiche le plus proche et indique quand la correspondance est exacte.

Convertir du HEX en RGB à la main

Une couleur HEX, ce sont trois paires de chiffres en base 16. Découpez #2a9d8f en 2a, 9d et 8f, puis convertissez chaque paire : 2a vaut 2 × 16 + 10 = 42, 9d vaut 9 × 16 + 13 = 157 et 8f vaut 8 × 16 + 15 = 143 ; la couleur est donc rgb(42, 157, 143). Dans l'autre sens, divisez chaque canal par 16 : le quotient donne le premier chiffre et le reste le second. Un HEX à 8 chiffres ajoute une quatrième paire pour l'alpha, où ff est totalement opaque et 80 vaut environ 50 %.

Les conversions entre HEX, RGB, HSL, HSV et HWB sont exactes, aux arrondis près. Le CMYK est par nature une approximation, et les couleurs OKLCH qui sortent de la gamme sRGB qu'un écran peut afficher y sont ramenées en baissant le chroma, tout en conservant la luminosité et la teinte demandées.

Quelle notation utiliser en CSS ?

Tous les navigateurs actuels comprennent HEX, rgb(), hsl(), hwb() et oklch() : le choix tient donc à ce qui est le plus simple à lire et à maintenir. Le HEX est compact et c'est ce que fournissent les designers ; il reste le choix sûr par défaut pour des valeurs ponctuelles. Le HSL est pratique pour ajuster une couleur à la main, par exemple un état de survol un peu plus clair.

Pour un design system, OKLCH s'impose de plus en plus. Sa luminosité étant perceptuelle, des couleurs de marque partageant la même valeur L paraissent réellement aussi claires, et l'on peut dériver toute une gamme en ne changeant qu'un seul nombre. Il peut aussi décrire les couleurs plus vives des écrans P3 à large gamut, ce que HEX et rgb() ne peuvent pas. Gardez en tête que HSV, HSB et CMYK ne sont pas du CSS valide : ils sont là pour faire passer des valeurs entre outils de design et d'impression.

Teintes, ombres, tons et harmonies

Une teinte mélange la couleur avec du blanc, une ombre avec du noir et un ton avec du gris. Les trois rangées s'éloignent de la couleur d'origine par pas de 10 %, ce qui vous donne des états de survol, des bordures et des fonds qui vont manifestement ensemble.

Les harmonies font tourner la teinte sur le cercle chromatique : complémentaire est la teinte opposée, analogue ses voisines à 30° de part et d'autre, triadique trois teintes espacées de 120°, complémentaire adjacente les deux teintes voisines de la complémentaire, et tétradique quatre teintes espacées de 90°. C'est un point de départ pour des accents, pas une règle : vérifiez toujours les couleurs de texte avec le vérificateur de contraste. Pour construire une palette à partir d'une photo, utilisez plutôt le générateur de palette de couleurs.

Questions fréquentes

Comment convertir un code HEX en RGB ?: Collez le code HEX dans le convertisseur et copiez la valeur RGB. À la main, découpez le code en trois paires et convertissez chacune de la base 16 en décimal : #2a9d8f devient 42, 157 et 143.
Comment convertir du RGB en HEX ?: Saisissez la valeur RGB, par exemple rgb(42, 157, 143) ou simplement 42, 157, 143, et copiez le HEX. Chaque canal devient deux chiffres hexadécimaux : 42 donne 2a, 157 donne 9d, 143 donne 8f.
Quelle est la différence entre HSL et HSV ?: Les deux utilisent un angle de teinte, mais la luminosité du HSL va du noir au blanc en passant par la couleur pure, alors que la valeur du HSV va seulement du noir à la couleur pure. CSS comprend le HSL ; le HSV (aussi appelé HSB) est utilisé par les sélecteurs de couleur des applications de design.
Qu'est-ce que l'OKLCH et pourquoi l'utiliser ?: OKLCH décrit une couleur par sa luminosité perçue, son chroma et sa teinte. Contrairement au HSL, une même luminosité paraît aussi claire pour toutes les teintes : les gammes et le contraste restent prévisibles quand vous changez de teinte. Tous les navigateurs actuels prennent en charge oklch() en CSS.
Peut-on convertir des couleurs avec transparence ?: Oui. Saisissez un HEX à 8 chiffres, rgb() avec un alpha après une barre oblique, rgba() ou hsla(), ou utilisez le curseur Alpha. Toutes les notations CSS incluent alors la valeur alpha.
La valeur CMYK est-elle fiable pour l'impression ?: C'est la conversion mathématique standard utilisée par les outils web. Le rendu imprimé réel dépend du papier, des encres et du profil colorimétrique : pour une impression où la couleur de marque est critique, validez les valeurs avec votre imprimeur ou dans une application qui gère les profils.
Combien existe-t-il de couleurs nommées en CSS ?: CSS définit 148 couleurs nommées, dont rebeccapurple et les deux orthographes grey et gray. Le convertisseur les accepte toutes et affiche le nom le plus proche de toute couleur saisie.

Outils associés

Voir tous les outils

Vérificateur de contraste WCAGVérifiez les couleurs de texte et de fond selon les niveaux WCAG AA et AAA.Générateur de palette de couleursExtrayez les couleurs dominantes d'une photo en HEX, RGB et HSL.Générateur de faviconToutes les tailles de favicon, un vrai .ico multi-tailles et un manifeste web à partir d'une seule image.Convertisseur d'imagesRéencodez, redimensionnez et vectorisez vos images avec une comparaison avant/après en direct.Convertisseur de donnéesFaites passer du texte structuré entre JSON, YAML, TOML, CSV et Markdown.Compresser et archiverAllégez n'importe quel fichier avec gzip ou Brotli, ou regroupez un dossier en ZIP.