Convertisseur HEX vers HSL

1. Saisissez une couleur HEX à 3 ou 6 chiffres, avec ou sans le # initial, ou choisissez-la avec le sélecteur.
2. Réglez la teinte de 0 à 360 degrés, ou la saturation et la luminosité de 0 % à 100 %.
3. Consultez l’aperçu et les valeurs HEX, HSL et RGB synchronisées.
4. Utilisez le bouton de copie près de la valeur souhaitée.
5. Sélectionnez Réinitialiser pour retrouver la couleur par défaut.

Convertisseur HEX vers HSL

HEX et HSL sont deux façons de représenter la même couleur. HEX encode les canaux rouge, vert et bleu par paires hexadécimales. HSL décrit la teinte, la saturation et la luminosité, ce qui facilite parfois les réglages visuels. Cet éditeur convertit une couleur HEX en HSL et RGB et permet de modifier les valeurs HSL pour créer une variante.

Qu’est-ce que HEX ?

Une couleur HEX standard à six chiffres utilise le format #RRGGBB, avec une paire de chiffres hexadécimaux pour chaque canal rouge, vert et bleu. Par exemple, #4F46E5 correspond aux valeurs RGB 79, 70 et 229. Les couleurs HEX sont courantes en HTML et CSS pour le texte, les arrière-plans, les bordures, les boutons et d’autres éléments d’interface. Le # initial est facultatif dans ce convertisseur.

Qu’est-ce que HSL ?

HSL signifie teinte, saturation et luminosité. La teinte repère une position sur un cercle chromatique de 360 degrés. La saturation décrit l’intensité, de 0 % (gris neutre) à 100 %. La luminosité indique si la couleur est claire ou foncée : 0 % correspond au noir, 50 % au milieu et 100 % au blanc.

Exemple HEX vers HSL

Saisissez #4F46E5 pour obtenir environ hsl(248, 76 %, 59 %) et rgb(79, 70, 229). Les canaux HSL affichés sont arrondis à des nombres entiers : ils constituent une représentation pratique et non l’affichage de toutes les décimales de la conversion.

Modifier les couleurs en HSL

Après avoir saisi une couleur HEX, modifiez la teinte, la saturation ou la luminosité pour explorer une variante. Augmentez par exemple la luminosité pour éclaircir un arrière-plan ou réduisez la saturation pour adoucir la couleur. L’aperçu et les valeurs HEX, HSL et RGB restent synchronisés : vous pouvez copier le nouveau HEX dans CSS ou un outil de design.

HEX, RGB et HSL

HEX représente les canaux rouge, vert et bleu en notation hexadécimale ; RGB les utilise sous forme de nombres ; HSL utilise la teinte, la saturation et la luminosité. Ce sont différentes représentations de la même couleur. Par exemple, #4F46E5 correspond à rgb(79, 70, 229) et environ à hsl(248, 76 %, 59 %).

Valeurs HEX prises en charge et validation

L’éditeur accepte les couleurs HEX à 3 ou 6 chiffres, avec ou sans #. Il ne propose pas de conversion distincte pour le HEX à 8 chiffres ni pour la transparence. La teinte doit être comprise entre 0 et 360 degrés ; la saturation et la luminosité entre 0 % et 100 %. Les valeurs incorrectes affichent une erreur jusqu’à leur correction.

Quand utiliser un convertisseur HEX vers HSL

Convertissez une couleur CSS existante en HSL, ajustez une couleur de marque pour un état de survol ou actif, créez des couleurs d’interface plus claires ou plus douces, composez une palette ou comparez les représentations en déboguant du CSS. Modifiez directement HSL, puis copiez la valeur HEX, HSL ou RGB mise à jour.

Saisissez une couleur HEX à 3 ou 6 chiffres pour afficher les valeurs HSL et RGB synchronisées avec un aperçu en direct.

Ajustez directement les canaux HSL. La couleur, les valeurs HEX et RGB et l’aperçu se mettent automatiquement à jour.

Saisissez une valeur HEX avec ou sans #, ou choisissez une couleur avec le sélecteur intégré.

Copiez séparément les sorties HEX, HSL ou RGB, ou réinitialisez l’éditeur à sa couleur par défaut.