ForHosting KIT · Images

Convertisseur HSV→HSL

Passez une couleur de HSV à HSL sans tâtonner : teinte 210, saturation 70 % et valeur 80 % donnent une luminosité de 52 % sur la même teinte, avec une saturation recalculée pour le HSL. Gratuit dans votre navigateur.

Gratuit
Fonctionne dans votre navigateur
Sans inscription
Vos données restent sur votre appareil

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Exemple résolu

Si vous saisissez

H: 210
S: 70
Tension (V): 80

Vous obtenez

S in: 70
S: 58,3333333333
L: 52

HSV et HSL sont deux modèles de couleur cylindriques qui partagent le même angle de teinte sur la roue, mais stockent la luminosité et la vivacité sur des axes différents. Les moteurs de jeu, les outils vidéo et de nombreux sélecteurs natifs parlent HSV, où la valeur est la luminosité maximale du canal, tandis que les propriétés personnalisées CSS, les design systems et les rampes d'accessibilité préfèrent souvent HSL car la luminosité se rapproche du noir et du blanc de façon symétrique. Ce convertisseur HSV vers HSL accepte la teinte en degrés de zéro à trois cent soixante, la saturation en pourcentage et la valeur en pourcentage de zéro à cent, puis remappe saturation et valeur vers saturation et luminosité HSL en copiant la teinte inchangée.

Comment HSV se mappe vers HSL sur la même teinte

La teinte est partagée par les deux modèles : zéro degré est le rouge pur, cent vingt le vert pur, deux cent quarante le bleu pur, et trois cent soixante referme le cercle sur le rouge. Les modèles divergent sur la façon de stocker vivacité et luminosité.

En HSV, la valeur est le maximum des canaux RGB sous-jacents sur une échelle unitaire, de sorte qu'une valeur à cent pour cent est la couleur la plus brillante de cette teinte et saturation, et qu'une valeur à zéro pour cent est toujours le noir indépendamment de la saturation. La saturation HSV étire un gris de cette valeur vers la couleur pleinement chromatique à la teinte choisie.

En HSL, la luminosité va du noir à zéro pour cent en passant par un demi-ton pur près de cinquante pour cent jusqu'au blanc à cent pour cent, et la saturation HSL étire un gris de cette luminosité vers le chroma plein. Comme les géométries diffèrent, la saturation numérique en HSV n'est pas le même nombre que la saturation numérique en HSL pour la plupart des couleurs, même lorsque la couleur perçue coïncide après conversion.

Le chemin en forme fermée utilisé ici opère sur l'intervalle unitaire : la luminosité égale la valeur multipliée par un moins la moitié de la saturation HSV, et la saturation HSL est nulle au noir ou au blanc ; sinon, l'écart entre valeur et luminosité divisé par le minimum de luminosité et un moins luminosité. La teinte est copiée inchangée. La teinte doit se situer dans l'intervalle fermé de zéro à trois cent soixante ; saturation et valeur doivent chacune se situer entre zéro et cent pour cent inclus.

Où la conversion HSV vers HSL intervient dans le travail réel

Les thèmes natifs mobiles, les sélecteurs de matériaux Unity et Unreal, et de nombreuses bibliothèques graphiques exposent des commandes de luminosité basées sur la valeur ; pourtant les design systems documentent souvent des rampes de marque en HSL pour que les équipes produit puissent faire varier la luminosité pour un contraste accessible tout en gardant stables la teinte et une bande de saturation perceptuelle.

Les outils de visualisation de données et d'art génératif qui stockent les échantillons d'artistes en HSV ont besoin d'un chemin fiable pour exporter des jetons en propriétés personnalisées HSL pour le web. Les pipelines vidéo et broadcast 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 du chemin inverse HSL vers HSV, HSV vers RGB, d'une conversion multi-format HEX LAB CMYK ou de contrôles de contraste WCAG, traitez-les comme des intentions de recherche et des landings séparés plutôt que de surcharger cette page dédiée au convertisseur HSV vers HSL.

Cas d’usage

Échantillons moteur vers jetons HSL CSS

Convertissez des triplets HSV d'artistes issus de moteurs de jeu et de sélecteurs natifs en HSL pour design systems, propriétés personnalisées CSS et tableaux de documentation.

Thèmes mobiles et passage au design

Mappez des couleurs de marque basées sur la valeur depuis des éditeurs de thèmes mobiles vers des rampes HSL que les équipes produit peuvent éclaircir pour un contraste accessible.

Questions fréquentes

Quelles plages acceptent la teinte, la saturation et la valeur ?

La teinte h doit être entre 0 et 360 degrés inclus. La saturation s et la valeur v sont des pourcentages de 0 à 100.

La teinte change-t-elle lors de la conversion HSV vers HSL ?

Non. La teinte est partagée par les deux modèles et est copiée inchangée. Seuls la saturation et l'axe valeur-luminosité sont recalculés.

La saturation HSV est-elle le même nombre que la saturation HSL ?

Non. Les modèles définissent la saturation différemment. Ce convertisseur applique l'identité en forme fermée pour que la couleur résultante coïncide, alors que les valeurs numériques de S diffèrent en général.

Que se passe-t-il au noir ou au blanc plein ?

Lorsque la valeur est zéro, la luminosité est zéro et la saturation HSL est zéro (noir). Près des extrêmes de luminosité du blanc ou du noir purs, la saturation HSL s'effondre à zéro par la formule de l'intervalle unitaire.

Combien coûte le convertisseur HSV vers HSL ?

L'outil navigateur est gratuit et s'exécute en local.

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

POSThttps://api.kit.forhosting.com/color/hsv-hsl

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/hsv-hsl \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"h":210,"s":70,"v":80}'

const res = await fetch("https://api.kit.forhosting.com/color/hsv-hsl", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "h": 210,
    "s": 70,
    "v": 80
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/hsv-hsl",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "h": 210,
    "s": 70,
    "v": 80
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsv-hsl", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"h":210,"s":70,"v":80}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"h":210,"s":70,"v":80}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsv-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

{
  "h": 210,
  "s": 70,
  "v": 80
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.hsv_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

par requête$0.002

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 plages légales échouent avec une erreur claire invalid_input, de sorte que les jetons incorrects ne s'enroulent ni ne se limitent en silence.

Comment HSV se mappe vers HSL sur la même teinte

Le pipeline est de l'arithmétique flottante pure, sans graines aléatoires, sans horodatages 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

Envoyez trois nombres finis : la teinte h en degrés de zéro à trois cent soixante, la saturation HSV s en pourcentage de zéro à cent, et la valeur v en pourcentage dans la même bande. Les contrôles classiques incluent le rouge moyen pur en HSV avec teinte zéro, saturation cent et valeur cent mappant vers luminosité HSL cinquante avec saturation pleine ; le noir comme valeur zéro s'effondrant en noir achromatique avec luminosité zéro ; et les gris à saturation zéro mappant vers saturation HSL zéro avec luminosité égale à la moitié de la valeur source. Utilisez le formulaire gratuit du navigateur pour explorer des palettes et des revues de design, puis appelez le contrat identique depuis des scripts lorsque vous avez besoin d'une conversion en masse de matériaux moteur ou de jetons de thèmes mobiles vers HSL CSS. Chaque champ peut arriver comme nombre JSON ou comme chaîne numérique ; les alias hue, saturation, value et brightness sont acceptés par commodité. 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, la réponse renvoie h nettoyé, la saturation source comme 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 avec les triplets complets, et une courte note de formule rappelant l'identité de l'intervalle unitaire. Le tarif 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 HSV vers HSL intervient dans le travail réel

Les flux d'accessibilité qui reçoivent du HSV d'un éditeur d'image puis ajustent la luminosité perçue en HSL 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 tarif 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 en masse et clés de cursus

Scriptez une conversion déterministe HSV vers HSL pour fixtures de régression, oracles d'exercices et exports de palettes à $0.002 par élément.

Consulter la documentation complète du KIT →

Lancer gratuitement

Exemple résolu

Comment HSV se mappe vers HSL sur la même teinte

Où la conversion HSV vers HSL intervient dans le travail réel

Cas d’usage

Échantillons moteur vers jetons HSL CSS

Thèmes mobiles et passage au design

Questions fréquentes

Outils associés

Pour les développeurs — accès API

Endpoint

Appeler depuis votre stack

Exemple de requête

Exemple de réponse

Tarifs

Erreurs

Notes techniques

Comment HSV se mappe vers HSL sur la même teinte

Ce que vous envoyez et ce que vous recevez

Où la conversion HSV vers HSL intervient dans le travail réel

Cas d'intégration

Fixtures en masse et clés de cursus

merci