Convertisseur de Code Couleur

Convertissez en masse des codes couleur entre les formats HEX, RGB, HSL. Collez plusieurs couleurs et obtenez toutes les conversions en une fois.

Fonctionnalites principales

Conversion de couleurs en lot
Prise en charge de HEX, RGB, HSL, RGBA, HSLA
Copier un résultat ou tous les résultats
Aperçu de couleur pour chaque entrée

Guide

Les couleurs dans les systèmes numériques sont représentées par des codes numériques. Différents contextes nécessitent différents formats de codes de couleur. Les développeurs web utilisent les codes hexadécimaux et les fonctions de couleur CSS. Les graphistes travaillent avec CMYK pour l'impression et RGB pour l'écran. Les designers d'interface se réfèrent à HSL pour des ajustements de couleur intuitifs. Comprendre ces formats, leurs relations et le moment d'utiliser chacun est essentiel pour quiconque travaille avec la couleur numérique. Ce guide couvre les principaux formats de codes de couleur, les mathématiques de conversion et les applications pratiques en design et développement. RGB (Rouge, Vert, Bleu) est le modèle colorimétrique fondamental pour les écrans. Chaque pixel de votre moniteur, téléphone ou tablette produit de la couleur en mélangeant des lumières rouge, verte et bleue à différentes intensités. Chaque canal varie de 0 (aucune lumière) à 255 (intensité maximale). RGB(255, 0, 0) est du rouge pur. RGB(0, 255, 0) est du vert pur. RGB(0, 0, 255) est du bleu pur. RGB(255, 255, 255) est blanc (tous les canaux au maximum). RGB(0, 0, 0) est noir (aucune lumière). RGB(128, 128, 128) est un gris moyen (parts égales de chaque canal à moitié intensité). Le modèle RGB est dit additif parce que la combinaison de toutes les couleurs à pleine intensité produit du blanc, ce qui correspond au fonctionnement physique de la lumière. Les codes de couleur hexadécimaux sont le format de couleur le plus courant sur le web. Un code hex n'est qu'une valeur RGB écrite en base 16. Le code hex #FF0000 correspond à RGB(255, 0, 0), c'est-à-dire rouge. Les deux premiers caractères (FF) représentent le canal rouge, les deux suivants (00) représentent le vert, et les deux derniers (00) représentent le bleu. FF en hexadécimal équivaut à 255 en décimal. 00 équivaut à 0. 80 équivaut à 128. Convertir entre hex et RGB est une conversion de base : divisez le code hex en trois paires et convertissez chaque paire de la base 16 vers la base 10. Les codes hex raccourcis utilisent trois caractères au lieu de six. #F00 est équivalent à #FF0000. Chaque caractère est doublé : #F00 devient #FF0000, #39F devient #3399FF, #000 devient #000000. Ce raccourci ne fonctionne que lorsque chaque paire est composée de deux caractères identiques. #3A7F2B ne peut pas être raccourci car aucune paire n'a des chiffres identiques. Utilisez le raccourci dans le code pour des raisons de concision lorsque c'est possible, mais sachez que certains outils et systèmes de design produisent toujours la forme complète à six caractères. Les codes hex à huit chiffres ajoutent un canal alpha (transparence). #FF000080 est du rouge à 50 % d'opacité. Les deux derniers chiffres (80, soit 128 en décimal, environ 50 % de 255) définissent la valeur alpha. #FF0000FF est du rouge entièrement opaque (identique à #FF0000). #FF000000 est du rouge entièrement transparent (invisible). Le code hex à huit chiffres est pris en charge par CSS moderne et tous les principaux navigateurs. Notez que certains formats (comme le développement Android) placent le canal alpha en premier (#80FF0000), vérifiez donc la convention de votre plateforme. HSL (Teinte, Saturation, Luminosité) représente la couleur d'une manière qui correspond à la façon dont les humains pensent la couleur. La teinte est l'angle de la couleur sur un cercle chromatique : 0 degré est rouge, 120 degrés est vert, 240 degrés est bleu, et 360 degrés revient au rouge. La saturation est l'intensité de la couleur, de 0 % (gris) à 100 % (pleinement vive). La luminosité est la clarté, de 0 % (noir) à 100 % (blanc), 50 % étant la couleur normale. HSL(0, 100 %, 50 %) est du rouge pur. HSL(120, 100 %, 50 %) est du vert pur. HSL(60, 100 %, 50 %) est du jaune pur, à mi-chemin entre le rouge et le vert sur le cercle chromatique. L'avantage pratique de HSL sur RGB est la manipulation intuitive de la couleur. Pour éclaircir une couleur, augmentez la valeur de luminosité. Pour la rendre plus atténuée, diminuez la saturation. Pour décaler la couleur (du rouge vers l'orange, par exemple), ajustez l'angle de teinte. En RGB, ces mêmes ajustements nécessitent de modifier simultanément plusieurs valeurs de canaux, ce qui rend le résultat plus difficile à prévoir. Les designers construisant des palettes de couleurs travaillent souvent en HSL car ils peuvent créer des variations harmonieuses en ajustant systématiquement un seul paramètre à la fois. HSV (Teinte, Saturation, Valeur) est étroitement lié à HSL mais définit la luminosité différemment. En HSV, la valeur représente la luminosité maximale de la couleur. À V=100 %, la couleur est aussi claire que possible. À V=0 %, la couleur est noire quelle que soit la teinte et la saturation. HSV est le modèle colorimétrique natif de nombreux outils de design, y compris le sélecteur de couleurs d'Adobe Photoshop. La différence entre HSL et HSV est subtile mais importante : HSL(0, 100 %, 100 %) est blanc, tandis que HSV(0, 100 %, 100 %) est du rouge pur. HSV est plus intuitif pour les peintres et designers qui pensent en termes de teinte ajoutée avec du blanc ou d'ombrage avec du noir. HSL est plus symétrique et souvent préféré en CSS. HWB (Teinte, Blancheur, Noirceur) est une fonction de couleur CSS plus récente qui offre un autre modèle intuitif. La teinte est la même que dans HSL et HSV. La blancheur définit la quantité de blanc mélangée (0 % à 100 %). La noirceur définit la quantité de noir mélangée (0 % à 100 %). HWB(0, 0 %, 0 %) est du rouge pur. HWB(0, 100 %, 0 %) est blanc. HWB(0, 0 %, 100 %) est noir. HWB(0, 50 %, 0 %) est un rose clair (rouge mélangé avec 50 % de blanc). De nombreux designers trouvent HWB le modèle le plus intuitif car il reflète le concept physique de mélange de peinture avec du blanc ou du noir. CSS prend en charge hwb() dans tous les navigateurs modernes. CMYK (Cyan, Magenta, Jaune, Key/Noir) est le modèle colorimétrique utilisé en impression. Alors que les écrans ajoutent de la lumière (mélange additif des couleurs), les imprimantes déposent de l'encre qui absorbe la lumière (mélange soustractif des couleurs). L'encre cyan absorbe la lumière rouge. Le magenta absorbe le vert. Le jaune absorbe le bleu. Le canal clé (noir) existe parce que le mélange des encres CMY produit théoriquement du noir mais pratiquement un brun foncé boueux. L'ajout d'une encre noire dédiée produit des noirs plus propres et économise l'encre colorée. Les valeurs CMYK vont de 0 % à 100 % pour chaque canal. La conversion entre RGB et CMYK n'est pas une simple formule mathématique. La conversion théorique (C = 1 - R/255, M = 1 - G/255, Y = 1 - B/255, puis extraction de K comme minimum de C, M, Y) donne un point de départ, mais les couleurs d'impression réelles dépendent de l'encre, du papier, de la presse et du profil colorimétrique ICC. Les flux de production professionnels utilisent des systèmes de gestion des couleurs avec des profils calibrés pour assurer une reproduction fidèle. Le convertisseur WebRecast effectue la conversion mathématique, qui convient aux approximations, références rapides et travaux de couleur non critiques. Pour les travaux d'impression en production, utilisez toujours un flux de travail géré en couleur avec des profils calibrés. Les fonctions de couleur CSS se sont considérablement développées ces dernières années. Les formats traditionnels sont hex (#FF0000), rgb(255, 0, 0) et hsl(0, 100 %, 50 %). CSS moderne prend également en charge la fonction hwb() (Teinte, Blancheur, Noirceur), la fonction lab() (espace colorimétrique CIE LAB pour des couleurs perceptive uniformes), la fonction lch() (CIE LCH, la forme cylindrique de LAB) et la fonction oklch() (une version corrigée de LCH qui produit des résultats plus prévisibles). Ces nouveaux espaces colorimétriques corrigent les limitations de RGB et HSL, notamment en matière d'uniformité perceptive, où deux couleurs avec la même luminosité HSL peuvent paraître assez différentes en clarté à l'œil humain. OKLCH mérite une attention particulière car il devient rapidement l'espace colorimétrique recommandé pour le design web. OKLCH signifie OK Lightness Chroma Hue et produit des résultats perceptive uniformes. Cela signifie qu'une luminosité de 70 % paraît également claire pour toutes les teintes, contrairement à HSL où le jaune à 50 % de luminosité paraît beaucoup plus clair que le bleu à 50 % de luminosité. Pour créer des palettes de couleurs accessibles, générer des états de survol de boutons cohérents et construire des systèmes de jetons de design, OKLCH produit de meilleurs résultats que HSL. La syntaxe est oklch(70 % 0,15 250) où 70 % est la luminosité, 0,15 est le chroma (intensité de couleur) et 250 est l'angle de teinte. Les couleurs nommées CSS incluent 148 noms prédéfinis comme red, blue, coral, darkslategray et papayawhip. Ces noms correspondent à des valeurs hex spécifiques (coral est #FF7F50, papayawhip est #FFEFD5). Les couleurs nommées sont pratiques pour le prototypage et lisibles dans le code, mais elles vous limitent à une palette fixe. La plupart des feuilles de style CSS de production utilisent des codes hex ou des fonctions HSL pour un contrôle précis. Les noms de couleurs ont des origines historiques : certains proviennent des couleurs du système de fenêtres X11 des années 1980, ce qui explique des bizarreries comme darkgray étant plus clair que gray. La transparence alpha (opacité) est disponible dans tous les formats de couleur CSS modernes. rgba(255, 0, 0, 0,5) est du rouge à 50 % d'opacité. hsla(0, 100 %, 50 %, 0,5) est la même couleur. En CSS moderne (niveau 4), vous pouvez également écrire rgb(255 0 0 / 50 %) en utilisant la syntaxe séparée par des espaces avec une barre oblique avant la valeur alpha. Le canal alpha varie de 0 (entièrement transparent) à 1 (entièrement opaque) dans les fonctions CSS, ou de 0 à 255 en hex à 8 chiffres. La différence entre la transparence alpha d'une couleur et la propriété CSS opacity est importante : opacity affecte tout l'élément et ses enfants, tandis que l'alpha de couleur n'affecte que cette valeur de couleur spécifique. Le contraste des couleurs est une considération essentielle pour l'accessibilité. Les Web Content Accessibility Guidelines (WCAG) exigent des ratios de contraste minimaux entre les couleurs du texte et de l'arrière-plan. Le niveau AA exige 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le texte de grande taille. Le ratio de contraste est calculé à partir de la luminance relative de deux couleurs selon la formule (L1 + 0,05) / (L2 + 0,05), où L1 est la couleur la plus claire. La luminance relative utilise une formule pondérée qui tient compte de la perception humaine : L = 0,2126R + 0,7152G + 0,0722B (après correction gamma). Le vert contribue le plus à la luminosité perçue, c'est pourquoi le texte vert sur blanc nécessite des valeurs RGB plus élevées que le texte rouge pour atteindre le même contraste. Le daltonisme touche environ 8 % des hommes et 0,5 % des femmes. Le type le plus courant est le daltonisme rouge-vert (deutéranopie et protanopie), où les rouges et les verts paraissent similaires. La tritanopie (daltonisme bleu-jaune) est rare. L'achromatopsie (daltonisme complet) est extrêmement rare. Lors du choix des couleurs pour des interfaces, des graphiques ou des visualisations de données, évitez de vous fier uniquement à la couleur pour transmettre l'information. Utilisez la couleur en combinaison avec des formes, des motifs, des étiquettes ou la position. Tester votre palette de couleurs avec un simulateur de daltonisme aide à identifier les combinaisons problématiques. Les couleurs bleu et orange sont distinguables par presque tous les types de daltonisme. Construire une palette de couleurs pour un site web ou une application commence généralement par une couleur de marque principale. À partir de cette base, vous dérivez une palette complète de nuances, de teintes et de couleurs complémentaires. En HSL, créer des nuances signifie diminuer la luminosité tout en gardant la teinte et la saturation constantes. Créer des teintes signifie augmenter la luminosité. Créer une couleur complémentaire signifie ajouter 180 degrés à la teinte. Les couleurs analogues se trouvent à moins de 30 degrés de la teinte de base. Les couleurs triadiques sont séparées de 120 degrés. Les couleurs à complémentarité divisée se trouvent à 150 et 210 degrés de la base. Ces relations de la théorie des couleurs sont faciles à calculer en HSL et laborieuses en RGB ou hex. Les jetons de design et les propriétés personnalisées CSS (variables) sont la méthode moderne pour gérer les couleurs dans une base de code. Définissez vos couleurs une fois comme propriétés personnalisées CSS : --color-primary: hsl(220, 90 %, 56 %) ; --color-primary-light: hsl(220, 90 %, 72 %) ; --color-primary-dark: hsl(220, 90 %, 40 %). Référencez ces variables dans toutes vos feuilles de style. Lorsque vous devez changer la couleur principale, mettez à jour une seule valeur. Les systèmes de design comme Material Design et Tailwind CSS organisent les couleurs en échelles (50, 100, 200 jusqu'à 900) représentant des variations de luminosité de chaque teinte. Le mode sombre nécessite une approche de couleur différente de la simple inversion de tout. En mode sombre, les arrière-plans sont sombres (pas noir pur, qui cause trop de contraste et de fatigue oculaire) et le texte est clair (pas blanc pur pour la même raison). Les surfaces à différents niveaux d'élévation utilisent des nuances d'arrière-plan légèrement plus claires. Les couleurs de marque nécessitent souvent une saturation réduite et une luminosité accrue en mode sombre pour maintenir la lisibilité sans paraître agressives sur des arrière-plans sombres. Un système de couleurs bien conçu utilisant des propriétés personnalisées CSS peut basculer entre des palettes claires et sombres en modifiant les valeurs des variables au niveau racine. Les espaces colorimétriques au-delà de sRGB deviennent importants pour les écrans modernes. L'espace colorimétrique sRGB, utilisé par les valeurs hex et RGB standard, couvre seulement environ 35 % des couleurs visibles. Display P3, utilisé par les appareils Apple et de nombreux moniteurs modernes, couvre environ 45 %. Rec. 2020, utilisé en télévision HDR, couvre environ 75 %. Les nouvelles fonctions CSS color-mix(), color() et oklch() peuvent accéder à ces gamuts plus larges. Une couleur spécifiée comme color(display-p3 1 0 0) produit un rouge plus vif que #FF0000 sur les écrans qui prennent en charge P3. À mesure que les écrans à gamut large deviennent la norme, comprendre les espaces colorimétriques au-delà de sRGB devient de plus en plus important pour offrir des expériences visuelles éclatantes. La conversion des couleurs par programmation en JavaScript utilise des mathématiques simples. Pour convertir hex en RGB : parseInt(hex.substring(1,3), 16) donne le canal rouge, et de même pour le vert et le bleu. Pour convertir RGB en HSL : normalisez R, G, B dans la plage 0-1, calculez les valeurs max et min, déduisez la luminosité comme (max+min)/2, la saturation du delta entre max et min, et la teinte du canal qui est le max. Ces formules sont bien documentées et implémentées dans chaque bibliothèque de manipulation de couleurs (chroma.js, color, tinycolor2 en JavaScript, colour en Python, et palette en Rust). Les dégradés utilisent plusieurs codes de couleur. Un dégradé linéaire CSS effectue une transition entre les couleurs : background: linear-gradient(to right, #FF0000, #0000FF) crée un dégradé du rouge au bleu. Les dégradés en RGB peuvent produire des couleurs intermédiaires boueuses parce que la ligne droite entre deux couleurs dans l'espace RGB peut traverser des régions désaturées. Les dégradés en HSL ou oklch produisent souvent des transitions plus vives car ils suivent le cercle chromatique. L'interpolation de dégradé moderne en CSS avec « in oklch » produit des transitions perceptivement lisses : background: linear-gradient(in oklch, #FF0000, #0000FF). C'est une amélioration notable pour les dégradés entre couleurs complémentaires. Le convertisseur de couleurs WebRecast accepte les entrées dans n'importe quel format pris en charge et affiche instantanément les valeurs équivalentes dans tous les autres formats. Saisissez un code hex et voyez les valeurs RGB, HSL, HSV et CMYK. Saisissez une valeur HSL et obtenez les équivalents hex et RGB. Cela élimine les calculs de conversion manuels et réduit les erreurs lors de la traduction entre les outils de design (qui peuvent afficher HSV) et CSS (qui utilise hex, RGB ou HSL). Le convertisseur affiche également un aperçu visuel de la couleur pour que vous puissiez vérifier qu'elle correspond à votre intention. La couleur dans la visualisation de données nécessite une attention particulière. Les graphiques, diagrammes et cartes doivent utiliser des couleurs distinguables les unes des autres, significatives pour le spectateur et accessibles aux personnes ayant des déficiences de la vision des couleurs. Les échelles de couleurs séquentielles (du clair au foncé d'une même teinte) conviennent aux données continues comme la température ou la densité de population. Les échelles divergentes (deux teintes se rencontrant en un point neutre médian) conviennent aux données avec un point central significatif, comme les profits/pertes ou l'écart par rapport à la moyenne. Les échelles catégorielles (teintes distinctes) conviennent aux données nominales comme les catégories de produits. Des outils comme ColorBrewer fournissent des palettes fondées sur la recherche, optimisées pour différents types de données et exigences d'accessibilité. La gestion des couleurs entre appareils est un défi permanent. Le même code hex peut paraître différent sur différents écrans en raison des variations de technologie d'affichage, de calibrage, de luminosité et d'éclairage ambiant. sRGB est l'espace colorimétrique standard pour le web, et la plupart des écrans sont calibrés pour s'en approcher. Les designers professionnels calibrent leurs moniteurs à l'aide de colorimètres (dispositifs matériels qui mesurent la sortie d'affichage) et de profils ICC. Pour le développement web où vous ne pouvez pas contrôler l'écran de l'utilisateur, concevez avec des marges de contraste suffisantes pour que de légères différences de rendu des couleurs n'affectent pas la convivialité ou la lisibilité. L'extraction de couleurs à partir d'images est utile pour créer des palettes qui correspondent à des photographies, des éléments de marque ou des images d'inspiration. Le processus consiste à échantillonner les couleurs dominantes à l'aide d'algorithmes comme le regroupement k-means, la coupe médiane ou la quantification octree. Ces algorithmes regroupent les pixels similaires et identifient les couleurs les plus représentatives. Des outils comme Adobe Color, Coolors et divers paquets npm (color-thief, vibrant.js) automatisent ce processus. Extraire 5 à 8 couleurs dominantes d'une image principale et les utiliser comme couleurs d'accent assure une cohérence visuelle entre l'imagerie et les éléments d'interface. La psychologie des couleurs, bien qu'elle ne soit pas une science exacte, a certains effets documentés sur la perception. Le rouge augmente l'urgence perçue et est couramment utilisé pour les annonces de soldes et les états d'erreur. Le bleu transmet la confiance et le professionnalisme, c'est pourquoi les institutions financières et les plateformes de réseaux sociaux le privilégient. Le vert signale le succès, la sécurité et les thèmes environnementaux. L'orange est associé à l'action et est couramment utilisé pour les boutons d'appel à l'action. Le jaune attire l'attention et convient aux avertissements. Ces associations sont influencées culturellement : le blanc représente le deuil dans certaines cultures d'Asie de l'Est, tandis que le rouge signifie la chance et la prospérité dans la culture chinoise. Tenez compte du contexte culturel de votre audience cible lors du choix des schémas de couleurs. Conseils pratiques pour travailler avec les codes de couleur : incluez toujours le symbole dièse (#) lors de l'écriture de codes hex en CSS, car c'est une syntaxe requise. Utilisez des chiffres hexadécimaux minuscules par souci de cohérence (#ff0000 plutôt que #FF0000), c'est aussi la convention utilisée par la plupart des minificateurs et formateurs CSS. Préférez HSL dans votre CSS lorsque vous devez créer des variations de couleur par programmation. Utilisez le code hex à 8 chiffres ou rgba/hsla pour la transparence plutôt que la propriété CSS opacity, qui affecte tout l'élément y compris les enfants. Stockez vos couleurs de marque comme jetons de design et référencez-les de manière cohérente dans tout votre projet plutôt que de coder en dur les valeurs de couleur dans des composants individuels. Lorsque vous communiquez des couleurs à une équipe de design, incluez à la fois le code hex et l'échantillon visuel pour éviter toute ambiguïdue liée aux différences de calibrage d'écran.

Questions frequentes

En quoi cela diffère-t-il d'un convertisseur de couleur classique ?

Cet outil est conçu pour les développeurs qui ont besoin de convertir plusieurs couleurs à la fois, avec un format de sortie adapté au code.

Quels formats de couleur sont pris en charge ?

Les formats HEX (#RRGGBB), RGB(r,g,b), HSL(h,s%,l%), RGBA et HSLA sont tous pris en charge.