Color Format Converter traduit toute couleur entre HEX, RGB, HSL, HSV et OKLCH. Choisissez une couleur avec le sélecteur natif, tapez une valeur hexadécimale, collez une chaîne de couleur CSS ou ajustez les curseurs RGB — chaque format se met à jour en direct et possède son bouton Copier.
Le CSS moderne offre une douzaine de façons d'écrire la même couleur : #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus les variantes alpha de chacun. Vous devez souvent convertir entre eux — un design Figma vous donne un OKLCH, votre code utilise du HEX et vos variables de thème préfèrent le HSL. Color Format Converter regroupe toutes les conversions dans un seul panneau. Choisissez une couleur, collez une syntaxe existante ou manipulez les curseurs RGB. Chaque format courant s'affiche simultanément : HEX (avec alpha), rgb()/rgba(), hsl()/hsla(), hsv() et oklch() — plus un extrait de variable CSS et la valeur de luminance calculée. Le canal alpha est pris en charge de bout en bout. Chaque format a son bouton Copier d'un clic, et l'analyseur accepte les noms de couleurs natifs et tout ce que le CSS prend en charge.
Affiche HEX, RGB/RGBA, HSL/HSLA, HSV et OKLCH simultanément — choisissez le format attendu par votre code sans avoir à convertir à nouveau.
Accepte le HEX (#abc ou #aabbcc), rgb()/rgba(), hsl()/hsla(), oklch() et les noms de couleurs natifs. Collez tout ce que le CSS prend en charge.
Gère le nouveau format OKLCH utilisé dans le CSS moderne — un espace colorimétrique perceptuellement uniforme qui devient le nouveau standard des systèmes de design.
Chaque sortie a son bouton Copier. Cliquez pour récupérer exactement le format dont vous avez besoin pour votre code.
Ajustez les curseurs Rouge/Vert/Bleu/Alpha pour un réglage fin. Chaque format se met à jour en temps réel lors du déplacement.
La transparence est gérée dans chaque format : #RRGGBBAA, rgba(...), hsla(...). Définie une fois, convertie partout.
Figma vous donne un OKLCH ou HSL — collez-le, copiez l'équivalent HEX pour votre configuration Tailwind ou vos variables CSS sans quitter le navigateur.
Utilisez les curseurs pour explorer les nuances, en notant les valeurs OKLCH pour une palette de système de design systématique.
Convertissez une couleur de marque en sa forme HSL afin de pouvoir utiliser hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) pour les états de survol.
Le champ luminance vous donne la valeur brute utilisée dans les calculs de contraste WCAG — utile pour les mathématiques de l'accessibilité.
Collez un oklch(...) d'un fichier CSS que vous lisez et voyez instantanément quelle couleur il produit réellement.
Cliquez sur l'icône Color Formats dans le dock DevSuite Pro. Un panneau s'ouvre avec un sélecteur de couleur, une entrée hexadécimale et des curseurs RGB.
Utilisez le sélecteur, tapez un hex ou collez toute chaîne CSS (rgb(...), oklch(...), etc.). La couleur s'affiche instantanément.
Chaque format est affiché en dessous : HEX, RGB, HSL, HSV, OKLCH, variable CSS et luminance. Tout reste synchronisé.
Déplacez les curseurs R/G/B/A pour des réglages fins. Idéal pour trouver une nuance précise qui correspond à un design.
Cliquez sur Copier sur la ligne du format souhaité — la valeur arrive dans votre presse-papiers avec la syntaxe correcte.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
