IA sur votre appareil : performant et privé.

Hub Convertisseurs de Couleur

Convertissez toute couleur en douze formats, sans envoi.

  • Fonctionne sur votre appareil
  • Douze formats, dont OKLCH
  • Contraste et daltonisme
  • Feuilles de style : 200 couleurs offertes

Déposez une feuille de style ou un fichier de tokens

CSS, SCSS, SASS, LESS, JSON, SVG ou TXT — jusqu'à 10.0 MB

#FF4D4D

Nom de couleur le plus proche: tomato (Même famille, distance 6.4)

  • HEX#FF4D4D
  • RGBrgb(255 77 77)
  • HSLhsl(0 100% 65.1%)
  • HWBhwb(0 30.2% 0%)
  • HSVhsv(0 69.8% 100%)Pas du CSS
  • CMYKcmyk(0% 69.8% 69.8% 0%)Pas du CSS
  • LABlab(59.906 67.771 41.299)
  • LCHlch(59.906 79.363 31.36)
  • OKLABoklab(0.673 0.19441 0.09082)
  • OKLCHoklch(0.673 0.21457 25.04)
  • Display P3color(display-p3 0.9239 0.3574 0.3319)
  • XYZ D65color(xyz-d65 0.45232 0.27107 0.09872)

Contraste

Sur blanc3.27:1
Aa
  • AA normalÉchec
  • AA grandRéussi
  • AAA normalÉchec
  • AAA grandÉchec
Sur noir6.42:1
Aa
  • AA normalRéussi
  • AA grandRéussi
  • AAA normalÉchec
  • AAA grandRéussi
Sur votre couleur3.27:1
  • AA normalÉchec
  • AA grandRéussi
  • AAA normalÉchec
  • AAA grandÉchec

Nuance conforme la plus proche — #E22D35 atteint 4.51:1 face à votre couleur de comparaison.

Vision des couleurs

L'apparence de cette couleur pour les personnes ayant chaque type de déficience de la vision des couleurs.

  • Vision typique
  • Protanopie
  • Deutéranopie
  • Tritanopie
  • Aucune vision des couleurs
Que convertissez-vous ?
Valeur de couleur

Toute syntaxe de couleur CSS, plus cmyk() et hsv().

Modifier les canaux en

Les valeurs saisies ici restent en place, même quand la couleur n'a aucune teinte pour les afficher.

Comparer avec
Exporter
Exporter en
Couleurs récentes
Les couleurs que vous convertissez apparaîtront ici.

Comment convertir une couleur

  1. Choisir le convertisseur

    Ouvrez l’outil dont vous avez besoin (ex. RVB vers HEX).

  2. Saisir les valeurs

    Tapez des nombres ou utilisez la pipette.

  3. Obtenir le résultat

    L’aperçu et les valeurs se mettent à jour instantanément ; copiez ce dont vous avez besoin.

Chaque format de couleur, expliqué

Douze formats décrivent la même couleur de façons différentes, et chacun existe parce qu'il répond à une question que les autres traitent mal. Voici à quoi sert chacun.

HEX

Six chiffres hexadécimaux pour le rouge, le vert et le bleu, écrits #RRGGBB. C'est du RGB dans une notation plus courte, rien de plus : la conversion est donc exacte dans les deux sens. Ajoutez deux chiffres pour l'opacité : #RRGGBBAA.

RGB

Trois nombres de 0 à 255, un par canal, indiquant la quantité de lumière rouge, verte et bleue émise par un écran. C'est additif : les trois au maximum donnent du blanc. Le CSS moderne l'écrit avec des espaces, rgb(255 77 77), et l'ancienne forme à virgules fonctionne toujours partout.

HSL

La teinte comme un angle sur une roue chromatique, puis la saturation et la luminosité en pourcentage. Bien plus intuitif que RGB quand on veut une version plus claire de la même couleur, d'où son usage dans les systèmes de thèmes. Sa faiblesse : des pas égaux de luminosité ne paraissent pas égaux — un jaune à 50 % semble bien plus lumineux qu'un bleu à 50 %.

HWB

La teinte, puis la quantité de blanc et de noir qu'on y mélange. Cela correspond de près à la façon dont on décrit la peinture : c'est donc le format CSS le plus naturel pour construire des teintes et des nuances d'une même couleur. Quand blanc et noir atteignent ensemble 100 %, la teinte disparaît et il reste un gris.

HSV

Teinte, saturation et valeur. Ce n'est pas un format CSS, mais c'est celui qu'utilisent presque tous les logiciels de design et de retouche dans leur sélecteur de couleur : c'est donc le format à choisir pour retrouver une valeur lue dans un autre programme.

CMYK

Pourcentages d'encre cyan, magenta, jaune et noire, pour l'impression. C'est soustractif : l'encre absorbe la lumière au lieu de l'émettre, les nombres se comportent donc à l'inverse de RGB. La conversion ici utilise la formule standard indépendante du périphérique et n'est pas gérée en couleur — voir la section des limites.

LAB

Un espace colorimétrique conçu pour que la distance entre deux couleurs corresponde à leur différence perçue. L est la luminosité de 0 à 100, et a et b placent la couleur sur les axes vert–rouge et bleu–jaune. Il couvre toutes les couleurs visibles par l'œil, bien plus qu'un écran n'en affiche. Le lab() de CSS utilise le point blanc D50, celui que produit cet outil.

LCH

Les mêmes couleurs que LAB, écrites en luminosité, chroma et angle de teinte plutôt qu'en deux axes. La teinte étant un nombre unique, LCH est le format à utiliser pour un ensemble de couleurs ne différant que par la saturation ou que par la luminosité.

OKLAB

Un espace perceptuellement uniforme plus récent qui corrige le pire défaut de LAB : les bleus de LAB changent de teinte de façon visible quand la luminosité varie, ceux d'OKLAB non. La luminosité va de 0 à 1 plutôt que de 0 à 100.

OKLCH

OKLAB en forme polaire, et le format vers lequel migrent la plupart des systèmes de design. Éclaircissez une couleur OKLCH et elle garde sa teinte ; construisez une palette en fixant chroma et teinte et en faisant varier la luminosité, et chaque pas paraît de même taille. Il fait partie de CSS Color 4 et fonctionne dans tous les navigateurs actuels.

Display P3

Un espace colorimétrique plus large que sRGB, utilisé par les écrans Apple récents et les Android haut de gamme. Il affiche des rouges et des verts hors de portée de sRGB : une couleur P3 n'a donc souvent pas d'équivalent exact en sRGB — l'outil le signale et propose la plus proche.

XYZ

L'espace de référence par rapport auquel tous les autres sont définis. On l'écrit rarement à la main, mais c'est le terrain commun par lequel passent toutes les conversions, et il est utile pour comparer des valeurs entre outils qui ne s'accordent pas.

Pourquoi utiliser des convertisseurs de couleur ?

Harmoniser les formats, garder la cohérence entre web et print et transférer des couleurs entre applications sans erreurs manuelles.

Avantages

  • Compatibilité : adaptez le format à chaque plateforme
  • Cohérence : même teinte sur plusieurs supports
  • Flux de conception : moins de friction entre les outils
  • Plusieurs formats : RVB, HEX, HSL, CMJN
  • En direct : voyez le résultat quand vous changez les valeurs

Collection d’outils

Couvre les formats courants en web, design graphique et impression.

RVB vers HEX

Indispensable pour le CSS et le développement web.

HEX vers RVB

Traduisez les codes web en canaux numériques.

RVB vers HSL

Idéal pour les variations de thème et les réglages intuitifs.

HSL vers RVB

Passez des choix en HSL au RVB pour l’affichage.

RVB vers CMJN

Préparez les couleurs pour le média imprimé.

Pipette

Vue unique avec RVB, HEX, HSL et CMJN synchronisés.

OKLCH et la couleur moderne en CSS

Si vous n'avez jamais utilisé que HEX et HSL, OKLCH est le seul format de cette page qui vaille la peine d'être appris. Il résout un problème que rencontre tout système de design et que la plupart des gens contournent à la main.

  • Éclaircir conserve la teinte — augmentez la luminosité d'un bleu en HSL et il dérive vers le violet ; faites-le en OKLCH et il reste bleu. C'est tout l'intérêt d'un espace perceptuellement uniforme.
  • Des pas égaux paraissent égaux — une palette construite en faisant varier la luminosité OKLCH par incréments réguliers se lit comme une progression régulière. Les mêmes incréments en HSL donnent une progression tassée à une extrémité.
  • Un seul nombre pour la saturation — le chroma est une valeur unique qui signifie la même chose à toute teinte : « la même intensité dans une autre couleur » devient un changement d'un nombre plutôt qu'une approximation.
  • Il atteint des couleurs hors sRGB — OKLCH peut décrire des couleurs au-delà d'un écran standard. Cet outil vous prévient quand c'est le cas et propose la couleur la plus proche que l'écran sait afficher.

Collez n'importe quel code HEX ci-dessus et lisez la ligne OKLCH pour voir où se situent vos couleurs actuelles. Pour faire migrer toute une palette d'un coup, utilisez le mode fichier entier décrit plus bas.

Convertir une feuille de style ou un fichier de tokens entier

Convertir une couleur est la partie facile. Faire passer un projet de HEX à OKLCH, ou extraire toutes les couleurs d'un fichier de design pour les vérifier, revient à toucher des centaines de valeurs — et c'est là que tous les autres convertisseurs s'arrêtent.

  • Il réécrit, il ne régénère pas — le fichier rendu est celui que vous avez fourni, seules les valeurs de couleur ayant changé. Commentaires, espacement, minification, fins de ligne et tout ce que l'analyseur n'a pas reconnu passent octet pour octet.
  • Il lit sept types de fichier — CSS, SCSS, SASS, LESS, JSON, SVG et texte brut. En SVG et en JSON, toutes les couleurs vivent entre guillemets, et elles sont trouvées aussi.
  • Les noms de couleur sont optionnels — tan, plum, salmon et red sont des mots anglais courants. Les reconnaître est une option que vous activez, car la laisser active sur un fichier texte réécrirait la prose.
  • Il sait ce qui n'est pas une couleur — #ff00001 a trop de chiffres, tangerine n'est pas tan, et --tan-100 est un nom de variable. Aucun n'est touché.

L'offre gratuite convertit 200 couleurs à la fois, ce qui couvre la palette principale d'un système de design. Pro supprime la limite, accepte jusqu'à 25 fichiers et les renvoie dans une seule archive.

Contraste et accessibilité

Une couleur n'est utilisable que si le texte posé dessus se lit. Le panneau de contraste mesure votre couleur face au blanc, au noir et à toute seconde couleur, et compare chaque résultat aux seuils des WCAG.

  • 4,5:1 est l'exigence AA pour le texte courant, et le seuil auquel se mesurent la plupart des audits.
  • 3:1 suffit pour le grand texte — 18,66 px en gras ou 24 px normal et au-delà — ainsi que pour les composants d'interface et les graphiques.
  • 7:1 correspond au AAA pour le texte courant : une vraie amélioration de lisibilité, pas une formalité, en particulier pour la lecture longue.
  • Le contraste ne dépend que de la luminosité : changer la teinte d'une couleur qui échoue ne la sauvera pas. C'est pourquoi la correction proposée déplace la luminosité et conserve la teinte choisie.

Quand une paire échoue, l'outil cherche vers le plus clair et vers le plus foncé le plus petit changement qui passe, et vous montre le résultat au lieu de vous laisser deviner.

Ce que voit un visiteur daltonien

Environ un homme sur douze et une femme sur deux cents présentent une forme de déficience de la vision des couleurs. La bande de simulation montre votre couleur telle qu'elle apparaît avec chacun des types courants, pour vérifier que deux couleurs d'une palette restent distinguables au lieu de se confondre.

  • Protanopie et deutéranopie — les types rouge–vert, de loin les plus fréquents. Les rouges s'assombrissent et verts et rouges convergent : c'est pourquoi un indicateur rouge/vert de réussite ou d'échec est le défaut d'accessibilité classique.
  • Tritanopie — rare, elle touche l'axe bleu–jaune. Bleus et verts convergent et les jaunes peuvent paraître rosés.
  • Aucune vision des couleurs — plus rare encore, et un cas extrême utile : si un design fonctionne sur la ligne en niveaux de gris, il fonctionne pour tout le monde.

La simulation modélise l'absence complète d'un type de cône. La déficience partielle est plus fréquente et se situe entre la vue simulée et la vision typique : considérez donc comme à revoir toute paire qui survit de justesse à la simulation.

À propos des convertisseurs de couleur

Nous vous aidons à passer d’un format à l’autre rapidement. Tout est traité dans votre appareil pour préserver la confidentialité.

Outils disponibles :

  • RVB vers HEX : valeurs RVB en hexadécimal
  • HEX vers RVB : codes hex en canaux RVB
  • RVB vers HSL : RVB en teinte, saturation, luminosité
  • HSL vers RVB : HSL en RVB pour les écrans
  • RVB vers CMJN : préparation impression en CMJN
  • Pipette : choisissez une couleur et voyez tous les formats

Sélectionnez la carte qui vous convient et commencez tout de suite.

Quand les utiliser

Lors d’un changement d’outil, pour préparer le CSS, valider une charte web/print ou documenter une palette.

Cas d’usage fréquents

  • Développement web : CSS et HTML
  • Design : passer d’une application à l’autre
  • Impression : rapprocher le RVB des gabarits CMJN
  • Reprise de teinte : comparer aux références
  • Design systems : jetons et échelles cohérents
  • Moderniser une palette : Faites passer une feuille de style de HEX à OKLCH en une seule passe

À savoir

Contexte rapide sur les modèles de couleur.

Points clés

  • Le RVB est additif (écrans)
  • Le CMJN est soustractif (encre)
  • Le HEX condense la même information que le RVB
  • Le HSL facilite le réglage de teinte et saturation
  • Les conversions mathématiques sont sans perte dans le même espace
  • CSS définit 148 mots-clés de couleur, en comptant les graphies gray et grey
  • Un écran sRGB standard affiche environ 16,7 millions de couleurs ; LAB et OKLAB en décrivent bien davantage

Bonnes pratiques

Pour des résultats fiables.

Qualité

  • Vérifiez par rapport aux guides de marque
  • Testez à l’écran et, si besoin, sur épreuve d’impression
  • Gardez en tête les écarts de gamme RVB ↔ CMJN
  • Choisissez le format selon le support final
  • Contrôlez deux fois les couleurs critiques
  • Construisez vos palettes en OKLCH pour que les paliers de luminosité paraissent réguliers, puis convertissez en HEX si vous avez besoin d’une compatibilité ancienne

Quand ne pas convertir à tout prix

  • Si la cible accepte déjà votre format d’origine
  • Si une couleur sort de la gamme de sortie sans épreuve
  • Si vous avez besoin d’une validation physique et ne regardez que l’écran
  • Si la plateforme ne prend pas en charge le format visé
  • Ne convertissez pas un nom de couleur au fil du texte : laissez la détection des mots-clés désactivée pour les fichiers en texte brut

Limites

Nécessitent un appareil moderne avec JavaScript ; le rendu imprimé dépend du papier et du profil.

Propulsé par des algorithmes de traitement d'image optimisés.

Questions fréquentes

Quels outils de couleur le hub réunit-il ?

Le hub regroupe des convertisseurs dédiés RVB vers HEX, HEX vers RVB, RVB vers HSL, HSL vers RVB et RVB vers CMJN, ainsi qu’une pipette interactive. Un convertisseur rapide tout-en-un accepte aussi une entrée HEX ou rgb() et affiche tous les formats à la fois avec un aperçu en direct.

Quels formats de couleur sont pris en charge ?

Les outils couvrent les quatre formats utilisés en web, design et impression : RVB et HEX pour les écrans et le CSS, HSL pour ajuster teinte et luminosité intuitivement, et CMJN pour la sortie imprimée. Vous passez de l’un à l’autre et copiez des valeurs précises, prêtes à l’emploi.

Quelle est la différence entre RVB et HEX ?

Le RVB décrit une couleur avec trois nombres de 0 à 255 pour le rouge, le vert et le bleu, tandis que le HEX écrit ces mêmes canaux en hexadécimal, comme #FF0000 pour le rouge. Ils représentent des couleurs identiques : la conversion est sans perte, le HEX étant simplement plus compact en CSS.

Quand utiliser le HSL ou le CMJN ?

Utilisez le HSL pour ajuster une couleur intuitivement en modifiant teinte, saturation et luminosité séparément, idéal pour le thème. Utilisez le CMJN pour préparer un visuel à l’impression, car les presses mélangent des encres cyan, magenta, jaune et noir au lieu d’émettre de la lumière RVB.

Les convertisseurs de couleur sont-ils gratuits et privés ?

Oui. Tous les convertisseurs et la pipette sont gratuits, et toute la conversion s’exécute localement sur votre appareil. Les valeurs saisies ne sont jamais envoyées ni stockées : vos palettes et couleurs de projet restent totalement privées.

Le hub vérifie-t-il le contraste des couleurs pour l’accessibilité ?

Oui. Le convertisseur rapide inclut un contrôle de contraste qui teste votre couleur contre le blanc et le noir et indique si elle respecte les niveaux WCAG AA et AAA pour le texte normal et grand. Vous pouvez aussi enregistrer les couleurs récentes et exporter vos valeurs en JSON ou TXT.

Qu’est-ce qu’OKLCH et faut-il l’utiliser ?

OKLCH est un format de couleur de CSS Color 4 bâti sur un espace perceptuellement uniforme : des variations égales de ses nombres produisent des variations égales à l’œil. Éclaircissez une couleur OKLCH et la teinte reste en place, alors que le même changement en HSL peut dériver visiblement vers une autre teinte. Il est bien pris en charge par les navigateurs actuels et c’est le format vers lequel migrent la plupart des systèmes de design.

Quelle est la précision de la conversion RVB vers CMJN ?

Les valeurs CMJN utilisent la formule standard indépendante du périphérique, celle que donne tout convertisseur en ligne et qu’affiche par défaut la plupart des logiciels de création. Elle n’est pas gérée en couleur : une presse réelle exige un profil ICC et un mode de rendu, et les mêmes quatre nombres s’impriment différemment sur papier couché et non couché. Considérez-les comme un point de départ fiable et validez les couleurs critiques avec votre imprimeur.

Puis-je convertir toutes les couleurs d’une feuille de style d’un coup ?

Oui. Collez une feuille de style ou déposez un fichier .css, .scss, .sass, .less, .json, .svg ou .txt : l’outil y trouve toutes les couleurs et les réécrit dans le format choisi. Tout le reste du fichier — commentaires, espacement, structure — est recopié tel quel.

Pourquoi une couleur est-elle signalée hors gamut ?

Des formats comme OKLCH, LAB et Display P3 peuvent décrire des couleurs qu’un écran sRGB standard ne sait pas afficher. Quand vous en saisissez une, l’outil vous le dit et propose la couleur sRGB la plus proche, obtenue en réduisant la saturation tout en conservant la luminosité et la teinte demandées — la méthode que la spécification CSS définit pour ce cas précis.

4.8sur 5

sur 774 notes

Notez cet outil

Touchez une étoile — c’est rapide