Convertisseur hex vers HSL
Transformez un code hex en valeurs que l’on règle à l’œil : #FF8040 correspond à une teinte de 20,1°, une saturation de 100 % et une luminosité de 62,55 %, à coller tel quel en hsl(20.1 100% 62.55%). Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Hexa
- #FF8040
- Chiffres hex
- FF8040
- Résistance (Ω)
- 255
- G
- 128
- B
- 64
Les designers, développeurs front-end et systèmes de marque stockent souvent les couleurs en codes hex tels que #FF8040 ou la forme courte #f80, mais ont besoin de teinte, saturation et luminosité pour ajuster le ton sans dériver la luminosité, construire des variables CSS ou alimenter des jetons de design sensibles à la couleur. Ce convertisseur hex vers HSL accepte un code couleur hexadécimal à trois ou six chiffres avec ou sans dièse initial, développe les formes abrégées comme le fait CSS, exécute une conversion déterministe de type sRGB et renvoie la teinte en degrés plus saturation et luminosité en pourcentages, avec des chaînes CSS hsl modernes et héritées à coller dans les feuilles de style. Les codes hex invalides—mauvaise longueur, caractères non hex ou champ manquant—échouent avec une erreur claire d’entrée invalide afin que de mauvaises données ne deviennent jamais un clamp silencieux.
Saisir un code hex et ce que calcule la conversion
Fournissez un champ chaîne nommé hex avec un code couleur hexadécimal à trois ou six chiffres. Un dièse initial est optionnel, donc #FF8040 et FF8040 sont acceptés, de même que les formes courtes #f80 et f80. La casse est ignorée : minuscules, majuscules et chiffres mixtes se normalisent au même résultat.
Les codes à trois chiffres s’étendent en doublant chaque chiffre—f80 devient FF8800—selon la règle d’abréviation de couleur CSS des navigateurs. Après expansion le moteur analyse deux chiffres hex par canal en entiers rouge, vert et bleu de zéro à 255, puis normalise chaque canal en divisant par 255 pour des valeurs sur l’intervalle unitaire. Il trouve le maximum et le minimum de ces trois composantes normalisées et le chroma comme leur différence.
La luminosité est la moitié de la somme du maximum et du minimum. Lorsque le chroma est zéro la couleur est achromatique : teinte zéro et saturation zéro, ne laissant que la luminosité pour décrire les gris du noir au blanc en passant par le gris moyen. Lorsque le chroma est positif, la saturation est le chroma divisé par un moins la valeur absolue de deux fois la luminosité moins un, la formule standard de saturation HSL utilisée en CSS et dans les piles graphiques.
La teinte se construit à partir du secteur de la roue des couleurs où se situe le canal maximum : dominant rouge, vert ou bleu, mis à l’échelle en degrés dans l’intervalle semi-ouvert de zéro jusqu’à 360.
Cas d’usage
Jetons CSS et de design depuis couleurs hex de marque
Convertissez des nuanciers hex d’outils de design en HSL pour que les thèmes ajustent teinte ou luminosité en gardant des politiques de saturation cohérentes en modes clair et sombre.
Pipelines de palette et de marque
L’automatisation qui part de couleurs hex de marque en tire des composantes HSL pour générer teintes, ombres et variantes d’accent sans accepter silencieusement des codes mal formés.
Questions fréquentes
Comment convertir une couleur hex en HSL avec cet outil ?
La réponse inclut h, s, l, canaux RGB, chaînes CSS et un objet hsl imbriqué.
Que se passe-t-il si le code hex est invalide ?
Seuls 3 ou 6 chiffres hexadécimaux sont acceptés (dièse initial optionnel). Mauvaise longueur ou caractères non hex sont rejetés et non facturés.
Teinte, saturation et luminosité sont-elles des pourcentages ou des fractions 0–1 ?
La teinte est en degrés de 0 jusqu’à 360. Saturation et luminosité sont des pourcentages de 0 à 100, alignés sur l’usage courant de hsl() en CSS.
Puis-je utiliser des codes hex courts à trois chiffres ?
Oui. Des codes comme #f80 s’étendent en #FF8800 en doublant chaque chiffre, selon les règles d’abréviation CSS, puis se convertissent en HSL.
Que donne un gris comme #808080 ?
Ses trois canaux sont égaux, donc la saturation vaut 0 et la teinte aussi. Seule la luminosité décrit alors la couleur, du noir au blanc en passant par le gris moyen.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/color/hex-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#FF8040"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#FF8040"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#FF8040"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#FF8040"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#FF8040"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"hex": "#FF8040"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_hsl",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Saisir un code hex et ce que calcule la conversion
Les alias color, colour, value et hex_code mappent vers le même champ lorsque les clients préfèrent ces noms. Des entrées identiques produisent toujours un JSON identique car le chemin est de l’arithmétique pure sans réseau, sans graine aléatoire et sans horloge murale.
Lire teinte, saturation, luminosité, écho RGB et chaînes CSS
Elle expose ensuite h, s et l pour teinte en degrés, saturation en pour cent et luminosité en pour cent. Le rouge pur #FF0000 donne teinte zéro avec saturation pleine et luminosité moyenne ; le vert pur #00FF00 et le bleu pur #0000FF tombent près de 120 et 240 degrés respectivement ; des canaux égaux comme #808080 produisent des gris à saturation nulle. En succès la réponse inclut la chaîne hex normalisée avec dièse initial et six chiffres majuscules, le champ hex_digits sans le dièse, et les canaux r, g et b développés pour vérifier le parse ou enchaîner vers des outils RGB seuls. Les mêmes trois nombres réapparaissent sous les noms longs hue, saturation et lightness, et imbriqués dans un objet hsl, afin que le code d’UI, les démos SDK et les correcteurs choisissent la forme qui convient sans mappage extra. Deux chaînes prêtes à coller sont incluses : hsl_css utilise la forme moderne CSS Color Module séparée par des espaces telle que hsl(20.1 100% 62.55%), et hsl_legacy utilise la forme classique à virgules et parenthèses encore attendue par les anciens parseurs. Le champ method est toujours hex_to_hsl pour que les routeurs aval puissent brancher sans renifler les formes. Hex manquant, chaînes vides, caractères non hex et longueurs autres que trois ou six chiffres échouent avec invalid_input et ne sont pas facturés après rejet du moteur.
Usage API, tarification, flux de design et limites pratiques
Utilisez le convertisseur hex vers HSL gratuit dans le navigateur pour des retouches de palette, des démos de cours et des vérifications rapides sans installer de bibliothèque de couleur. Préférez ce point de terminaison lorsque l’intention de recherche et le cadrage produit sont spécifiquement hex vers HSL avec validation stricte du code ; pour des triples de canaux RGB utilisez le convertisseur RGB vers HSL dédié, et pour une conversion multi-formats entre HEX, RGB, HSL, LAB et CMYK en un appel utilisez le convertisseur de couleur plus large du catalogue. Associez les sorties HSL à des vérificateurs de contraste pour des thèmes accessibles, ou alimentez des décalages de teinte dans des pipelines de jetons de marque qui gardent la luminosité fixe tout en faisant tourner des accents dérivés d’un nuancier hex de marque. Envoyez un corps JSON avec la chaîne requise hex fixée à un code couleur à trois ou six chiffres. Utilisez l’API prépayée lorsqu’un système de design, un générateur de thèmes, un pipeline d’accessibilité ou un outil couleur e-commerce a besoin d’un contrat stable sous solde KIT à $0.002 par élément réussi ; les échecs de validation ne consomment jamais le solde après rejet du moteur. Les auteurs de SDK peuvent mapper h, s et l directement dans des contrôles de formulaire ou des propriétés personnalisées CSS sans réimplémenter le parse hex et la conversion dans chaque langage.
Cas d'intégration
Enseignement et notation des maths de la couleur
Cours et évaluations de code confrontent les réponses hex→HSL des étudiants à un JSON déterministe, avec invalid_input clair lorsque le code hex est mal formé.
Questions techniques
Le convertisseur hex vers HSL est-il gratuit ?
L’outil navigateur s’exécute gratuitement sur votre appareil. Les appels API utilisent le solde prépayé KIT à $0.002 par élément réussi ; les échecs de validation ne sont pas facturés.