Convertisseur de couleurs

Convertisseur de couleurs

Convertissez instantanément entre les formats de couleur HEX, RGB, HSL et HSV. Que vous écriviez du CSS, conceviez dans Figma ou Photoshop, ou construisiez une palette de couleurs de marque, ce convertisseur traduit n'importe quelle valeur de couleur dans tous les autres formats, pour que vous ayez toujours le code exact attendu par votre outil.

Comment fonctionne la conversion des couleurs

Tous les modèles de couleur d'écran encodent les couleurs sous forme de trois composantes numériques représentant la même couleur sous-jacente.

RGB vers HEX -- convertissez chacune des trois valeurs décimales 0-255 en une paire hexadécimale à 2 chiffres et concaténez-les avec un préfixe #. Exemple : rgb(255, 87, 51) devient FF (255), 57 (87), 33 (51) = #FF5733.

RGB vers HSL -- normalisez chaque canal entre 0 et 1, trouvez les valeurs max (M) et min (m), puis : Teinte = angle selon le canal qui est au maximum, Saturation = (M - m) / (1 - |2L - 1|), Luminosité = (M + m) / 2. Exemple : rgb(255, 87, 51) se convertit en hsl(11, 100%, 60%).

HEX vers RGB -- interprétez chaque paire hexadécimale de 2 caractères comme un nombre en base 16. #1A8FE3 donne R = 0x1A = 26, G = 0x8F = 143, B = 0xE3 = 227.

Exemples concrets

Exemple 1 -- Audit de couleur de marque. Une charte graphique de marque spécifie le Pantone 485 C, soit environ #DA291C. Un développeur a besoin de la version CSS rgb() pour un dégradé : rgb(218, 41, 28). Un designer a besoin de la version HSL pour créer une nuance plus claire : hsl(4, 76%, 48%). En augmentant la luminosité à 70%, on obtient hsl(4, 76%, 70%) = une nuance rose saumon, le tout à partir du même hex d'origine.

Exemple 2 -- Vérification de l'accessibilité. Un bouton utilise un texte #767676 sur un fond #FFFFFF. La conversion en RGB donne rgb(118, 118, 118) contre rgb(255, 255, 255). La luminance relative de #767676 est d'environ 0.216 et celle du blanc est de 1.0, donnant un ratio de contraste de 4.54:1 -- juste assez pour passer le niveau WCAG AA pour le texte normal (minimum 4.5:1).

Exemple 3 -- Génération d'une palette pour le mode sombre. Une interface utilise #0057B8 (HSL : 214, 100%, 36%) comme bleu principal sur fond clair. Pour le mode sombre, conservez la teinte à 214, gardez la saturation à 100% et portez la luminosité à 60% pour obtenir #3399FF -- un bleu visiblement plus clair qui conserve la teinte de la marque mais fonctionne sur des surfaces sombres.

Tableau de référence

Quand l'utiliser

• Copier une couleur HEX depuis un fichier de conception et avoir besoin de la version rgb() ou hsl() pour des variables CSS ou une configuration Tailwind.
• Générer les nuances d'une palette de couleurs en ajustant la luminosité en HSL tout en gardant la teinte et la saturation fixes.
• Vérifier si deux couleurs dans des formats différents sont réellement la même couleur avant de finaliser un système de design.
• Convertir une valeur hex exportée depuis Photoshop en RGBA avec un canal alpha pour des effets de superposition CSS.
• Faire correspondre une couleur web à une spécification d'impression en la convertissant vers l'équivalent CMYK le plus proche pour un imprimeur.

Erreurs courantes

1. Utiliser un HEX à 3 chiffres comme s'il en comptait 6. #F53 est l'abréviation de #FF5533, et non de #F05030. Chaque chiffre d'un code hex à 3 chiffres est doublé, alors n'utilisez l'abréviation que lorsque les deux chiffres de chaque paire de canal sont identiques.
2. Confondre la luminosité (Lightness) du HSL et la valeur (Value) du HSV. Une couleur à une luminosité HSL de 50% et une valeur HSV de 100% paraissent très différentes -- une luminosité HSL de 50% est un ton moyen entièrement saturé, tandis qu'une valeur HSV de 100% est la nuance la plus lumineuse possible de cette teinte. Confondre ces valeurs en changeant d'outil produit des couleurs erronées.
3. Ignorer le canal alpha dans les conversions RGBA. Convertir rgba(255, 87, 51, 0.5) en HEX nécessite 8 chiffres : #FF573380. Supprimer l'alpha produit #FF5733, qui est totalement opaque -- un résultat visuel complètement différent sur tout fond non blanc.
4. Accumulation d'erreurs d'arrondi au fil de plusieurs conversions. Convertir du RGB vers le HSL et inversement peut introduire des erreurs d'arrondi d'une unité (par exemple, rgb(255, 87, 51) pourrait revenir à rgb(255, 86, 51) après un aller-retour). Conservez les valeurs d'origine et ne convertissez qu'une seule fois avant utilisation.

Applications concrètes

Les propriétés personnalisées CSS s'accommodent bien du HSL, car générer une palette complète à partir d'une seule couleur de base est simple -- définissez --brand-hue: 214 et calculez toutes les nuances en faisant varier la luminosité de 10% à 90%. Les systèmes de design d'entreprises comme GitHub, Stripe et Atlassian documentent publiquement leurs jetons de couleur à la fois en HEX (pour les références statiques) et en HSL (pour la génération par programmation). Les calculs de contraste WCAG exigent de convertir tout format de couleur en luminance relative, dérivée des valeurs RGB linéaires, ce qui fait de ce convertisseur une étape pratique dans les audits d'accessibilité.

Conseils

1. Mémorisez les 6 couleurs des sommets : #FF0000 rouge, #FFFF00 jaune, #00FF00 vert, #00FFFF cyan, #0000FF bleu, #FF00FF magenta. Toute autre teinte se situe entre deux de celles-ci sur le cercle chromatique.
2. Pour éclaircir une couleur sans changer sa teinte, convertissez-la en HSL et augmentez la valeur L. Pour l'assombrir, diminuez la valeur L. Gardez H et S inchangés.
3. Toute couleur HEX dont les trois paires sont identiques (#333333, #AAAAAA, #F5F5F5) est une nuance de gris. Plus la valeur est élevée, plus le gris est clair.
4. Utilisez les propriétés personnalisées CSS -- --brand-color: #FF5733 -- pour définir une couleur une seule fois et la réutiliser. Modifier une valeur met à jour toute la feuille de style.
5. Pour la conception en mode sombre, évitez un texte #FFFFFF pur sur un fond #000000 pur. Essayez #E8E8E8 sur #1A1A1A (luminosité HSL d'environ 91% sur environ 10%) pour réduire la fatigue oculaire avec un ratio de contraste pratiquement identique.
6. Les codes hex à huit chiffres ajoutent un canal alpha en tant que deux derniers chiffres : #FF573300 est totalement transparent et #FF5733FF est totalement opaque. Des valeurs comme #FF573380 donnent environ 50% d'opacité.