Aller au contenu
Allin
S'inscrire · Se connecter

Convertisseur de couleurs

Convertis une couleur en HEX, RGB, HSL, HSV, CMYK, LAB et OKLCH, contraste inclus.

Outils similaires

Tous les outils : Couleurs & CSS →
Générateur de faviconCrée un favicon à partir d'une lettre, avec couleurs, et télécharge-le en PNG.Convertisseur d'imageConvertis tes images vers PNG, JPG, WebP, AVIF, BMP, GIF, TIFF ou ICO, par lot et sans rien envoyer en ligne.Vérificateur de contraste des couleursRapport de contraste WCAG entre texte et fond, avec réussite/échec AA/AAA et un aperçu en direct.Inverseur de couleurInverse une couleur (255 − RGB) ou prends sa complémentaire, en HEX/RGB/HSL/CMYK avec le contraste.Générateur de palette harmoniqueDérive des harmonies complémentaire, analogue, triadique, tétradique, divisée et monochromatique d'une couleur de base.Pipette à couleur d'imageCharge une image, clique pour prélever un pixel et extraire une palette dominante, avec HEX et RGB pour chaque teinte.

Ce convertisseur de couleurs gratuit transforme n'importe quelle couleur entre HEX, RGB et HSL instantanément dans ton navigateur. Saisis une valeur dans un format et lis-la dans tous les autres, prête à coller dans du CSS, un outil de design ou ton code. Idéal pour respecter des couleurs de marque, créer des palettes et ajuster des teintes sans tâtonner.

Comment l'utiliser

  1. Saisis une couleur en HEX, RGB ou HSL.
  2. Lis les valeurs équivalentes dans tous les autres formats.
  3. Copie le format voulu dans ton projet.

Questions fréquentes

Comment convertir HEX en RGB ?

Une couleur HEX comme #4287f5 se lit en trois paires — rouge (42), vert (87), bleu (f5) — chacune convertie en nombre de 0 à 255. Cet outil fait la conversion pour toi instantanément.

Qu'est-ce que le HSL ?

HSL signifie Teinte (Hue), Saturation et Luminosité (Lightness). Souvent plus pratique que RGB pour ajuster une couleur : montez la luminosité pour éclaircir, baissez la saturation pour atténuer, décalez la teinte pour changer de couleur.

Quelle différence entre HEX et RGB ?

Ils décrivent la même couleur — le HEX est une notation compacte en base 16 (#ff0000), le RGB liste les canaux en décimal (rgb(255,0,0)). Les deux sont pris en charge en CSS.

Puis-je utiliser ces valeurs en CSS ?

Oui. HEX, rgb() et hsl() sont toutes des valeurs de couleur CSS valides — copie celle qui convient à ta feuille de style ou design system.

Qu'est-ce que Convertisseur de couleurs ?

Convertis une couleur en HEX, RGB, HSL, HSV, CMYK, LAB et OKLCH, contraste inclus.

Dans quels cas s'en sert-on concrètement ?

Faire passer une couleur d'un outil de design à une feuille de style, construire une palette autour d'une couleur de marque, et vérifier qu'un texte y restera lisible.

Quelle est l'erreur la plus fréquente ?

Juger le contraste à l'œil. Deux couleurs qui paraissent distinctes sur un écran lumineux peuvent échouer nettement au rapport d'accessibilité — et c'est ce rapport qu'un audit mesurera.

En quoi Convertisseur de couleurs diffère-t-il de Vérificateur de contraste des couleurs ?

Ils se ressemblent mais répondent à des questions différentes : Vérificateur de contraste des couleurs est celui à ouvrir lorsqu'il s'agit de rapport de contraste WCAG entre texte et fond, avec réussite/échec AA/AAA et un aperçu en direct. Choisis celui qui correspond à ton point de départ — les deux sont gratuits.

Existe-t-il un outil pour l'étape suivante ?

Inverseur de couleur est le plus proche après celui-ci : Inverse une couleur (255 − RGB) ou prends sa complémentaire, en HEX/RGB/HSL/CMYK avec le contraste.

Quels autres outils vaut-il la peine d'ouvrir à côté ?

Générateur de palette harmonique et Pipette à couleur d'image — ils reviennent assez souvent dans la même tâche pour mériter un second onglet.

Pour aller plus loin

Tous les guides →
TutorielHEX vs RGB : lire et convertir les couleursHEX et RGB sont deux notations des mêmes couleurs. Voici comment lire chacune, convertir de l'une à l'autre et ajouter de la transparence.ExplicationRapport de contraste : comment le WCAG le calcule vraimentLe rapport WCAG vaut (L1 + 0,05) ÷ (L2 + 0,05), et L est la luminance relative, pas la luminosité. Le vert en porte 71,52 % et le bleu 7,22 %, d'où le bleu pur sur blanc qui passe à 8,59:1 tandis que le gris moyen échoue à 3,95:1. Voici tout le calcul, exécuté de bout en bout.ExplicationDégradés, banding, et pourquoi le milieu paraît terneInterpoler en sRGB revient à moyenner des nombres encodés en gamma : le milieu de rouge à vert vaut #808000 alors que la réponse à mi-lumière est #bcbc00 — 57,2 % de lumière en moins. Le banding est un autre problème d'arithmétique : 8 bits donnent 256 paliers, et un dégradé sombre peut n'en avoir que 28. Voici les deux, calculés.ExplicationLes harmonies de couleurs sont de la géométrie sur une roue — et la roue est fausseComplémentaire, triadique, analogue et complémentaire divisée ne sont que des rotations : ajoute 180°, 120°, 30° ou 150° à une teinte. L'arithmétique est triviale. Le problème, c'est que le cercle de teintes HSL n'est pas perceptuellement uniforme — le jaune et le bleu à la même clarté HSL diffèrent d'un facteur 12,85 en luminance — donc une palette générée doit être vérifiée en contraste ensuite.GuideCe qu'un minifieur peut retirer, et ce qu'il ne doit pas toucherLa minification doit préserver le sens, et l'intéressant, ce sont les espaces qui portent du sens : le combinateur de descendance, les espaces dans calc(), l'écart entre deux éléments en ligne. Mesuré ici sur de vrais fichiers, y compris ce que brotli te faisait déjà gagner.GuideEmbellir ou minifier : à quoi sert chacun, et ce que ça change au poidsQuatre vraies feuilles de style passées au minifieur, mesurées brutes puis après gzip. Retirer toutes les espaces a fait gagner 48, 103, 104 et 147 octets compressés ; retirer les commentaires, 57, 1 358, 2 420 et 1 042. Et les cinq entrées que ce minifieur casse.