Convertisseur de couleurs
Le convertisseur de couleurs gratuit Vivlab traduit instantanément une couleur entre les formats HEX, RGB, HSL et HSV, avec gestion de la transparence (alpha).
Choisissez une couleur avec le sélecteur ou saisissez une valeur : tous les formats se mettent à jour automatiquement.
Couleur actuelle
#483aff
Couleurs prédéfinies
Mode d'emploi
Convertir une couleur en 3 étapes
Choisissez une couleur
Déplacez le curseur dans le carré et sur la barre de teinte, ou collez un code HEX pour partir d'une valeur précise.
Ajustez les valeurs
Affinez chaque canal dans les champs RGB, HSL ou HSV, et réglez l'opacité avec le curseur de transparence.
Copiez le format voulu
Chaque bloc affiche la couleur dans un format, avec un bouton Copier pour la coller dans votre code ou votre maquette.
Comprendre les formats de couleur
Tous ces formats décrivent la même couleur, mais d'une manière différente. Voici à quoi correspond chacun.
HEX (hexadécimal)
La notation la plus courante sur le web. Un # suivi de 6 caractères hexadécimaux (0 à 9 puis A à F) : deux pour le rouge, deux pour le vert, deux pour le bleu, par exemple #483AFF. Deux caractères supplémentaires peuvent coder la transparence (#483AFF80). Compacte et idéale en HTML et CSS.
RGB (Rouge, Vert, Bleu)
Décrit une couleur par l'intensité de trois lumières (rouge, vert et bleu), chacune notée de 0 à 255. C'est le modèle des écrans : rgb(72, 58, 255). En ajoutant un canal alpha pour la transparence, on écrit rgba(72, 58, 255, 0.5).
HSL (Teinte, Saturation, Luminosité)
Pensée comme on perçoit une couleur. La teinte (Hue) situe la couleur sur la roue chromatique (0 à 360°), la saturation indique son intensité (0 à 100 %), la luminosité (Lightness) va du noir au blanc (0 à 100 %). Pratique pour éclaircir, assombrir ou désaturer une teinte.
HSV (Teinte, Saturation, Valeur)
Proche du HSL et fréquente dans les logiciels de design. La teinte et la saturation sont identiques, mais la valeur (Value, aussi appelée brightness) remplace la luminosité : à 0 % la couleur est noire, à 100 % elle est la plus vive possible. C'est le modèle de la plupart des sélecteurs de couleur.
Alpha (transparence)
Le canal alpha définit l'opacité de la couleur, de 0 (totalement transparent) à 100 % (totalement opaque). On le retrouve dans rgba(), hsla() et dans le code HEX à 8 caractères.
Questions fréquentes
Bien comprendre les formats
Quelle différence entre HEX et RGB ?
Les deux décrivent la même couleur en rouge, vert et bleu. RGB l'écrit en trois nombres de 0 à 255, HEX condense ces mêmes valeurs en six caractères hexadécimaux, deux par canal. #FF0000 et rgb(255, 0, 0) sont donc strictement identiques.
À quoi servent HSL et HSV ?
Ils décrivent une couleur par sa teinte (0 à 360°), sa saturation et un troisième réglage : la luminosité pour HSL, la valeur pour HSV. C'est plus intuitif que RGB pour éclaircir ou désaturer une couleur sans changer sa teinte.
Comment gérer la transparence ?
Le curseur de transparence règle le canal alpha, de 0 (invisible) à 100 % (opaque). Dès que l'opacité passe sous 100 %, les blocs RGB et HSL s'écrivent en rgba() et hsla(), avec la valeur alpha en fin de parenthèse.
Quel format utiliser, et où ?
En CSS moderne, les trois notations fonctionnent partout, et HEX reste le plus court à écrire pour une couleur opaque. HSL aide à créer des variantes d'un même ton, tandis que rgba() et hsla() servent dès qu'il faut de la transparence. Pour une identité de marque, gardez une courte liste de codes HEX de référence.
Mes couleurs sont-elles enregistrées quelque part ?
Non. La conversion se fait entièrement dans votre navigateur, sans aucun envoi de données. Rien n'est stocké ni transmis, et vous pouvez travailler hors ligne.
Continuer la découverte