Convertisseur de couleurs

Qu'est-ce qu'un convertisseur de couleur ?

Un convertisseur de couleur traduit une couleur entre différents systèmes de représentation : HEX (#RRGGBB), RGB (rouge, vert, bleu), HSL (teinte, saturation, luminosité), CMYK (cyan, magenta, jaune, noir) et HSV. Chaque système est adapté à un usage spécifique — le HEX pour le web, le RGB pour les écrans, le CMYK pour l'impression.

Comprendre et convertir entre ces formats est essentiel pour les designers, les développeurs web, les imprimeurs et les artistes numériques. Une couleur qui apparaît parfaite sur un écran (RGB) peut ne pas s'imprimer correctement sans conversion appropriée en CMYK.

Les modèles de couleurs expliqués

• HEX — un code hexadécimal à six chiffres (#FF5733). Compact et largement utilisé en développement web.
• RGB — trois valeurs (0-255) pour le rouge, le vert et le bleu. Le modèle de couleur natif des écrans.
• HSL — teinte (0-360 degrés), saturation (0-100 %) et luminosité (0-100 %). Intuitif pour créer des palettes de couleurs.
• HSV/HSB — similaire au HSL mais utilise la valeur/luminosité au lieu de la clarté. Courant dans les logiciels de création graphique.
• CMJN — quatre valeurs (0-100 %) pour cyan, magenta, jaune et noir. Utilisé en impression.

Comment utiliser cet outil

Choisissez une couleur à l'aide du sélecteur ou saisissez une valeur dans n'importe quel format (HEX, RGB, HSL). Toutes les autres représentations se mettent à jour instantanément. Vous pouvez copier la valeur dans le format souhaité d'un seul clic.

Les couleurs en développement web

CSS prend en charge plusieurs formats de couleur : hex (#ff5733), rgb(255, 87, 51), hsl(11, 100%, 60%) et les couleurs nommées (tomato). Le CSS moderne accepte également oklch() et oklab() pour des espaces colorimétriques perceptivement uniformes. Pour choisir entre les formats : HEX est le plus compact, HSL est le plus simple à ajuster par programmation (éclaircir en augmentant L, désaturer en diminuant S), et RGB est le plus largement supporté.

Exemple concret

La couleur hex #2563EB se décompose en rouge = 0x25 = 37, vert = 0x63 = 99, bleu = 0xEB = 235, soit rgb(37, 99, 235). Convertie en HSL, elle donne environ hsl(217, 83%, 53%) — un bleu saturé. Pour l’éclaircir, augmentez la valeur L ; pour une palette, faites tourner la valeur H par pas de 30° en gardant S et L constants.

Erreurs courantes

Une erreur courante est de croire que hex et RGB décrivent des couleurs différentes — ce sont les mêmes valeurs en notation différente. On ignore aussi le contraste : un texte gris clair sur blanc peut sembler élégant mais échoue aux ratios WCAG. Enfin, RGB et CMJN ne correspondent pas un pour un, donc une couleur vive à l’écran peut s’imprimer plus terne ; faites une épreuve écran pour l’impression plutôt que de vous fier au moniteur.

Questions fréquentes

Pourquoi mes couleurs s'impriment-elles différemment ?

Les écrans émettent de la lumière (modèle RGB additif), tandis que l'encre absorbe la lumière (modèle CMYK soustractif). De plus, les écrans peuvent afficher des couleurs (bleus vifs, rouges saturés) qui ne peuvent pas être reproduites avec des encres standard. Demandez toujours une épreuve avant un gros tirage.

Quelle est la différence entre HSL et HSV ?

Les deux séparent la teinte des autres dimensions, mais HSL utilise la luminosité (lightness, 0 % = noir, 100 % = blanc) et HSV utilise la valeur (value, 0 % = noir, 100 % = couleur pure). HSL est plus intuitif pour le web design ; HSV est commun dans les logiciels graphiques.

Quelle est la différence entre HEX, RGB et HSL ?

Les trois décrivent les mêmes couleurs à l’écran. HEX et RGB indiquent les quantités de rouge, vert et bleu (en base 16 ou 10), tandis que HSL utilise teinte, saturation et luminosité, plus intuitif pour ajuster ou générer des palettes.