Comment convertir HEX vers RGB, HSL, OKLCH et CMYK ?
Tape une couleur dans un format : l'outil affiche en direct tous les autres formats : HEX, RGB, HSL, HSV, OKLCH, LCH, Lab, CMYK.
Plus une pipette d'écran (Chrome / Edge) : clique sur n'importe quel pixel de ton bureau (marche aussi hors fenêtre du navigateur).
Tout tourne en local : les couleurs ne quittent jamais le navigateur.
Conçu pour les développeurs web (HEX/RGB/OKLCH pour CSS), le travail PAO (CMYK pour impression), les coloristes (Lab/LCH pour la math de différence de couleur).
Comment l'utiliser
- Tape une couleur dans le champ HEX (colonne de gauche) ou utilise la pipette : « Prendre depuis l'écran » échantillonne n'importe quel pixel de ton bureau.
- À droite, chaque format se met à jour en direct : RGB, HSL, HSV, OKLCH, LCH, Lab, CMYK. Chaque bloc a des curseurs de canaux : éditer un format met à jour les autres.
- Chaque bloc a un bouton « Copier » : copie la chaîne prête pour CSS (par exemple `oklch(0.51 0.18 264.5)`).
- « Nom CSS le plus proche » sous l'échantillon affiche de quelle couleur CSS nommée tu es le plus proche (par exemple mediumslateblue).
- En bas du panneau de gauche : 8 couleurs Tailwind populaires en préréglages : super pour démarrer une palette.
Quand c'est utile
Qui bénéficie du convertisseur de couleurs, rôles typiques :
- Développeur web : tu as récupéré un HEX depuis Figma, il te faut de l'OKLCH pour le CSS moderne. Colle et c'est fait.
- PAO / impression : HEX de charte graphique, l'imprimeur veut du CMYK. Note : le nôtre est approximatif : pour la production prépresse, utilise le profil ICC de l'imprimeur.
- Migration vers OKLCH : Tailwind v4 et Radix Colors utilisent OKLCH. Conversion facile d'une vieille palette HEX vers le format moderne.
- Coloriste : Lab et LCH sont le standard ΔE 2000 (différence de couleur). Exporte vers ta math.
- Branding : OKLCH montre que la teinte (h) reste cohérente à travers les changements de lightness, contrairement à HSL.
Une fois ta couleur de base trouvée, construis une échelle complète 50-950 dans le générateur de palette Tailwind, trouve des accents assortis avec l'outil d'harmonie de couleurs, et vérifie ta paire texte/fond contre WCAG dans le vérificateur de contraste.