Convertisseur de couleurs, gratuit

Cinq façons différentes de nommer le même pixel

Un convertisseur qui gère HEX, RGB, HSL, HSV et CMYK touche cinq manières assez différentes de décrire le même phénomène perceptuel. Elles ont été inventées par différentes personnes, à différentes décennies, pour différentes machines, et avec différentes priorités. Faire glisser une valeur d'une notation à une autre ressemble à de l'arithmétique triviale, et à la surface c'est généralement le cas, mais les histoires expliquent pourquoi chaque notation existe, et les mathématiques expliquent pourquoi le round-trip entre elles n'est pas toujours sans perte.

HEX, raccourci en base 16 pour les triplets sRGB

La notation hexadécimale des couleurs précède CSS de quelques années sur les stations de travail et dans les formats de fichiers graphiques, mais sa signification universelle sur le web a été clouée par la Recommandation CSS1 que le W3C a publiée le 17 décembre 1996. CSS1 était le travail de Håkon Wium Lie et Bert Bos : Lie avait proposé les Cascading Style Sheets au CERN en octobre 1994, et Bos avait rejoint le projet à l'INRIA en juillet 1995. Avant CSS, HTML 1.0 n'avait aucune notion de couleur, son ensemble initial de 18 balises était strictement structurel. Une couleur hex est un entier de trois octets (ou quatre, avec alpha) que le navigateur divise en canaux rouge, vert et bleu. La forme à 6 chiffres #RRGGBB donne à chaque canal une valeur 8 bits, 0-255, encodée en deux chiffres hex. Le raccourci à 3 chiffres #RGB est exactement équivalent à la forme à 6 chiffres avec chaque chiffre doublé, donc #F0A et #FF00AA sont la même couleur. CSS Color Module Level 4 a formellement ajouté les formes à 4 chiffres (#RGBA) et à 8 chiffres (#RRGGBBAA) avec un canal alpha, où 00 est entièrement transparent et FF entièrement opaque. Le support navigateur est arrivé dans Chrome 62, Firefox 49, Safari 10 et Edge 79, donc en 2026 il est essentiellement universel. L'hex est populaire car il est court, copiable-collable, et sans ambiguïté, background: #1e90ff survit au copier/coller entre Figma, VS Code, Slack et e-mail sans que personne ait à penser aux espaces ou aux virgules.

RGB, le principe trichromatique de Maxwell, devenu numérique

L'idée « RGB », que toute couleur vue par l'œil peut être reproduite en mélangeant des quantités contrôlées de trois lumières primaires, précède la photographie couleur. James Clerk Maxwell l'a proposée pour la première fois dans son article de 1855 « Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness », présenté à la Royal Society of Edinburgh. Six ans plus tard, le 17 mai 1861, Maxwell a démontré le principe en public : il a fait réaliser par le photographe Thomas Sutton trois plaques noir et blanc d'un ruban tartan, chacune prise à travers un filtre rouge, vert ou bleu, puis a projeté les trois plaques à travers les mêmes filtres sur un écran. Les projections superposées ont produit une image reconnaissablement colorée, la première photographie couleur au monde par synthèse additive. Le RGB additif de Maxwell est devenu la fondation de chaque écran électronique depuis. Le RGB web moderne signifie spécifiquement sRGB, l'espace de couleur « standard RGB » proposé par Hewlett-Packard et Microsoft en 1996 (auteurs Michael Stokes et Ricardo Motta de HP, Matthew Anderson et Srinivasan Chandrasekar de Microsoft) et normalisé en IEC 61966-2-1:1999. La motivation était prosaïque : le web naissant avait besoin d'un espace de couleur assez simple à supposer par défaut, assez robuste pour être acceptable sur des CRT bon marché, et assez petit pour ne pas gonfler les fichiers images. Vingt-cinq ans plus tard, c'est toujours l'espace de travail par défaut de chaque navigateur, chaque JPEG et chaque PNG qui ne porte pas de profil ICC intégré. En CSS, RGB s'écrit rgb(255, 0, 153) (syntaxe legacy à virgules) ou rgb(255 0 153) (moderne séparé par espaces, selon CSS Color Level 4).

HSL et HSV, les axes perceptuels d'Alvy Ray Smith

RGB est excellent pour le matériel (un écran a littéralement des sous-pixels rouges, verts et bleus) et inutile pour l'intuition humaine. Personne n'ajuste un design web en raisonnant qu'il veut « douze unités de vert en plus et sept de rouge en moins ». Les designers pensent en termes de teinte (quelle couleur), saturation (à quel point vif), et luminosité (à quel point brillant). La conversion a été formalisée par Alvy Ray Smith dans son article SIGGRAPH 1978 « Color Gamut Transform Pairs », publié dans le numéro d'août 1978 de Computer Graphics, pages 12-19. Smith était au New York Institute of Technology Computer Graphics Lab, ayant précédemment travaillé chez Xerox PARC. L'article notait que la transformation RGB-vers-HSV avait déjà été « utilisée avec succès depuis environ quatre ans » dans les programmes de peinture sur frame-buffer au moment de sa publication, Smith documentait une pratique existante, pas une invention partant de zéro. Il a reçu en co-récompense le SIGGRAPH Computer Graphics Achievement Award en 1990 pour, entre autres, « le modèle d'espace de couleur HSV (alias HSB) ». HSL et HSV partagent un axe de teinte (un angle, 0°-360°, autour d'une roue chromatique : 0° rouge, 120° vert, 240° bleu) et un axe de saturation (0% gris à 100% pur), mais ils diffèrent dans leur troisième axe. HSV (Hue, Saturation, Value) traite V comme le maximum des canaux RGB, le blanc pur exige V=100% ET S=0%, le rouge pur est V=100%, S=100% ; le blanc et le rouge vivent tous deux au sommet du cylindre. HSL (Hue, Saturation, Lightness) traite L comme le point médian des canaux le plus clair et le plus sombre, le blanc pur est L=100% quelle que soit S, le rouge pur est L=50%, S=100% ; le blanc vit au sommet du cylindre, les couleurs les plus vives vivent à l'équateur. HSL a été spécifiquement choisi pour CSS parce que sa symétrie autour de L=50% correspond à la façon dont les designers pensent aux teintes et aux nuances.

CMYK, le modèle soustractif de l'imprimeur

Alors que les moniteurs émettent de la lumière (additif : plus = plus brillant, les trois au maximum = blanc), l'encre absorbe la lumière (soustractif : plus = plus sombre, les trois au maximum = noir, en théorie). L'impression quadrichromique, cyan, magenta, jaune, plus une plaque noire « key », a été utilisée commercialement pour la première fois dans les années 1890 pour les illustrations couleur de journaux. La Eagle Printing Ink Company est généralement créditée du premier vrai procédé quadrichromique encre humide en 1906. Le « K » vient de « key » (la plaque qui aligne toutes les autres, traditionnellement la plaque de détail noir), pas de « black », c'est pourquoi le modèle est CMYK et non CMYB. La plaque key existe pour quatre raisons pratiques : combiner 100% C, M et Y en encre réelle donne un brun foncé boueux, pas un vrai noir, parce que les pigments réels ne sont pas parfaitement purs ; les noirs trichromes gaspillent de l'encre et ralentissent le séchage ; les noirs trichromes humides font gondoler et déchirer le papier ; et le texte et les contours fins ont besoin d'une seule plaque à haut contraste pour la netteté.

Les maths de conversion, brièvement

HEX ↔ RGB est trivial, divisez la chaîne hex en trois sous-chaînes de deux caractères et analysez chacune comme un entier base 16 avec parseInt(hex, 16) ; inversez avec n.toString(16).padStart(2, '0'). RGB → HSL est de la math max/min : chroma = max(R,G,B) − min(R,G,B) ; luminosité = (max + min) / 2 ; saturation = chroma / (1 − |2L − 1|) ; la teinte est calculée via une formule par morceaux qui prend le canal dominant et traduit sa position en un angle dans l'un des six secteurs de 60° du cercle de teintes. (Certaines implémentations utilisent atan2, mais l'article de Smith de 1978 a délibérément évité la trigonométrie pour des raisons de performance, atan2 était une instruction coûteuse sur un frame buffer des années 1970, et la formule par morceaux est restée parce qu'elle donne la même réponse plus rapidement.) HSL → RGB inverse le processus via une cartographie linéaire par morceaux avec chroma et un décalage qui traduit le triplet chroma sur le bon point de l'axe de luminosité. RGB ↔ HSV utilise le même squelette mais avec un axe vertical différent : V = M au lieu de L = (M+m)/2, et S = Δ/M au lieu du diviseur conscient de la luminosité. RGB ↔ CMYK utilise la formule simple K = 1 − max(R,G,B), puis C, M, Y comme (1 − canal − K) / (1 − K). C'est mathématiquement auto-cohérent mais ne décrit pas comment une vraie presse à imprimer reproduira la couleur, voir la mise en garde sur l'impression ci-dessous.

Le problème du round-trip

Convertissez #7A3D5C (HEX) → HSL → HEX. Vous n'obtiendrez pas nécessairement #7A3D5C en retour. Les raisons sont entièrement pédestres. Troncature entière : les canaux HEX sont des entiers 0-255 ; les conversions HSL produisent des flottants ; arrondir (1, 121.987, 47.512) à des entiers perd des informations sous-pixel que le round-trip ne peut pas récupérer. Imprécision Float64 : le seul type numérique de JavaScript est le flottant binaire double précision IEEE 754, avec une mantisse 52 bits donnant environ 15-17 chiffres décimaux significatifs, suffisant pour une conversion unique mais accumule si vous chaînez de nombreuses opérations. Cartes asymétriques : plusieurs triplets distincts (R,G,B) peuvent correspondre au même triplet (H,S,L) lorsque le chroma est zéro (tout gris a une teinte indéfinie ; les conventions choisissent H = 0 ou préservent le précédent H). Pour un outil pragmatique de navigateur, c'est très bien, l'utilisateur tape #7A3D5C, voit (322°, 32%, 36%) en HSL, et obtient #7A3D5C (ou #7A3E5D, à un près) en retour. Tant que l'échantillon affiché correspond à ce que l'œil attend, le voyage est bon. Mais cela vaut la peine d'être honnête : le round-trip sans perte n'est pas garanti.

Espaces de couleur CSS modernes au-delà de sRGB

Pendant des décennies, « couleur web » signifiait sRGB et seulement sRGB. Cette hypothèse a été brisée en 2015, lorsque Apple a livré l'iMac fin 2015 comme « le premier ordinateur grand public avec un écran à gamut large intégré » prenant en charge l'espace de couleur Display P3 d'Apple. P3 est né comme DCI-P3, défini en 2005 par la Digital Cinema Initiative pour la projection en salle. La variante Display P3 d'Apple a conservé les primaires de DCI mais a changé le point blanc en D65 (correspondant à celui de sRGB) et a adopté la courbe de reproduction tonale de sRGB pour la rendre adaptée à la visualisation desktop/mobile plutôt qu'aux salles obscurcies. Le gamut de Display P3 est environ 25% plus grand en surface que sRGB et permet aux téléphones et ordinateurs portables d'afficher des rouges et verts mesurablement plus vifs. Pour permettre à CSS de décrire des couleurs hors de sRGB, le CSS Color Module Level 4 du W3C a introduit la fonction color() avec un paramètre explicite d'espace de couleur : color(srgb 1 0.5 0.2), color(display-p3 1 0.5 0.2), color(rec2020 1 0.5 0.2). Les espaces de couleur prédéfinis incluent srgb, srgb-linear, display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, xyz, xyz-d50 et xyz-d65. Sur un écran sRGB normal, une couleur P3 hors-gamut est mappée vers l'équivalent sRGB le plus proche que l'écran peut afficher.

CSS Color Level 4 a également ajouté les fonctions de première classe lab(), lch(), oklab(), et oklch(). lab() et lch() utilisent l'espace de couleur CIE 1976 L*a*b*, normalisé par la Commission Internationale de l'Éclairage en 1976, le premier espace de couleur perceptuellement uniforme largement déployé, avec les axes a* et b* correspondant aux paires d'opposants rouge-vert et bleu-jaune qui correspondent à la façon dont le système visuel humain encode réellement la couleur. En décembre 2020, le développeur suédois Björn Ottosson a publié « A perceptual color space for image processing » sur son blog et a introduit Oklab. Ottosson avait passé des années dans l'industrie du jeu à faire des manipulations de couleurs simples et a conclu que chaque espace de couleur existant y échouait d'une certaine manière. Oklab est réglé spécifiquement pour les opérations de traitement d'image : les dégradés entre deux couleurs Oklab restent perceptuellement lisses, et les ajustements de luminosité dans Oklab ressemblent à des ajustements de luminosité pour l'œil humain. La forme cylindrique, OKLCH, est ce que la plupart des designers écrivent réellement. Oklab a été ajouté à CSS Color Level 4 un an après le billet de blog, en décembre 2021, et est maintenant l'espace d'interpolation par défaut pour les dégradés CSS dans les navigateurs qui implémentent Color Level 4. La palette de couleurs Tailwind CSS v4 est générée à partir de coordonnées OKLCH. La fonction color-mix() (CSS Color Module Level 5) a été livrée dans Safari 16.2 (décembre 2022), Chrome 111 (mars 2023) et Firefox 113 (mai 2023), la rendant disponible en baseline à travers les navigateurs depuis mai 2023.

Mini-histoire de la théorie des couleurs

Les convertisseurs de couleurs web se trouvent à la fin d'un arc de 360 ans d'essais de compréhension systématique de la couleur. Les jalons notables : Newton (1665-66) a utilisé un prisme en verre pour diviser la lumière du soleil en spectre visible et a identifié sept couleurs dans son Opticks. Goethe (1810) a publié Théorie des couleurs, un traité anti-newtonien plus intéressé par les dimensions perceptuelles et émotionnelles de la couleur que par sa physique, faux sur la science mais juste sur le fait que la perception compte. Maxwell (1855/1861) comme couvert ci-dessus. Itten (1961) a publié L'Art de la couleur au Bauhaus, codifiant la roue chromatique à 12 teintes et les sept types de contraste de couleur encore enseignés dans les écoles de design aujourd'hui. Pantone (1963) a introduit le Pantone Matching System (PMS), transformant la communication des couleurs entre designers et imprimeurs en un catalogue numéroté, un numéro Pantone signifiait exactement la même couleur chez n'importe quel imprimeur dans le monde qui s'abonnait au système. La pile de couleurs web hérite de toutes ces traditions : Newton nous donne le spectre visible, Maxwell les primaires additives, Itten le vocabulaire d'école de design des schémas complémentaires et analogues, Pantone le fait pratique qu'un numéro peut représenter une expérience perceptuelle.

Accessibilité : contraste WCAG sur quoi que vous choisissiez

Une fois que vous avez une couleur, vous devez savoir si vous pouvez mettre du texte par-dessus. Le critère de succès WCAG 2.1 1.4.3 (Contraste, Minimum) exige un rapport de contraste de 4.5:1 pour le texte normal et 3:1 pour le texte large (défini comme 18pt / 24 pixels CSS régulier, ou 14pt / 19 pixels CSS gras). Le rapport de contraste est calculé à partir de la luminance relative : (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance de la couleur la plus claire et L2 la plus sombre, et la luminance est une somme pondérée des canaux R, G, B gamma-décodés avec des poids 0.2126, 0.7152 et 0.0722 (correspondant à la sensibilité de l'œil humain à ces longueurs d'onde). WCAG 2.1 SC 1.4.6 (Amélioré) relève la barre à 7:1 normal / 4.5:1 large pour la conformité AAA. WCAG 2.1 SC 1.4.11 couvre le contraste non textuel (composants d'UI, indicateurs de focus, objets graphiques requis pour la compréhension) à 3:1. Le plus récent APCA (Advanced Perceptual Contrast Algorithm) est un remplacement en phase de recherche qui correspond mieux au contraste perçu pour le texte de corps et est évalué pour WCAG 3, il renvoie une valeur Lc directionnelle où ±60 est l'équivalent approximatif du 4.5:1 de WCAG. Vérifiez toujours les paires de couleurs par rapport à la formule de contraste réelle, pas votre œil ; les designers surestiment constamment la lisibilité des appariements à faible contraste.

L'honnête mise en garde sur l'impression : le CMYK naïf n'est pas le vrai CMYK

La simple formule K = 1 − max(R,G,B) que chaque convertisseur de navigateur utilise est mathématiquement auto-cohérente, le round-trip RGB → CMYK → RGB renvoie exactement le même RGB, modulo flottant. Mais elle ne décrit pas comment une vraie presse à imprimer reproduira cette couleur sur papier. Une vraie conversion RGB-vers-CMYK a besoin de trois choses que cet outil ne peut pas livrer : un profil ICC cible (définissant la combinaison imprimante + papier, le papier couché absorbe l'encre différemment du non couché, et les presses commerciales haut de gamme exécutent des profils différents des imprimantes jet d'encre de bureau), un intent de rendu (perceptuel, colorimétrique relatif, saturation, colorimétrique absolu, ils échangent comment les couleurs hors-gamut sont pressées), et un véritable modèle colorimétrique (CIE Lab comme couche intermédiaire indépendante du périphérique, avec des tables de recherche de profil ICC complètes de chaque côté). C'est ce que fait Adobe Photoshop derrière son menu de conversion CMYK et ce que fait le logiciel de prépresse professionnel (Esko, Heidelberg Prinect, Caldera) pour le travail de production. La formule naïve est bien pour comprendre la relation entre les modèles de couleur additif et soustractif, et utile pour l'exploration de couleur en premier passage, mais si vous envoyez des fichiers à un imprimeur commercial, faites la conversion dans Photoshop (ou l'outil préféré de votre imprimeur) avec le bon profil ICC chargé, la différence visible peut être substantielle.

Couleurs nommées et l'histoire de Rebeccapurple

CSS3 livre 147 couleurs nommées (148 si on compte l'alias aqua = cyan), héritées d'un mélange des 16 couleurs nommées originales de HTML 4 et de la liste plus longue du système X11. La couleur nommée la plus récemment ajoutée a une histoire. Le 7 juin 2014, la fille du défenseur des standards web Eric Meyer, Rebecca, est morte d'une forme agressive de cancer du cerveau le lendemain de son sixième anniversaire. La couleur préférée de Rebecca était le violet. En quelques jours, les membres du CSS Working Group, dirigés par l'éditeur Tab Atkins Jr., ont proposé d'ajouter rebeccapurple (#663399) à la spec CSS Color Level 4 comme couleur nommée, en sa mémoire. La couleur a été ajoutée en juin 2014 et a été livrée dans les navigateurs peu après. La valeur hex a été spécifiquement choisie comme la valeur qu'Eric Meyer lui-même avait utilisée sur son site web. rebeccapurple est maintenant dans la table de couleurs nommées de chaque navigateur, la seule couleur commémorative dans la spécification CSS, et un rappel que les spécifications techniques sèches du web sont écrites par des gens qui remarquent quand l'un d'eux est en deuil.

Questions fréquentes

Quel format dois-je utiliser en CSS ?

Les trois formats principaux fonctionnent en CSS moderne. HEX est le plus compact et largement utilisé, idéal pour les couleurs statiques où vous avez choisi une valeur une fois et voulez la copier partout. RGB est utile lorsque vous devez calculer des valeurs par programmation ou travailler avec des données d'image (l'API canvas parle nativement RGB). HSL est le meilleur lorsque vous voulez créer des variations de couleur de système de design, ajuster la luminosité ou la saturation tout en gardant la teinte verrouillée, c'est ainsi que la palette de couleurs de Tailwind construit ses rampes complètes. Pour les systèmes de design de 2026, OKLCH (dans CSS Color Level 4) est de plus en plus la bonne réponse pour le nouveau travail, il interpole de manière perceptuellement lisse entre deux couleurs, ce qui compte pour les dégradés et la génération de rampes lisses.

Quelle est la différence entre #FFF et #FFFFFF ?

L'hex à trois chiffres est un raccourci où chaque chiffre est doublé : #FFF = #FFFFFF, #09C = #0099CC, #F0A = #FF00AA. Les deux sont des CSS valides mais la forme à six chiffres prend en charge les 16 777 216 couleurs sRGB tandis que la forme à trois chiffres n'en prend en charge que 4 096 (chaque canal contraint à 16 valeurs distinctes). L'hex à trois chiffres est concis mais légèrement limité ; six chiffres est la palette sRGB complète. CSS Color Module Level 4 définit également les formes à quatre et huit chiffres (avec alpha), où #F008 s'étend à #FF000088 et #F00 s'étend à #FF0000.

Puis-je convertir des couleurs avec transparence (alpha) ?

Cet outil se concentre actuellement sur les couleurs opaques. Pour alpha, CSS prend en charge rgba(r, g, b, a), hsla(h, s%, l%, a) et l'hex à 8 chiffres (#RRGGBBAA) comme notations séparées ; CSS Color Level 4 vous permet également d'écrire rgb(r g b / a%) et hsl(h s% l% / a%) avec un alpha séparé par une barre oblique. La forme hex à 8 chiffres est disponible en baseline depuis approximativement 2017 (Chrome 62, Firefox 49, Safari 10).

Ma conversion CMYK correspondra-t-elle à ce qui sort de l'imprimante ?

Probablement pas exactement. Les maths simples que cet outil utilise sont colorimétriquement auto-cohérentes (RGB → CMYK → RGB renvoie le même RGB) mais ne tiennent pas compte du profil ICC de votre combinaison imprimante + papier spécifique, de l'intent de rendu (perceptuel, colorimétrique relatif, etc.) ou de la caractéristique d'engraissement de point de la presse. Pour le travail destiné à l'impression, faites la conversion CMYK finale dans Photoshop ou l'outil préféré de votre imprimeur avec le bon profil ICC chargé, la différence visible entre une conversion naïve et une consciente du profil peut être substantielle, surtout pour les rouges et bleus saturés au bord du gamut CMYK.

Qu'en est-il d'OKLCH et des espaces de couleur CSS modernes ?

Le CSS moderne prend en charge oklab(), oklch(), lab(), lch() et color(display-p3 ...) pour le travail avec gamut plus large et couleur perceptuellement uniforme. Le support navigateur pour ceux-ci est baseline depuis environ 2023 (Safari 16.4, Chrome 111, Firefox 113 pour oklch() ; color() avec espaces nommés a été livré légèrement plus tôt dans Safari). Ils ne sont pas encore montrés dans ce convertisseur, en partie parce que les maths sont plus difficiles à afficher sous forme compacte (Lab a des axes signés qui ne correspondent pas à un curseur 0-100%) et en partie parce que la plupart des flux de production actuels ciblent encore sRGB. Si vous travaillez dans un système de design moderne qui utilise OKLCH (Tailwind CSS v4, par exemple), utilisez l'outillage de ce système pour la génération de couleurs ; ce convertisseur est la bonne réponse pour le travail sRGB legacy.

Mes données sont-elles envoyées quelque part ?

Non. La conversion de couleurs est de l'arithmétique pure, il n'y a rien que le serveur puisse faire que votre navigateur ne puisse pas. Chaque conversion s'exécute localement en JavaScript. Vous pouvez vérifier dans l'onglet Réseau de DevTools pendant que vous changez la couleur : il n'y a pas de requêtes sortantes. Mettez la page hors ligne (mode avion) après son chargement et le convertisseur fonctionnera toujours.

Outils associés