Convertir les couleurs HEX, RGB, HSL et oklch en ligne
Les équipes de design et développement jonglent constamment entre différents espaces couleur. Figma exporte en HEX, les variables CSS modernes utilisent oklch, les spécifications d'impression demandent du CMYK, Tailwind veut du RGB. Convertir manuellement entre ces formats est fastidieux et source d'erreurs. Le Sélecteur de Couleur de WikiPlus calcule et affiche simultanément tous les formats dès que vous entrez ou choisissez une couleur, éliminant tout besoin de conversion manuelle.
HEX : le format universel du web
Le format hexadécimal comme `#0011ff` est le standard de facto du web depuis les années 90. Il encode chaque canal de couleur (rouge, vert, bleu) sur deux chiffres hexadécimaux allant de 00 à FF. Le format court `#RGB` est disponible quand chaque paire de chiffres est identique : `#aabbcc` s'écrit `#abc`. Le format étendu `#RRGGBBAA` ajoute un canal alpha pour la transparence. Les avantages du HEX sont sa compacité (7 caractères), sa lisibilité pour les développeurs habitués, et sa compatibilité universelle depuis les navigateurs les plus anciens. L'inconvénient est qu'il est difficile de déduire intuitivement la teinte, la saturation ou la luminosité d'une couleur à partir de son code HEX, ce qui rend les ajustements manuels difficiles.
HSL : l'espace couleur pour les designers
L'espace HSL (Teinte, Saturation, Luminosité) est conçu pour correspondre à la perception humaine des couleurs. La teinte est un angle de 0 à 360° sur la roue des couleurs : 0° est rouge, 120° est vert, 240° est bleu. La saturation de 0% à 100% contrôle l'intensité de la couleur : 0% est un gris pur, 100% est la couleur la plus vive possible. La luminosité de 0% à 100% contrôle la clarté : 0% est noir, 50% est la couleur pure, 100% est blanc. L'avantage pratique de HSL est qu'ajuster la luminosité pour améliorer le contraste d'accessibilité est trivial — changez simplement le troisième composant. Pour créer une variation plus claire d'une couleur de marque, augmentez L de 15 à 20 points en conservant H et S identiques.
oklch : l'avenir des systèmes de design
L'espace oklch est un espace couleur perceptuellement uniforme, ce qui signifie que des changements numériques égaux produisent des changements de luminosité perçus égaux. Contrairement au RGB ou HSL, les dégradés oklch ne produisent pas de teintes fanées ou boueuses aux points médians. La propriété CSS `oklch()` est supportée par tous les navigateurs modernes depuis 2023. La syntaxe est `oklch(lightness chroma hue)` où la luminosité va de 0 à 1 (ou 0% à 100%), la chroma de 0 à ~0.4, et la teinte de 0° à 360°. Pour les systèmes de design, définissez votre palette de marque en oklch dans des variables CSS personnalisées : les palettes tonales générées par interpolation oklch donnent des résultats perceptuellement cohérents que les outils basés sur HEX ou RGB ne peuvent pas atteindre.
CMYK pour l'impression
Le modèle CMYK (Cyan, Magenta, Jaune, Noir) est le standard pour l'impression professionnelle. Contrairement aux modèles additifs RGB et HEX utilisés pour les écrans, CMYK est un modèle soustractif où les pigments absorbent la lumière. La conversion entre RGB et CMYK n'est pas bijective — certaines couleurs écran ne peuvent pas être reproduites fidèlement à l'impression, et vice versa. Le sélecteur de couleur WikiPlus calcule une approximation CMYK de votre couleur screen pour donner une orientation aux discussions avec les imprimeurs, mais pour une production d'impression professionnelle, utilisez un logiciel dédié comme Adobe Illustrator avec des profils ICC appropriés. Les couleurs fluorescentes et certains tons très saturés sont particulièrement difficiles à reproduire fidèlement en CMYK.
Questions fréquemment posées
- Quelle est la différence entre HSL et HSB (HSV) ?
- HSL et HSB partagent les composantes Teinte et Saturation mais diffèrent dans le troisième composant. En HSL, Luminosité (L) de 50% est la couleur pure, 0% est noir, 100% est blanc. En HSB, Brillance (B) de 100% est la couleur pure, 0% est noir — le blanc pur n'est pas un point extrême mais une combinaison (H=*, S=0%, B=100%). Figma et Photoshop utilisent HSB, alors que les variables CSS utilisent HSL.
- Puis-je entrer un code HEX directement pour obtenir tous les autres formats ?
- Oui. Tapez un code HEX valide (avec ou sans #) dans le champ correspondant et tous les autres formats se mettent à jour instantanément : RGB, HSL, HSB, oklch et CMYK. Vous pouvez aussi entrer des valeurs RGB ou HSL directement dans leurs champs respectifs.
- Pourquoi les mêmes couleurs semblent-elles différentes sur des écrans différents ?
- Chaque écran a une gamme de couleurs différente (sRGB, P3, Rec2020) et une calibration différente. Les couleurs définies en sRGB peuvent apparaître moins saturées sur un écran P3 qui peut afficher une plus large gamme. Pour les productions nécessitant une reproduction fidèle des couleurs, utilisez des profils ICC et un moniteur calibré.