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 ?

La valeur de Luminosité utilise la formule YIQ / ITU-R BT.601 0.299 × R + 0.587 × G + 0.114 × B appliquée aux canaux sRGB bruts (non linéarisés), pondérant chacun 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. Le résultat est un nombre de 0 (noir pur) à 255 (blanc pur), et l'outil utilise le seuil de 128 comme heuristique rapide clair/sombre pour choisir un texte clair ou sombre.

Important : cette luminosité YIQ N'EST PAS la luminance relative WCAG. La vraie luminance WCAG 2.1 linéarise d'abord par gamma chaque canal puis les pondère 0.2126 R + 0.7152 G + 0.0722 B ; le rapport de contraste qui en découle est ce qui régit réellement la conformité d'accessibilité. C'est pourquoi cet outil rapporte désormais les deux — une luminosité YIQ rapide pour un verdict approximatif clair/sombre, et un rapport de contraste WCAG distinct avec des badges réussi/échec AA / AA Grand / AAA pour de vraies vérifications d'accessibilité.

Quels rapports de contraste WCAG dois-je atteindre (AA vs AAA) ?

WCAG 2.1 définit des rapports de contraste minimaux entre le texte (ou les éléments d'UI) et leur arrière-plan, exprimés en ratios de 1:1 (aucun contraste) à 21:1 (noir pur sur blanc pur) :

- AA, texte normal : 4.5:1 — la base que la plupart des sites doivent atteindre pour le corps de texte en dessous d'environ 18pt (24px) normal ou 14pt (18,66px) gras.
- AA, grand texte : 3:1 — s'applique au texte à partir de 18pt normal / 14pt gras, ainsi qu'aux objets graphiques et aux bordures des composants d'UI actifs (Critère de Succès 1.4.11).
- AAA, texte normal : 7:1 — le niveau renforcé pour le texte normal ; le grand texte en AAA nécessite 4.5:1.

Cet outil calcule la vraie luminance relative WCAG de votre couleur, puis son rapport de contraste contre #FFFFFF et #000000, choisit la couleur de texte offrant le plus de contraste, et affiche des badges réussi ou échec AA / AA Grand / AAA. Vérification rapide : #767676 est le gris le plus clair qui atteint encore 4.5:1 sur blanc, tandis que #777777 reste juste en dessous (environ 4.48:1) et échoue AA pour le corps de texte même s'il réussit le seuil de grand texte de 3:1.

Comment garder des couleurs utilisables pour les utilisateurs daltoniens ?

Environ 8% des hommes et 0,5% des femmes ont une déficience de la vision des couleurs, le plus souvent de type rouge-vert : deutéranopie/deutéranomalie (perception réduite du vert) et protanopie/protanomalie (perception réduite du rouge), la tritanopie plus rare affectant le bleu-jaune. Les règles pratiques :

- Ne vous reposez jamais sur la seule teinte pour transmettre du sens. Associez la couleur à des étiquettes de texte, des icônes, des motifs ou la position — un point d'état rouge/vert est invisible pour de nombreux utilisateurs sauf si vous ajoutez une forme ou un mot.
- Conservez un fort contraste de luminance. Deux couleurs qui ne diffèrent que par la teinte mais pas par la luminosité peuvent se confondre en un même gris pour un spectateur daltonien, donc le rapport de contraste WCAG affiché ici est votre meilleur filet de sécurité.
- Évitez les associations problématiques comme rouge-sur-vert, vert-sur-marron et bleu-sur-violet pour les éléments adjacents ou superposés.

Vérifiez une valeur HEX ici, confirmez qu'elle atteint le seuil de contraste dont vous avez besoin, puis prévisualisez votre palette complète dans un simulateur de daltonisme avant de publier.

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 canal alpha, bien que cet outil se concentre sur la conversion opaque HEX/RGB/HSL/CMJN.

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. Notez que ce convertisseur ne travaille qu'avec des couleurs opaques — ajoutez vous-même les chiffres alpha une fois que vous avez le HEX de base ici.

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é)
• Vérificateur de contraste WCAG 2.1 avec badges réussi/échec AA / AA Grand / AAA
• Recommandation de la meilleure couleur de texte (noir ou blanc) pour l'accessibilité
• 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