Convertisseur de couleurs

    Convertissez les nuances chromatiques entre les formats HEX, RGB, HSL, HSV, CMYK et l'espace moderne OKLCH. Ajustez l'opacité et visualisez les palettes en temps réel.

    Aperçu de la couleur
    Saisissez une couleur valide pour afficher l'aperçu en direct

    Formats convertis

    6 formats
    —
    —
    —
    —
    —
    —

    Palette de couleurs

    Cliquez sur une nuance pour la charger dans le convertisseur

    Renseignez une couleur valide pour générer la palette

    Mode d'emploi

    Suivez ces étapes simples pour obtenir les meilleurs résultats.

    1Saisissez ou collez une valeur de couleur : HEX, RGB, RGBA, HSL, HSLA ou OKLCH, le format est détecté automatiquement.
    2Utilisez le sélecteur de couleur visuel en cliquant sur la pastille chromatique pour choisir une teinte à l'écran.
    3Explorez les nuances : activez les onglets Tailwind, Ombres, Teintes ou Tons pour générer une palette déclinée en 11 nuances.
    4Cliquez sur n'importe quel échantillon de la palette pour charger instantanément cette variation de couleur.
    5Copiez les formats convertis : chaque champ dispose d'un bouton de copie dédié (HEX, RGBA, OKLCH, etc.).
    6Réinitialisez d'un simple clic pour effacer les champs et redémarrer à neuf.

    Foire aux questions

    Trouvez des réponses aux questions fréquentes sur cet outil.

    Le convertisseur prend en charge les six formats majeurs du web : HEX (#2563eb), RGB (rgb(37, 99, 235)), RGBA avec transparence alpha, HSL (hsl(221, 83%, 53%)), HSLA et l'espace perceptuel moderne OKLCH. Collez n'importe quelle valeur pour voir tous les formats s'actualiser.

    L'OKLCH est un espace colorimétrique moderne défini dans le module CSS Color Level 4. Il décrit la couleur en s'accordant fidèlement à la vision humaine (Luminosité, Chrominance, Teinte). Deux couleurs dotées de la même valeur L présentent la même clarté perçue par l'œil, idéal pour bâtir des design systems accessibles.

    La pastille située près du champ de saisie ouvre un sélecteur interactif complet avec spectre visuel, palette de base et outil pipette. Toute modification ajuste instantanément les six formats de sortie.

    Les sélecteurs classiques opèrent dans l'espace sRGB restreint. L'OKLCH englobe un spectre visible plus vaste (gamuts P3 et Rec. 2020), offrant des nuances plus éclatantes sur les écrans modernes.

    L'alpha définit l'opacité : 1 représente une opacité totale et 0 une transparence absolue. Par exemple, rgba(37, 99, 235, 0.5) applique une transparence de 50 %.

    Le format HEX à six caractères assure une compatibilité universelle sur l'ensemble des navigateurs et outils de design. Si une transparence est nécessaire, orientez-vous vers les formats RGBA ou HSLA.

    Elle génère automatiquement une déclinaison en 11 nuances autour de votre couleur : échelle Tailwind (50 à 950), ombres foncées, teintes claires ou tons désaturés, avec copie facile de chaque code HEX.

    Totalement. Tous les calculs s'exécutent dans votre navigateur en JavaScript. Aucune couleur de marque ou token interne n'est expédié sur un serveur.

    Comment ça fonctionne

    Comprenez la méthodologie, les formules et les principes fondamentaux de cet outil.

    Convertissez instantanément vos couleurs entre HEX, RGB, HSL et OKLCH

    Les graphistes et intégrateurs web travaillent continuellement avec des outils aux vocabulaires chromatiques différents : Figma privilégie l'HEX, les feuilles de style CSS aiment le HSL, React préfère souvent le RGBA et les design systems modernes adoptent l'OKLCH. Notre convertisseur de couleurs gratuit rassemble ces formats en un écran unique et fluide.

    Les six formats essentiels du web moderne

    HEX est la syntaxe historique d'Internet. Un code à six caractères comme #2563eb est compris par tous les navigateurs et outils de création graphique du monde.

    RGB (Rouge, Vert, Bleu) traduit directement le fonctionnement des sous-pixels lumineux de nos écrans numériques, avec trois canaux variant de 0 à 255.

    RGBA enrichit le RGB d'un canal alpha pour la transparence (de 0 à 1), indispensable pour les fenêtres modales, verres dépolis et ombrages.

    HSL (Teinte, Saturation, Luminosité) est une représentation intuitive de la couleur sur une roue chromatique de 0 à 360 degrés, idéale pour créer des variantes coordonnées en CSS.

    HSLA applique la transparence alpha au format HSL.

    OKLCH incarne l'avenir du design web. Standardisé dans CSS Color 4, il s'aligne sur la perception biologique de l'œil humain : faire varier la luminosité à teinte égale ne produit aucune dérive de couleur parasite.

    Utilité concrète au cœur de vos projets

    Passerelle maquette vers code : transcrivez les codes HEX reçus des designers en valeurs HSL ou OKLCH pour alimenter vos variables CSS thématiques.

    Conformité d'accessibilité WCAG : l'espace OKLCH prédit avec fiabilité le contraste ressenti, facilitant l'ajustement des ratios de contraste pour la lisibilité.

    Création de thèmes sombres : convertir vos couleurs en HSL permet d'inverser méthodiquement la composante de clarté sans déformer l'identité graphique initiale.

    Palettes interactives : Tailwind, ombres, teintes et tons

    Pour chaque couleur renseignée, l'outil déploie une gamme d'harmonies en 11 paliers :

    • Tailwind : génère l'éventail complet des poids Tailwind CSS (50, 100, 200 jusqu'à 950).
    • Ombres (Shades) : produit 10 variantes assombries en diminuant la clarté jusqu'à 5 %.
    • Teintes (Tints) : propose 10 déclinaisons éclaircies jusqu'à 95 %.
    • Tons (Tones) : module la saturation vers le gris neutre.

    Traitement local et instantané

    Toutes les matrices de conversion s'exécutent en local sur votre ordinateur en quelques microsecondes, sans latence réseau et avec un fonctionnement garanti hors ligne.

    Dernière mise à jour :

    Convertisseurs associés

    Découvrez d'autres calculateurs et outils pour accélérer votre travail.

    Convertisseur d'unités

    Convertissez instantanément des grandeurs physiques de longueur, poids, température et volume.

    Convertisseur d'horodatage Unix

    Convertissez les horodatages Unix en dates lisibles et explorez le temps Epoch instantanément.

    Convertisseur SVG en React JSX

    Convertissez instantanément du code SVG brut en composants React JSX optimisés.

    Compresseur d'images

    Compressez et optimisez des images JPG, PNG et WebP sans perte de qualité visible.