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

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.

A Ils sont liés mais pas identiques. Le HSL utilise un espace en double cône où la luminosité va du noir au blanc. À L=50%, vous obtenez la teinte la plus pure. Le HSV utilise un cône unique où la luminosité évolue du noir vers la couleur complète. Un jaune vif correspond à HSL(60, 100%, 50%) mais HSV(60, 100%, 100%). Cet outil suit le modèle HSL. Si vous importez des valeurs depuis les curseurs HSV de Photoshop, ajustez manuellement saturation et luminosité. Pour le CSS, le HSL correspond directement à la fonction moderne `hsl()`.

A Idée reçue tenace, mais non. Les deux décrivent exactement la même couleur — HSL(210, 50%, 40%) et son jumeau HEX #336699 sont des valeurs identiques, écrites différemment. La précision dépend de l'écran, pas de la notation. Le HSL reste plus pratique pour ajuster : ajouter 5 % de saturation est plus simple que de deviner des chiffres HEX. Explorez en HSL, puis copiez le code HEX à la fin.

A Les professeurs affichent souvent notre outil pour expliquer comment la saturation modifie une teinte sans changer la base. Tu peux projeter les codes en direct pour montrer qu'une luminosité à zéro donne du noir pur. C'est parfait pour illustrer la théorie des couleurs sans calculs complexes.

A Les services marketing exigent des codes précis pour leurs visuels et prospectus. Vous fixez la couleur principale en entrant le code HEX, puis récupérez les valeurs HSL exactes pour votre charte graphique. Les graphistes augmentent la luminosité de 15 pour cent pour créer un état de survol valide. Partagez toujours ce trio HEX avec vos prestataires externes.