Convertisseur de Couleurs

Convertisseur de Couleurs - Convertir Entre Formats de Couleurs

Un puissant convertisseur de couleurs qui convertit entre les formats HEX, RGB, HSL et CMYK. Dispose d'un sélecteur de couleurs avec aperçu en direct, copie des couleurs dans le presse-papiers et détection de la luminosité. Parfait pour les développeurs web, les designers et tous ceux qui travaillent avec des couleurs.

Comment convertir HEX en RGB ou RGB en HEX ?

Collez une valeur HEX (avec ou sans le # initial) dans le champ HEX, ou tapez trois nombres dans les champs R, G, B, et tous les autres formats se mettent à jour à l'instant où votre entrée est valide. Le calcul est direct : HEX n'est que du RGB en base 16, donc #FF5733 se divise en paires FF/57/33 qui valent 255/87/51 en décimal. Dans l'autre sens, chaque canal RGB se divise par 16 pour donner un chiffre hexadécimal puis le reste donne le suivant ; l'outil gère les deux conversions et la notation abrégée à 3 chiffres (#F57 s'étend en #FF5577). Utilisez HEX en écrivant du CSS à la main, RGB en manipulant des couleurs en JavaScript ou pour le canal alpha (rgba(255,87,51,0.8) pour 80% d'opacité, ce que HEX n'exprime pas proprement avant d'atteindre la syntaxe à 8 chiffres #FF5733CC).

Quand utiliser HSL au lieu de HEX ou RGB ?

HSL est le format qui correspond à la façon dont les designers humains pensent la couleur : choisissez une teinte de l'arc-en-ciel, puis combien vive (saturation) et combien claire (luminosité) vous la voulez. Utilisez HSL quand vous devez dériver des variations d'une seule couleur — pour faire un état hover 10% plus sombre, gardez les mêmes H et S et baissez L de 10% ; le résultat est automatiquement la même teinte. Faire cela en HEX ou RGB demande de jongler avec les trois canaux et décale généralement la teinte accidentellement. HSL est aussi l'épine dorsale des gammes de couleurs des design systems (Tailwind, Material, Radix), des custom properties CSS pour le thème, et de toute animation qui fait du fondu entre couleurs liées. Le CSS moderne supporte même hsl() directement sans conversion : color: hsl(9 100% 60%);.

Pourquoi mes valeurs CMJN paraissent-elles plus ternes que la version RGB à l'écran ?

RGB est un modèle de couleur additif utilisé par les appareils émetteurs de lumière (moniteurs, téléphones, projecteurs), où additionner les trois canaux au maximum produit du blanc pur. CMJN est un modèle soustractif utilisé par l'encre sur papier, où additionner les quatre encres soustrait la lumière pour produire du quasi-noir. Les espaces de couleur visibles se chevauchent mais ne sont pas identiques : un bleu vif d'écran ou un vert néon ne peut pas être reproduit par aucune combinaison d'encres CMJN, donc la conversion mathématique tronque dans la plage imprimable et les résultats paraissent atténués. C'est de la physique fondamentale, pas un bug. Pour le travail d'impression professionnel, concevez directement en CMJN dès le départ dans des logiciels comme Adobe InDesign ou Affinity Publisher avec un profil de couleur ICC correspondant à votre imprimante ; ne faites jamais confiance à un aperçu CMJN automatique à l'écran comme final.

Comment la luminosité de la couleur est-elle calculée et pourquoi est-ce important ?

L'outil utilise la formule de luminosité perceptuelle 0.299 × R + 0.587 × G + 0.114 × B, qui pondère chaque canal RGB selon la force avec laquelle l'œil humain y répond. Le vert domine car les cellules en cône de la rétine sont les plus sensibles aux longueurs d'onde du spectre moyen ; le rouge est intermédiaire ; le bleu contribue le moins à la luminosité perçue. Le résultat est un nombre de 0 (noir pur) à 255 (blanc pur). C'est important car la même valeur numérique de canal paraît différente entre teintes — le vert pur (0,255,0) paraît bien plus brillant que le bleu pur (0,0,255) à magnitudes RGB identiques. C'est pourquoi les règles automatiques de détection clair/sombre (au-dessus de 128 = clair, en dessous = sombre) sont basées sur la luminosité perceptuelle plutôt que sur la moyenne brute des canaux.

Quelle est la différence entre les codes HEX à 3 et 6 chiffres ?

Un HEX à 3 chiffres comme #F57 est une notation abrégée de la valeur à 6 chiffres #FF5577, avec chaque chiffre dupliqué. Cela fonctionne car chaque paire de chiffres hex identiques représente le même octet (FF = 255, 77 = 119), donc l'abréviation effondre les paires répétées en chiffres uniques. L'abréviation n'atteint que 4 096 couleurs (16^3) contre les 16,7 millions disponibles en notation à 6 chiffres, donc elle convient pour les primaires web-safe pleines et les gris purs (#000, #FFF, #888) mais ne peut pas représenter la plupart des couleurs de marque subtiles. Utilisez l'abréviation pour garder les petites feuilles de style compactes et la notation à 6 chiffres partout ailleurs. CSS accepte aussi l'abréviation à 4 chiffres (#F57C = #FF5577CC) et la notation à 8 chiffres (#FF5577CC) pour les couleurs avec alpha, que l'outil peut également produire.

Pourquoi mon HEX exact de marque s'affiche-t-il légèrement différemment selon les appareils ?

Les navigateurs rendent la couleur dans l'espace sRGB par défaut, mais les pixels réels que vous voyez dépendent de la calibration de votre moniteur, de la technologie de la dalle (IPS vs OLED vs TN ancien), du réglage de luminosité, de la lumière ambiante, et de savoir si l'OS applique un profil large gamut comme Display P3. Deux moniteurs regardant le même #1A73E8 peuvent afficher des bleus subtilement différents, et le même écran peut changer au fil de la journée à mesure que les modes nocturnes chaleureux s'activent. Pour la cohérence de marque, définissez les tokens de couleur une fois en HEX ou HSL, documentez-les avec des noms sémantiques, et faites confiance au fait que la variation est bornée — sRGB couvre encore environ 35% du spectre visible et est le plus petit dénominateur commun universel. Pour les couleurs qui doivent correspondre entre impression et écran, utilisez la sortie CMJN ici comme point de départ et faites une épreuve de presse avant de vous engager.

Puis-je représenter la transparence ou un canal alpha en HEX ?

Oui, les navigateurs modernes supportent le HEX à 8 chiffres (#RRGGBBAA) où les deux derniers chiffres hex encodent un canal alpha de 00 (totalement transparent) à FF (totalement opaque). Par exemple #FF5733CC est la même couleur que #FF5733 à environ 80% d'opacité (CC = 204 / 255). L'abréviation à 4 chiffres #F57C s'étend de la même façon. Cependant, la syntaxe ancienne rgba() (rgba(255, 87, 51, 0.8)) reste plus lisible, plus largement supportée dans les clients email anciens, et plus facile à manipuler via JavaScript ou les custom properties CSS car l'alpha est un champ décimal séparé. Utilisez HEX à 8 chiffres quand vous voulez un token unique autonome ; utilisez rgba() quand l'alpha varie indépendamment de la couleur de base, par exemple en faisant fondre une couleur de marque dans une transition hover.

Quelle est la précision de la conversion RGB vers HSL et quels cas limites surveiller ?

La conversion est mathématiquement sans perte dans les deux directions — chaque triplet (R, G, B) se mappe sur exactement un triplet (H, S, L) — mais deux cas limites produisent des résultats non intuitifs. Les couleurs en niveaux de gris pures (où R = G = B) ont une teinte non définie car aucun canal ne domine ; cet outil rapporte H = 0 par convention, mais vous ne pouvez pas utiliser cette valeur de teinte pour générer des schémas d'harmonie (toute harmonie depuis une base grise reste grise). Deuxièmement, les couleurs très sombres ou très claires perdent en précision de teinte quand elles sont stockées comme pourcentages entiers : une couleur à L = 2% avec saturation élevée peut s'arrondir à la même valeur HSL qu'une avec saturation faible, donc le round-trip RGB → HSL → RGB peut dériver d'une ou deux unités RGB. Pour les design tokens, stockez le HEX original et traitez HSL comme une dérivation, pas une source de vérité.

Fonctionnalités Clés

• Conversion entre HEX, RGB, HSL et CMYK
• Sélecteur de couleurs interactif
• Aperçu de couleur en direct
• Copier n'importe quel format dans le presse-papiers
• Détection de luminosité (clair/foncé)
• Support des formats HEX #RVB et #RRVVBB
• Conversion en temps réel pendant la saisie
• Calculateur de luminosité des couleurs
• Traitement 100% côté client
• Aucune communication serveur
• Fonctionne hors ligne
• Support du mode sombre
• Compatible mobile