Convertisseur HSL↔HSV
Faites passer une couleur du HSL des graphistes au HSV des logiciels d’image : hsl(210, 80%, 45%) garde la teinte 210 et prend une valeur de 81 %, avec une saturation recalculée pour le nouveau modèle. Cela marche dans les deux sens. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Sens de conversion
- hsl_to_hsv
- H
- 210
- S
- 80
- L
- 45
- S entrée
- 80
- S
- 88,8888888889
- Tension (V)
- 81
HSL et HSV sont deux modèles de couleur cylindriques qui partagent le même angle de teinte sur la roue, mais traitent différemment le deuxième et le troisième axes : HSL utilise la saturation et la luminosité, tandis que HSV utilise la saturation et la valeur (luminosité maximale). Les concepteurs choisissent souvent les couleurs en HSL car la luminosité se rapproche du noir et du blanc de façon symétrique ; en revanche, les moteurs de jeu, les éditeurs d'images et de nombreux pipelines vidéo parlent en HSV car la valeur correspond plus directement à la luminosité maximale du canal. Ce convertisseur prend un sens — HSL vers HSV ou HSV vers HSL —, la teinte en degrés de 0 à 360, la saturation en pourcentage et la luminosité ou la valeur en pourcentage de 0 à 100, puis renvoie le triplet converti avec les deux objets de modèle renseignés.
Comment HSL et HSV se relient sur la même teinte
La teinte est partagée : 0 degrés est le rouge pur, 120 le vert pur, 240 le bleu pur et 360 referme le cercle sur le rouge. Les modèles divergent sur la façon dont la vivacité et la luminosité sont stockées. En HSL, la luminosité va du noir à 0 pour cent en passant par un ton moyen pur près de 50 pour cent jusqu'au blanc à 100 pour cent, et la saturation HSL étire un gris de cette luminosité vers la couleur pleinement chromatique à la teinte choisie.
En HSV, la valeur est le maximum des canaux RVB sous-jacents sur une échelle unitaire, de sorte qu'une valeur à 100 pour cent est la couleur la plus brillante de cette teinte et saturation, et une valeur à 0 pour cent est toujours noire quelle que soit la saturation. Comme les géométries diffèrent, la saturation numérique en HSL n'est pas le même nombre que la saturation numérique en HSV pour la plupart des couleurs, même lorsque la couleur perçue correspond après conversion.
Le chemin de forme fermée utilisé ici opère sur l'intervalle unitaire : pour HSL vers HSV, la valeur égale la luminosité plus la saturation HSL multipliée par le minimum entre luminosité et un moins luminosité, et la saturation HSV vaut 0 lorsque la valeur est 0 ; sinon deux fois un moins luminosité divisé par la valeur.
Pour HSV vers HSL, la luminosité égale la valeur multipliée par un moins la moitié de la saturation HSV, et la saturation HSL vaut 0 au noir ou au blanc ; sinon l'écart entre valeur et luminosité divisé par le minimum entre luminosité et un moins luminosité. La teinte est copiée inchangée. La teinte doit se situer dans l'intervalle fermé de 0 à 360 ; saturation, luminosité et valeur doivent chacune se situer entre 0 et 100 pour cent inclus.
Où la conversion HSL vers HSV apparaît dans le travail réel
Les systèmes de design rédigent souvent les rampes de marque en HSL afin que les équipes produit puissent faire progresser la luminosité pour un contraste accessible tout en gardant stables la teinte et une bande de saturation perceptuelle ; or les thèmes mobiles natifs, les sélecteurs de matériaux Unity et Unreal, et de nombreuses bibliothèques graphiques attendent HSV ou HSB pour des commandes de luminosité orientées artiste.
Les outils de visualisation de données et d'art génératif qui exposent une roue de teinte avec un curseur de valeur ont besoin d'une inverse fiable lors de l'export de jetons stockés en propriétés personnalisées HSL. Les pipelines vidéo et de diffusion qui documentent les couleurs en HSV pour l'étalonnage caméra ont encore besoin de HSL pour alimenter le CSS et la documentation de design.
Les cursus et bootcamps enseignent les modèles cylindriques côte à côte et ont besoin d'un oracle de confiance unique pour des clés d'exercices qui correspondent aux identités des manuels. Si vous avez ensuite besoin de HSL vers RVB, de conversion multi-format HEX LAB CMYK ou de contrôles de contraste WCAG, traitez-les comme des intentions de recherche et des pages d'atterrissage distinctes plutôt que de surcharger cette page dédiée au convertisseur HSL vers HSV.
Cas d’usage
Jetons de design entre outils HSL et HSV
Convertissez des rampes de marque HSL en triplets HSV pour thèmes mobiles, sélecteurs de matériaux de jeu et éditeurs d'images qui exposent la valeur plutôt que la luminosité.
Tables de paramètres de moteur et de shaders
Mappez des échantillons HSV d'artistes vers HSL pour les systèmes de design CSS et les tableaux de documentation qui doivent rester bit-stable entre pipelines.
Questions fréquentes
Quelles plages acceptent la teinte, la saturation, la luminosité et la valeur ?
La teinte h doit être entre 0 et 360 degrés inclus. La saturation s, la luminosité l et la valeur v sont des pourcentages de 0 à 100.
La saturation HSL est-elle le même nombre que la saturation HSV ?
Non. Les modèles définissent la saturation différemment. Ce convertisseur applique les identités de forme fermée pour que la couleur résultante corresponde, tandis que les valeurs numériques de S diffèrent en général.
La teinte change-t-elle entre HSL et HSV ?
Non. La teinte est partagée par les deux modèles et est copiée inchangée. Seules la saturation et l'axe luminosité ou valeur sont recalculés.
Quel est le coût ?
L'outil du navigateur est gratuit et s'exécute localement.
Que donne hsl(210, 80%, 45%) en HSV ?
La teinte reste à 210 et la valeur passe à 81 %. La saturation dépasse les 80 % d’origine, car le HSV mesure la vivacité de la couleur autrement que le HSL.
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/hsl-hsv \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"direction":"hsl_to_hsv","h":210,"s":80}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-hsv", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"direction": "hsl_to_hsv",
"h": 210,
"s": 80
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-hsv",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"direction": "hsl_to_hsv",
"h": 210,
"s": 80
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-hsv", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"direction":"hsl_to_hsv","h":210,"s":80}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"direction":"hsl_to_hsv","h":210,"s":80}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-hsv", 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
{
"direction": "hsl_to_hsv",
"h": 210,
"s": 80
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_hsv",
"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
Les canaux hors des plages légales échouent avec une erreur claire invalid_input, afin que les jetons incorrects ne soient jamais enveloppés ni écrêtés sans avertissement.
Comment HSL et HSV se relient sur la même teinte
Le pipeline est une arithmétique en virgule flottante pure, sans graines aléatoires, sans horodatages d'horloge et sans appels réseau, de sorte que des entrées identiques produisent toujours le même JSON.
Ce que vous envoyez et ce que vous recevez en retour
Les contrôles classiques incluent le rouge moyen pur en HSL avec teinte 0, saturation 100 et luminosité 50 mappant vers une valeur HSV 100 avec saturation pleine ; le noir comme luminosité 0 ou valeur 0 s'effondrant en noir achromatique ; et les gris à saturation 0 mappant vers saturation 0 dans l'autre modèle, avec valeur ou luminosité suivant l'axe de luminosité source. Utilisez le formulaire gratuit du navigateur pour l'exploration de palettes et les revues de design, puis appelez le contrat identique depuis des scripts lorsque vous avez besoin d'une conversion en masse de jetons de design ou de matériaux de moteur. Envoyez une chaîne de sens hsl_to_hsv ou hsv_to_hsl, une teinte finie h en degrés et une saturation finie s en pourcentage dans le modèle source. Lorsque le sens est hsl_to_hsv vous devez aussi envoyer la luminosité l en pourcentage de 0 à 100 ; lorsque le sens est hsv_to_hsl vous devez envoyer la valeur v en pourcentage dans la même plage. Les champs manquants, les chaînes non numériques, NaN, Infinity et les canaux hors plage échouent avec invalid_input et ne sont pas facturés. En cas de succès pour HSL vers HSV, la réponse renvoie le sens nettoyé, h, la saturation source comme s_in, la luminosité d'entrée l, la saturation HSV de sortie s et la valeur v, des objets imbriqués hsl et hsv, et une courte note de formule. En cas de succès pour HSV vers HSL, la réponse renvoie le sens, h, s_in, la valeur d'entrée v, la saturation HSL de sortie s et la luminosité l, des objets imbriqués hsv et hsl, et la note de formule inverse. Le prix des appels API réussis est la base publiée de $0.002 par élément ; les échecs de validation ne consomment pas le solde prépayé.
Où la conversion HSL vers HSV apparaît dans le travail réel
Les flux d'accessibilité qui ajustent la luminosité perçue en HSL puis remettent à un éditeur basé sur HSV ont encore besoin d'un mappage exact des canaux sans API réservées au navigateur. Comme cette capacité est un moteur de parse pur, le prix de l'API est la base publiée de $0.002 par élément réussi et l'échec de validation ne consomme pas le solde.
Cas d'intégration
Fixtures massives de jetons et de cursus
Automatisez la conversion bidirectionnelle pour fixtures de régression, clés d'exercices et exports de palette avec une API déterministe à $0.002 par élément.
Questions techniques
Que fait le champ de sens de conversion ?
Utilisez hsl_to_hsv lorsque l'entrée est HSL (envoyez h, s et l). Utilisez hsv_to_hsl lorsque l'entrée est HSV (envoyez h, s et v). Les autres chaînes de sens sont rejetées.