Convertisseur HEX en HSL
Qu'est-ce que Convertisseur HEX en HSL
Cet outil convertit les codes couleur HEX (comme #3B82F6) en valeurs HSL (comme hsl(217, 91%, 60%)). HSL signifie Teinte, Saturation et Luminosité — un modèle de couleur plus intuitif pour les designers. Ajuster la luminosité en HSL est beaucoup plus simple qu'en HEX ou RGB, idéal pour créer des palettes de couleurs et des propriétés CSS personnalisées.
Comment utiliser
- Tapez ou collez un code HEX dans le champ HEX (avec ou sans #).
- Les valeurs HSL et RGB apparaissent instantanément.
- Cliquez sur le bouton copier à côté de HSL pour copier au format hsl(h, s%, l%).
- Changez entre les 6 convertisseurs avec les liens de mode en haut.
Quand l'utiliser
Vous bâtissez un système de couleurs à partir d'une couleur de marque ? Collez le HEX de la marque (#E63946) et obtenez hsl(356, 75%, 56%). Vous créez ensuite des nuances plus claires en augmentant la luminosité et plus sombres en la baissant, tout en gardant la même teinte.
Questions fréquentes
Qu'est-ce que HSL et pourquoi l'utiliser plutôt que HEX?
HSL (Teinte, Saturation, Luminosité) décrit les couleurs en termes intuitifs. La Teinte est la position sur la roue chromatique (0–360°), la Saturation est l'intensité (0–100%) et la Luminosité est la clarté (0–100%). Il est bien plus facile de créer des variations de couleur en HSL qu'en HEX.
Que vaut #FF0000 en HSL?
Rouge pur #FF0000 est hsl(0, 100%, 50%). La teinte 0° est le rouge sur la roue chromatique, 100% de saturation signifie entièrement saturé et 50% de luminosité correspond à la couleur pure.
CSS prend-il en charge les couleurs HSL?
Oui. Le CSS moderne prend entièrement en charge la notation `hsl()` et `hsla()`. Par exemple: `color: hsl(217, 91%, 60%);` et `background: hsla(217, 91%, 60%, 0.5);`
Que vaut #000000 en HSL?
Noir (#000000) est hsl(0, 0%, 0%). Une luminosité à 0% signifie noir pur quelle que soit la teinte ou la saturation.
Puis-je partager cet outil avec mes données pré-remplies ?
Oui. L'URL se met à jour pendant que vous tapez. Copiez le lien depuis la barre d'adresse ou utilisez le bouton Partager — quiconque l'ouvre verra vos données déjà remplies.
Outils connexes
Convertisseur HSL en HEX
Convertissez des valeurs de couleur HSL en codes HEX instantanément. Convertisseur HSL en HEX avec aperçu en direct. Convertissez hsl() en HEX pour CSS.
Calculateur de Ratio d'Aspect
Calculez le ratio d'aspect, trouvez la largeur ou la hauteur manquante et redimensionnez images et vidéos en gardant les proportions. Gratuit.
Décodeur Base64
Décodez des chaînes Base64 en texte brut instantanément. Supporte la sortie Unicode complète avec emojis. Décodeur Base64 gratuit.