Si vous avez déjà essayé de concevoir un site Web, de créer un logo ou d'imprimer une carte de visite, vous êtes immédiatement tombé sur la soupe alphabétique déroutante des codes de couleur : HEX, RVB, HSL et CMJN. Pourquoi y a-t-il tant de façons de décrire une simple nuance de bleu ?
La vérité est que les ordinateurs et les imprimantes « voient » la lumière de manières fondamentalement différentes. De plus, la façon dont les ordinateurs traitent la lumière ne correspond pas nécessairement à la façon dont le cerveau humain interprète la couleur. Comprendre ces formats n'est pas qu'une simple théorie : cela vous évitera de déployer des sites Web avec des taux de contraste inaccessibles ou de payer des milliers de dollars pour des dépliants marketing qui s'impriment avec un aspect boueux et sombre.
Lumière additive ou soustractive
Avant de plonger dans le code, il faut établir la différence physique entre les écrans et le papier.
- Les écrans émettent de la lumière (additif). Si vous désactivez tous les pixels, l'écran est noir. Pour produire du blanc, un écran émet de la lumière rouge, verte et bleue à une intensité maximale.
- Le papier reflète la lumière (soustractive). Une feuille de papier vierge est déjà blanche (elle reflète toute la lumière). Pour créer du noir, une imprimante superpose de l’encre cyan, magenta et jaune pour absorber toute la lumière.
1. RVB (rouge, vert, bleu)
RVB est la langue native de votre écran d'ordinateur. Il définit une couleur en indiquant à l'écran exactement la quantité de lumière rouge, verte et bleue à émettre. Chaque canal est représenté par un nombre entier allant de 0 (off) à 255 (intensité maximale).
Par exemple, le rouge pur est rgb(255, 0, 0). Le blanc pur est rgb(255, 255, 255).
Idéal pour : la retouche d'images (Photoshop) et la photographie numérique. Il manipule directement les pixels matériels.
2. HEX (hexadécimal)
Les codes HEX, comme #FF5733, sont exactement la même chose que RVB. La seule différence, ce sont les mathématiques. Au lieu d'utiliser des nombres en base 10 (0-255), il utilise des nombres hexadécimaux en base 16 (00 à FF). Les deux premières lettres dictent le rouge, les deux du milieu le vert et les deux dernières le bleu.
Pourquoi les développeurs Web utilisent-ils HEX ? Parce que c'est plus court. Écrire #FFF est beaucoup plus rapide pour un développeur CSS que d'écrire rgb(255, 255, 255).
Idéal pour : Coder en dur les couleurs de la marque en CSS. Il est concis et facile à copier-coller entre des outils de conception comme Figma et des éditeurs de code.
Convertissez instantanément les codes couleur
Ne perdez pas de temps à faire des calculs hexadécimaux dans votre tête. Utilisez notre outil hors ligne pour traduire instantanément entre HEX, RVB, HSL et CMJN avec un aperçu visuel.
Convertisseur de couleurs ouvert3. HSL (Teinte, Saturation, Légèreté)
RVB et HEX sont terribles pour les humains. Si je vous montre le code #4A90E2, vous ne pourrez pas facilement deviner de quelle couleur il s'agit. Si je vous demande de "rendre ce bleu 20% plus foncé", faire le calcul en HEX est presque impossible.
HSL a été conçu pour le cerveau humain. Il définit la couleur sur une roue chromatique à 360 degrés.
- Teinte (0-360) : La couleur réelle. 0 est rouge, 120 est vert, 240 est bleu.
- Saturation (0-100 %) : Quelle est l'intensité de la couleur. 0 % est gris, 100 % est vibrant.
- Luminosité (0-100 %) : le degré de luminosité ou d'obscurité. 0% est noir, 100% est blanc.
Si le bleu de votre marque est hsl(210, 100%, 50%) et que vous souhaitez une teinte plus foncée pour un effet de survol du bouton, il vous suffit de modifier le dernier chiffre : hsl(210, 100%, 40%). C'est magique pour l'architecture CSS.
4. CMJN (Cyan, Magenta, Jaune, Clé/Noir)
CMJN est uniquement destiné au monde physique. Il dicte la manière dont une imprimante mélange l’encre physique. Étant donné que l’encre absorbe la lumière, l’espace colorimétrique est physiquement plus petit que celui du RVB. Il existe des verts néon vibrants qu’un écran peut émettre (en RVB) qu’une imprimante ne peut physiquement pas imprimer (en CMJN).
La règle d'or : n'envoyez jamais un fichier RVB à un imprimeur commercial. L'imprimante le convertira de force en CMJN, ce qui donnera à vos couleurs vibrantes un aspect boueux et délavé. Convertissez toujours vos créations en CMJN avant de les envoyer à l’imprimerie.
Matrice de comparaison
| Format | Environment | Readability | Primary Use Case |
|---|---|---|---|
| HEX | Digital | Low | Standard web design, copying from Figma |
| RGB | Digital | Medium | Manipulating alpha transparency (rgba) |
| HSL | Digital | High | Dynamic CSS theming, Dark Modes |
| CMYK | Physical Print | N/A | Business cards, flyers, packaging |
Foire aux questions (FAQ)
Quel format dois-je utiliser pour un mode sombre CSS ?
Utilisez toujours le HSL pour les thèmes dynamiques. En gardant la teinte et la saturation constantes, vous pouvez simplement inverser la valeur de luminosité pour traduire parfaitement une couleur en mode clair en couleur en mode sombre.
Puis-je utiliser CMJN sur un site Web ?
Non. Les navigateurs Web ne comprennent que les formats de couleurs basés sur la lumière (RVB, HEX, HSL). Si vous téléchargez un JPEG CMJN sur un site Web, certains navigateurs tenteront de le restituer, mais les couleurs apparaîtront brisées ou inversées.
Qu'est-ce qu'un canal Alpha ?
Le « A » dans RGBA ou HSLA signifie Alpha, qui contrôle la transparence. Un alpha de 1,0 est entièrement solide, tandis que 0,5 est transparent à 50 %. Le CSS moderne permet désormais également la transparence directement dans les codes HEX en ajoutant deux chiffres supplémentaires (par exemple, #FFFFFF80).