Convertisseur HSL : HSL vers HEX & RGB avec curseurs | 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.

A Oui, mais le mélange se fait de votre côté. Choisissez votre première couleur avec les curseurs, copiez son code HEX, puis ajustez les curseurs pour la deuxième couleur. Pour un dégradé CSS harmonieux, gardez les teintes à moins de 30 degrés d'écart et variez la luminosité d'au moins 20%. Astuce : réglez les deux saturations entre 50 et 70% pour des transitions riches. Insérez les deux codes HEX dans votre propriété de dégradé : 'background: linear-gradient(#HEX1, #HEX2)'.

A Cette plage n'est pas arbitraire — elle suit le concept original de la roue chromatique. Le rouge se situe à 0°, le vert à 120° et le bleu à 240°, donc 360° boucle parfaitement vers le rouge. Je sais que parcourir chaque degré semble excessif, mais cela offre une précision au niveau du pixel. Pour la plupart des designs, des pas de 5 ou 10° suffisent largement. Essayez de maintenir la touche Maj enfoncée en faisant glisser le curseur, et il s'alignera automatiquement sur ces plus grands intervalles.

A Oui, et c'est plus fiable que de deviner. Ouvrez la capture dans un éditeur d'image doté d'une pipette, puis échantillonnez le pixel exact visé. Vous obtenez une valeur RVB. Saisissez ces trois chiffres dans les champs RVB de notre convertisseur, et vous verrez instantanément le découpage HSL ainsi que le code HEX correspondant. Ça fonctionne très bien pour les logos, photos ou maquettes UI. Astuce : capturez à 100% de zoom, sinon vous capterez des pixels lissés qui faussent la couleur.