Convertisseur de couleurs (HEX, RGB, HSL)
Convertissez les couleurs entre HEX, RGB, HSL et OKLCH.
Tapez une couleur dans n'importe quel format (HEX, RGB, HSL, OKLCH) et les autres se mettent à jour en direct. Idéal pour les design tokens, variables CSS et brand kits.
rgb(10 124 255)
hsl(212 100% 52%)
oklch(0.608 0.215 257.4)
Meilleur contraste avec
texte noir → ratio 5.34:1 (WCAG AA exige 4,5:1)
Comment l'utiliser
Tapez une couleur dans n'importe quel format
HEX, rgb(), hsl() ou oklch() dans le champ correspondant. Tous les autres se mettent à jour.
Ajustez les canaux directement
Modifiez les curseurs R/G/B ou les composantes HSL pour caler une nuance.
Copiez le format voulu
Bouton de copie à côté du format attendu par votre destination.
Qu'est-ce que c'est ?
Un convertisseur de couleurs traduit entre les formats utilisés par CSS, outils de design et éditeurs d'images. HEX (#0a7cff) est le raccourci legacy d'un triplet RGB. RGB exprime intensités rouge/vert/bleu. HSL est plus intuitif pour ajuster les nuances. OKLCH est le nouveau modèle perceptuellement uniforme de CSS Color Level 4.
Quand l'utiliser
Quand une couleur doit voyager entre contextes : copier une couleur de marque d'un SVG (HEX) vers un système de variables CSS (HSL ou OKLCH), traduire une valeur de capture d'écran (RGB) en token, générer des variantes accessibles. Aussi utile pour vérifier le contraste WCAG.
Erreurs courantes
Ne supposez pas que la luminosité HSL est perceptuelle - elle ne l'est pas. hsl(60 100% 50%) (jaune) et hsl(240 100% 50%) (bleu) ont la même luminosité mais luminance très différente ; OKLCH corrige. Et ne tronquez pas les canaux HEX en cours de conversion : arrondissez à la fin.
FAQ
- Pourquoi OKLCH ?
- OKLCH est le nouveau format CSS Color Level 4. Contrairement à HSL il est perceptuellement uniforme : changer luminosité ou chroma ne décale pas la teinte.