Convertisseur de couleur
Convertissez des codes couleur entre HEX, RGB, HSL, HSV et CMYK. Modifiez un canal et tous les autres formats se mettent à jour instantanément ; vos saisies restent dans votre navigateur
Paramètres de couleur
Comment utiliser cet outil
- Choisissez une couleur avec le sélecteur visuel, saisissez un code HEX ou déplacez les curseurs RGB et HSL ; tous les formats se mettent à jour ensemble.
- Utilisez « Couleur aléatoire » pour explorer des idées.
- Lisez les valeurs HEX, RGB, HSL, HSV et CMYK, ainsi que la luminance relative et le contraste avec un texte blanc et noir.
- Cliquez sur Copier à côté du format voulu pour le coller dans du CSS, un logiciel de design ou du code.
Exemple concret
Le vert émeraude #059669 donne rgb(5, 150, 105), hsl(161, 94%, 30%), hsv(161, 97%, 59%) et cmyk(97%, 0%, 30%, 41%), avec une luminance relative de 0,2286. Un texte blanc dessus atteint un contraste de 3,77:1 et un texte noir de 5,57:1. Les WCAG exigent au moins 4,5:1 pour un texte normal et 3:1 pour un grand texte : le blanc sur ce vert ne convient donc qu'aux grands titres, tandis que le noir convient partout. Les valeurs CMYK viennent d'une formule simple sans profil ICC et ne correspondront pas à une épreuve d'imprimeur.
Méthodologie
Chaque format est calculé à partir d'un triplet sRGB 8 bits. Le sRGB est défini dans la norme CEI 61966-2-1 ; les notations HEX, RGB et HSL sont celles de la spécification W3C CSS Color ; la luminance relative suit les WCAG 2.1. Toutes les valeurs sont arrondies à l'entier, donc un aller-retour peut décaler une valeur de 1.
Sept couleurs classiques et leur contraste avec le blanc et le noir
Sept couleurs courantes, converties avec les formules de cet outil. La dernière colonne indique le rapport de contraste d'un texte blanc et d'un texte noir posés sur la couleur.
| Couleur | TSL (HSL) | CMJN (%) | Contraste blanc / noir |
|---|---|---|---|
| #FF0000 Rouge | 0, 100 %, 50 % | 0, 100, 100, 0 | 4,00:1 / 5,25:1 |
| #0000FF Bleu | 240, 100 %, 50 % | 100, 100, 0, 0 | 8,59:1 / 2,44:1 |
| #FFFF00 Jaune | 60, 100 %, 50 % | 0, 0, 100, 0 | 1,07:1 / 19,56:1 |
| #808080 Gris moyen | 0, 0 %, 50 % | 0, 0, 0, 50 | 3,95:1 / 5,32:1 |
| #008080 Bleu sarcelle | 180, 100 %, 25 % | 100, 0, 0, 50 | 4,77:1 / 4,40:1 |
| #800080 Violet | 300, 100 %, 25 % | 0, 100, 0, 50 | 9,42:1 / 2,23:1 |
| #000080 Bleu marine | 240, 100 %, 25 % | 100, 100, 0, 50 | 16,01:1 / 1,31:1 |
Comment lire ce tableau : le niveau AA des WCAG 2.1 demande 4,5:1 pour un texte courant. Le jaune est le cas extrême, avec 1,07:1 pour du texte blanc mais 19,56:1 pour du noir. Le gris moyen #808080 surprend souvent : il se trouve au milieu de l'échelle 0–255, mais ni le blanc (3,95:1) ni le noir (5,32:1) ne s'y équilibrent, car la luminosité perçue n'est pas linéaire. Le bleu sarcelle et le gris moyen sont des cas limites, vérifiez donc toujours l'association exacte.
Limites : les valeurs sont arrondies à l'entier et le CMYK vient d'une formule simple, sans profil ICC ; il ne correspondra pas à une épreuve imprimée.
Questions fréquentes
Quelle est la différence entre RGB et HSL en CSS ? ▼
Les deux décrivent les mêmes couleurs sRGB. Le RGB mélange de la lumière rouge, verte et bleue, comme le font les écrans. La HSL décrit une couleur par sa teinte (un angle sur le cercle chromatique), sa saturation et sa luminosité : éclaircir ou désaturer revient à changer un seul nombre. Exemple : hsl(30, 100%, 50%) et rgb(255, 128, 0) sont le même orange, mais une version plus sombre est simplement hsl(30, 100%, 35%).
Peut-on convertir exactement du CMYK en RGB ? ▼
Non. Le RGB est de la lumière additive sur écran, le CMYK de l'encre soustractive sur papier, et la gamme imprimable dépend des encres, du papier et de la presse. Le CMYK affiché ici provient d'une simple formule mathématique sans profil colorimétrique : voyez-le comme un point de départ et validez les couleurs avec le profil ICC de votre imprimeur ou une épreuve.
Comment la luminance relative est-elle calculée, et à quoi sert-elle ? ▼
Chaque canal sRGB est linéarisé (on retire la courbe gamma) puis combiné en L = 0,2126 R + 0,7152 G + 0,0722 B, la formule des WCAG 2.1. Les poids reflètent la sensibilité plus forte de l'œil au vert. Le rapport de contraste vaut alors (L1 + 0,05) / (L2 + 0,05), L1 étant la couleur la plus claire. Les WCAG exigent au niveau AA 4,5:1 pour le texte normal et 3:1 pour le grand texte.
Pourquoi ma valeur a-t-elle changé de 1 après la conversion inverse ? ▼
La HSL, le HSV et le CMYK sont affichés en nombres entiers, et plusieurs couleurs RGB donnent la même HSL arrondie. Si vous modifiez les champs HSL, l'outil conserve vos valeurs HSL et en déduit le RGB ; si vous modifiez ensuite le RGB, la HSL est recalculée et peut différer légèrement. La teinte est indéfinie pour les gris et s'affiche à 0. Pour des valeurs exactes, gardez le code HEX ou RGB comme référence.