Convertisseur de couleurs
Convertissez une couleur entre HEX, RGB, HSL, HWB, OKLCH, OKLab et CMJN, avec teintes, nuances et le nom CSS le plus proche.
Mode d’emploi
Saisissez une couleur dans n’importe quelle notation CSS, ou choisissez-la avec le sélecteur, et la même couleur s’affiche dans tous les formats, chacun avec son bouton de copie. L’outil lit #hex de 3, 4, 6 ou 8 chiffres, rgb(), hsl(), hwb(), oklch(), oklab() et les 148 noms de couleur CSS, avec ou sans transparence.
HEX et RGB écrivent les mêmes trois canaux de 0 à 255, en base 16 ou en base 10. HSL et HWB décrivent les mêmes couleurs sRGB par leur teinte, avec saturation et luminosité ou avec blanc et noir. OKLCH et OKLab, définis dans CSS Color Module Level 4, sont conçus pour que des pas égaux paraissent à peu près égaux : une luminosité OKLCH de 50 % paraît aussi claire quelle que soit la teinte, ce que HSL ne fait pas.
OKLCH et OKLab peuvent aussi décrire des couleurs que les écrans en sRGB ne savent pas afficher. Une telle couleur est ramenée aux valeurs sRGB les plus proches, et le résultat le signale. Le CMJN utilise la formule simple depuis RGB, sans profil de couleur ; les imprimeurs convertissent avec leur propre profil, donc considérez-le seulement comme un point de départ.
Sous les formats figurent le nom de couleur CSS le plus proche, mesuré par la distance dans OKLab (CSS Color 4 retient 0,02 comme la plus petite différence perceptible), ainsi que cinq teintes et cinq nuances : la couleur mélangée au blanc ou au noir en sRGB, comme le fait color-mix(in srgb, …) en CSS. Cliquez sur l’une d’elles pour la copier. Tout se calcule dans votre navigateur.
Exemple
#4169e2 est à un pas de royalblue (#4169e1) : leur écart, 0,002, est très inférieur à 0,02, la plus petite différence perceptible.
#1a73e8rgb(26 115 232), hsl(214.1 81.7% 50.6%) et oklch(57.37% 0.1946 257.86).#4169e2Nom le plus proche royalblue (#4169e1), à une distance de 0,002, sous 0,02.oklch(70% 0.4 150)Trop saturé pour le sRGB : affiché comme #00d600, la couleur la plus proche qu’un écran peut montrer.rgb(26 115 232 / 50%)#1a73e880 : les deux derniers chiffres portent l’opacité, 80 en hexadécimal, soit 128 sur 255.
Questions fréquentes
Quelle différence entre HSL et OKLCH ?
Les deux utilisent la teinte, mais la luminosité HSL n’est pas celle que voit l’œil : hsl(60 100% 50%) est jaune et hsl(240 100% 50%) bleu, tous deux à 50 %, alors qu’en OKLCH le jaune a une luminosité de 96,8 % et le bleu de 45,2 %. OKLCH conserve la luminosité perçue quand la teinte change, ce qui le rend plus adapté aux gammes de couleurs.
Pourquoi le CMJN diffère-t-il de celui de mon imprimeur ?
L’impression dépend du papier, des encres et de la machine, que décrit un profil de couleur. Cet outil utilise la formule sans profil : l’imprimeur convertira depuis le RGB avec ses propres réglages.
Que signifient les codes hex à 8 chiffres ?
Les deux derniers chiffres sont l’opacité : ff est totalement opaque et 00 totalement transparent. #1a73e880 est la couleur #1a73e8 à environ 50 %.
rgb(26, 115, 232) est-il identique à rgb(26 115 232) ?
Oui. La forme avec virgules est l’ancienne syntaxe CSS ; la forme avec espaces vient de CSS Color 4 et écrit la transparence après une barre oblique, comme dans rgb(26 115 232 / 50%). Les navigateurs acceptent les deux.
Ma couleur est-elle envoyée quelque part ?
Non. La conversion se fait dans votre navigateur.