Convertisseur de couleurs : HEX, RGB, HSL, HSV, HWB, CMJN, LAB et OKLCH
Convertissez une couleur entre HEX, RGB, HSL, HSV, HWB, CMJN, CIELAB et OKLCH, avec son nom CSS et son contraste WCAG sur blanc et noir. Gratuit, dans le navigateur.
Accepte HEX (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba(), hsl()/hsla(), hsv(), hwb(), cmyk(), lab(), oklch() et les 148 noms de couleur CSS.
dodgerblue#1e90ffrgb(30, 144, 255)hsl(209.6, 100%, 55.9%)hsv(209.6, 88.2%, 100%)hwb(209.6 11.8% 0%)cmyk(88.2%, 43.5%, 0%, 0%)lab(58.36% 0.89 -64.78)oklch(65.2% 0.1901 253.21)CIELAB utilise le point blanc D50 comme CSS Color 4. Les valeurs ne sont arrondies qu’à l’affichage ; les conversions gardent toute la précision. L’alpha est ignoré pour CMYK, HSV et le contraste.
Qu'est-ce que Convertisseur de couleurs ?
Collez une couleur dans n'importe quelle notation courante et obtenez-la d'un coup dans huit modèles : HEX, RGB(A), HSL(A), HSV, HWB, CMJN, CIELAB et OKLCH. L'outil affiche aussi le nom de couleur CSS correspondant (s'il en existe un exact) et le rapport de contraste WCAG de la couleur sur blanc et sur noir.
Comment utiliser Convertisseur de couleurs
- Saisissez ou collez une couleur dans Couleur (tout format), par exemple
#1e90ff,rgb(30 144 255),hsl(210 100% 56%),oklch(65% 0.19 253)outomato, ou choisissez-en une avec le sélecteur de couleur. - Lisez les valeurs converties dans la liste des résultats ; chaque ligne a son propre bouton Copier.
- Consultez Nom CSS pour une correspondance exacte avec une couleur nommée et les cartes de contraste sur blanc / noir pour les résultats WCAG AA et AAA.
- Si une valeur LAB ou OKLCH sort de sRGB, un avertissement indique qu'elle a été ramenée à la couleur affichable la plus proche.
Exemple
#ff0000
rgb(255, 0, 0) · hsl(0, 100%, 50%) · hsv(0, 100%, 100%) · hwb(0 0% 0%) · cmyk(0%, 100%, 100%, 0%) · lab(54.29% 80.8 69.89) · oklch(62.8% 0.2577 29.23) · CSS name: red
Le contraste sur blanc est de 3,99:1 : le rouge pur échoue donc à WCAG AA pour du texte normal.
Quand utiliser Convertisseur de couleurs
Utilisez-le pour faire passer des couleurs entre outils de design et CSS, quand vous avez besoin d'un modèle perceptuel comme OKLCH pour construire des palettes, ou pour vérifier rapidement le contraste d'un texte. N'utilisez pas la sortie CMJN pour des épreuves d'impression professionnelles : une vraie impression exige un profil colorimétrique ICC, que cette formule simple ignore.
Comment fonctionne Convertisseur de couleurs
Chaque entrée est analysée en canaux sRGB à codage gamma plus alpha. HSL, HSV et HWB sont les transformations cylindriques standard de sRGB ; CMJN utilise la formule simple, indépendante du périphérique, K = 1 − max(R,G,B). Pour LAB, les valeurs sRGB sont linéarisées, converties en CIE XYZ (D65), adaptées chromatiquement à D50 avec la matrice de Bradford puis transformées en CIELAB, exactement comme dans CSS Color 4. OKLCH utilise les matrices OKLab de Björn Ottosson sur le sRGB linéaire. Les valeurs ne sont arrondies que pour l'affichage (entiers pour RGB, une décimale pour HSL/HSV/HWB/CMJN, deux pour LAB). Le contraste suit la luminance relative de WCAG 2.x : (L1 + 0,05) / (L2 + 0,05).
Cas d'utilisation courants
- Transformer un code HEX de charte graphique en
hsl()ouoklch()pour des variables CSS - Convertir une valeur
rgba()des DevTools en HEX à 8 chiffres avec alpha - Vérifier si une couleur de texte respecte WCAG AA (4,5:1) sur fond blanc
- Trouver le mot-clé CSS d'une valeur HEX comme
#663399(rebeccapurple) - Obtenir des pourcentages CMJN approximatifs pour une impression de bureau
Questions Fréquentes
Pourquoi la valeur LAB diffère-t-elle de celle de Photoshop ?
Cet outil suit CSS Color 4, qui utilise le point blanc D50 avec l'adaptation de Bradford. Certaines applications affichent LAB relativement à D65, ce qui donne des nombres légèrement différents.
Que signifie « hors de la gamme sRGB » ?
LAB et OKLCH peuvent décrire des couleurs qu'un écran sRGB ordinaire ne peut pas afficher. Ces entrées sont écrêtées canal par canal vers la couleur affichable la plus proche, et l'avertissement précise que les valeurs HEX/RGB sont des approximations.
Comment le rapport de contraste est-il arrondi ?
Il est tronqué, et non arrondi vers le haut, à deux décimales, afin qu'un rapport de 4,499 ne soit jamais présenté comme atteignant 4,5:1.
L'alpha est-il conservé dans tous les formats ?
L'alpha est conservé en HEX (8 chiffres), rgba(), hsla(), HWB, LAB et OKLCH. HSV et CMJN n'ont pas de canal alpha, et le contraste est calculé pour la couleur opaque.