Convertisseur HWB vers HSL
La teinte 210 avec 20 % de blancheur et 10 % de noirceur devient hsl(210 77.78% 55%), en gardant la teinte telle que vous l'avez saisie. Passez vos couleurs de design de HWB à HSL sans tâtonner. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Hue
- 210
- Blancheur
- 20
- Noirceur
- 10
- H
- 210
- S
- 77,7778
- L
- 55
- Saturation
- 77,7778
Le convertisseur HWB vers HSL transforme un angle de teinte et des pourcentages de blancheur et de noirceur en teinte, saturation et luminosité, sans analyseur de couleur du navigateur ni service externe. Il conserve l’angle normalisé, valide chaque composante et applique la règle standard de normalisation HWB lorsque la somme de la blancheur et de la noirceur dépasse cent pour cent. Le résultat comprend des champs HSL numériques, un objet imbriqué et une chaîne CSS prête à l’emploi.
Saisissez une couleur HWB complète et comprenez la validation
La teinte est mesurée en degrés et peut être tout angle fini positif ou négatif : le convertisseur la ramène dans l’intervalle habituel allant de zéro inclus à trois cent soixante exclu ; moins trente devient ainsi trois cent trente et quatre cent vingt devient soixante. La blancheur et la noirceur sont des pourcentages qui doivent chacun rester entre zéro et cent inclus. Les chaînes numériques sont acceptées si elles ne contiennent qu’une notation décimale ou exponentielle valide, ce qui aide les clients à formulaire sans affaiblir la validation.
Cette limite stricte permet aux pipelines d’arrêter les données erronées avant qu’elles ne ressemblent à une couleur plausible.
Comment la blancheur et la noirceur deviennent du HSL
HWB décrit une couleur comme une teinte pure mélangée à du blanc et du noir. Après conversion des deux pourcentages en fractions, le convertisseur vérifie leur somme. Si le total ne dépasse pas un, la fraction restante est la chroma : un moins la blancheur moins la noirceur.
La luminosité HSL vaut un plus la blancheur moins la noirceur, le tout divisé par deux. La saturation est la chroma divisée par un moins la valeur absolue de deux fois cette luminosité moins un, sauf aux limites noire, blanche ou achromatique où elle vaut zéro. Si la somme dépasse cent pour cent, les règles de couleur CSS normalisent les deux proportions par leur total.
La teinte renvoyée conserve néanmoins l’angle d’entrée ramené dans l’intervalle, même avec une saturation nulle. Les allers-retours, métadonnées de palette et comparaisons déterministes restent ainsi stables, bien que le gris visible n’ait aucune teinte perceptible. Tous les résultats numériques publiés sont arrondis à quatre décimales pour éviter le bruit flottant dans les instantanés.
Exploitez la sortie dans CSS, les systèmes de design et les tests
Une réponse réussie expose h, s et l, avec la teinte en degrés et la saturation et la luminosité en pourcentages. Utilisez l’exécuteur gratuit du navigateur pour les palettes ponctuelles, les exemples de documentation et les exercices. Comme l’implémentation repose uniquement sur une arithmétique bornée, une même entrée produit toujours la même sortie : aucun réseau, hasard, horloge système, analyseur dépendant des paramètres régionaux ni profil colorimétrique caché n’intervient.
Ce convertisseur traite uniquement HWB vers HSL. Un outil multiformat convient mieux aux entrées HEX, RGB, LAB ou CMYK arbitraires, mais ce point d’accès ciblé garantit une validation précise et une normalisation transparente des flux HWB.
Cas d’usage
Migrez des jetons de couleur CSS
Convertissez des jetons HWB en composantes HSL numériques et en chaîne CSS, tout en conservant la teinte et le mélange d’origine pour révision.
Normalisez les palettes générées
Traitez les totaux programmatiques de blancheur et de noirceur supérieurs à cent pour cent avec des valeurs effectives explicites, sans surprise liée au navigateur.
Questions fréquentes
Quelles unités le convertisseur accepte-t-il ?
La teinte est un angle en degrés. La blancheur et la noirceur sont des pourcentages de 0 à 100 inclus, et non des fractions de 0 à 1.
Que se passe-t-il si blancheur plus noirceur dépasse 100 % ?
Les deux valeurs sont normalisées proportionnellement par leur somme selon les règles HWB. La sortie est achromatique, normalized vaut true et les pourcentages effectifs sont renvoyés.
La teinte est-elle conservée pour un résultat gris ?
Oui. La teinte d’entrée est ramenée dans l’intervalle 0–360 et renvoyée même si la saturation est nulle, afin de conserver les métadonnées de façon déterministe.
Pouvez-vous utiliser les champs h, w et b ?
Les noms canoniques longs prévalent si les deux formes sont fournies.
Comment convertir la teinte 210 avec 20 % de blancheur et 10 % de noirceur en HSL ?
Le résultat est hsl(210 77.78% 55%). Ce qui reste après la blancheur et la noirceur est la couleur pure, et la luminosité vaut un plus la blancheur moins la noirceur, divisé par deux : 55 %.
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/hwb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210,"whiteness":20,"blackness":10}'const res = await fetch("https://api.kit.forhosting.com/color/hwb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210,
"whiteness": 20,
"blackness": 10
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hwb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210,
"whiteness": 20,
"blackness": 10
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hwb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210,"whiteness":20,"blackness":10}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210,"whiteness":20,"blackness":10}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hwb-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
{
"hue": 210,
"whiteness": 20,
"blackness": 10
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hwb_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
L’outil du navigateur est gratuit ; la conversion automatisée par API coûte $0.002 par élément réussi.
Saisissez une couleur HWB complète et comprenez la validation
Fournissez hue, whiteness et blackness sous forme de nombres finis. Les alias courts h, w et b sont également acceptés pour les clients qui stockent déjà des enregistrements HWB compacts. Les valeurs absentes, le texte non numérique, les infinis et les pourcentages hors limites produisent invalid_input au lieu d’être devinés ou écrêtés silencieusement.
Comment la blancheur et la noirceur deviennent du HSL
Il ne reste aucune composante chromatique et le résultat est gris ; effective_whiteness et effective_blackness indiquent le mélange normalisé, tandis que normalized vaut true.
Exploitez la sortie dans CSS, les systèmes de design et les tests
Elle fournit aussi les noms longs hue, saturation et lightness, un objet hsl imbriqué et hsl_css pour une utilisation directe dans une feuille de style ou une propriété personnalisée. Les pourcentages originaux de blancheur et de noirceur restent visibles, tandis que effective_whiteness et effective_blackness signalent un mélange HWB surdimensionné qui a nécessité une normalisation. Utilisez l’API à $0.002 par élément réussi lorsqu’un compilateur de jetons, un générateur de thèmes, un script de migration ou une tâche d’intégration continue exige le même contrat JSON stable.
Cas d'intégration
Créez des fixtures de couleur stables
Employez la sortie HSL arrondie et déterministe dans les tests unitaires, outils pédagogiques et contrôles de conformité entre langages.
Questions techniques
Combien coûte la conversion par API ?
Chaque élément API réussi coûte $0.002. L’exécuteur du navigateur est gratuit et les échecs de validation sont renvoyés sous forme invalid_input.