Convertisseur HSL : HSL vers HEX & RGB avec curseurs | Gratuit

A HSL = Teinte, Saturation, Luminosité – un modèle de couleur intuitif.

A Ajustez les curseurs et le code HEX apparaît instantanément.

A Oui, entièrement gratuit.

A Le modèle HSL est idéal pour générer des schémas de couleurs cohérents. Pour créer une palette, sélectionnez une teinte de base, puis explorez facilement les variations en ajustant uniquement les curseurs de saturation et de luminosité. Pour un dégradé CSS fluide, choisissez votre première couleur HSL, puis modifiez subtilement la valeur de la teinte ou de la luminosité pour votre deuxième couleur afin d'assurer une transition sans faille. Le convertisseur fournit instantanément les codes HEX et RGB nécessaires, simplifiant votre flux de travail de conception pour les projets web.

A Oui, absolument ! Notre convertisseur de couleurs HSL vous permet de saisir directement des codes couleurs HEX ou RGB existants. Collez simplement votre valeur HEX (par exemple, #RRGGBB) ou vos valeurs RGB (par exemple, 255, 0, 128) dans les champs de saisie correspondants. L'outil affichera instantanément les valeurs HSL correspondantes, vous permettant de comprendre et d'ajuster facilement la teinte, la saturation et la luminosité de n'importe quelle couleur à l'aide des curseurs intuitifs.

A Pousser le curseur de luminosité à 100 % résultera toujours en blanc, quelles que soient les valeurs de teinte ou de saturation sélectionnées. La luminosité maximale efface complètement toute couleur. Vous verrez le code HEX passer à #FFFFFF et les valeurs RVB devenir 255, 255, 255. C'est un moyen rapide de réinitialiser une couleur à son état le plus lumineux.

A Chaque écran reproduit les couleurs à sa manière. Une teinte HSL éclatante sur votre écran calibré peut sembler terne sur un ordinateur portable non calibré. Ce n'est pas un défaut de l'outil — c'est une question de matériel. Testez votre couleur sur au moins deux appareils avant de finaliser un projet. Pour le web, incluez des valeurs HEX et RGB de secours dans votre CSS.

A Pas directement — cet outil n'a ni bouton de sauvegarde ni fonction d'export. Mais vous pouvez le faire vous-même en deux secondes. Copiez le code HEX qui s'affiche en temps réel quand vous bougez les curseurs, puis collez-le dans votre logiciel de design, un fichier CSS ou une application de notes. Je vous conseille de garder un document à part ouvert pour collecter votre palette au fur et à mesure.

A Ce convertisseur HSL ne gère pas la transparence alpha — il produit uniquement des couleurs pleines. Pour ajouter de l'opacité, associez les codes HEX ou RGB obtenus à un canal alpha séparé en CSS, comme rgba(255, 100, 50, 0.7). L'outil se concentre sur les couleurs opaques, ce qui couvre l'essentiel des besoins courants.

A Pas directement dans ce convertisseur — il n'inclut pas de vérificateur de contraste. Mais voici une astuce : réglez votre couleur d'arrière-plan avec les curseurs, copiez son code HEX, puis faites de même pour la couleur du texte. Saisissez les deux codes HEX dans un calculateur de contraste WCAG gratuit en ligne. Vous avez besoin d'au moins un ratio de 4,5:1 pour le texte normal et 3:1 pour le grand texte. Je garde toujours un onglet de vérification ouvert quand je choisis des couleurs de marque.