Analyser une chaîne HSL en RGB
Lisez en chiffres une couleur CSS collée : hsl(210, 80%, 45%) devient rouge 23, vert 115 et bleu 207, soit #1773cf, avec des virgules, des espaces ou des unités comme deg et turn. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Hsl
- hsl(210, 80%, 45%)
- H
- 210
- S
- 80
- L
- 45
- Résistance (Ω)
- 23
Les designers et les ingénieurs collent des littéraux CSS hsl() et hsla() issus de feuilles de style, de jetons Figma et des DevTools du navigateur, puis ont besoin d'un triplet rouge-vert-bleu stable pour les canevas, les applications natives et les tampons d'image. Cet analyseur accepte une seule chaîne de couleur CSS, tolère les espaces surnuméraires, les unités de teinte facultatives telles que deg, turn, rad et grad, et les signes de pourcentage facultatifs sur la saturation et la luminosité ; il convertit ensuite la teinte, la saturation et la luminosité analysées par le même chemin du CSS Color Module que les navigateurs emploient pour peindre hsl(). La teinte s'enroule comme CSS enroule les angles ; saturation et luminosité hors de zéro à cent pour cent sont rejetées afin qu'une faute de frappe ne devienne pas du blanc en silence.
Comment une chaîne CSS hsl() devient un triplet RGB
Une couleur CSS hsl() nomme un point en coordonnées cylindriques : la teinte est l'angle autour de la roue, la saturation est l'éloignement de la couleur par rapport au gris, et la luminosité est sa proximité du noir ou du blanc. Cette capacité analyse d'abord le jeton de fonction.
Elle accepte la forme historique à virgules hsl(h, s, l) et la forme moderne séparée par des espaces hsl(h s l), avec ou sans le a de hsla, et avec un alpha facultatif après une quatrième virgule ou après une barre oblique. La teinte peut être un nombre nu de degrés ou porter une unité explicite : deg, turn, rad ou grad. Saturation et luminosité peuvent inclure le signe de pourcentage ou l'omettre ; les deux sont lues comme des pourcentages de zéro à cent.
Une fois le jeton compris, la conversion suit le CSS Color Module et le chemin W3C hue2rgb : on met saturation et luminosité à l'échelle de l'intervalle unitaire, on calcule les bornes intermédiaires p et q, on échantillonne trois positions décalées sur le cercle unitaire, on multiplie par deux cent cinquante-cinq et on arrondit à des entiers. Quand la saturation est nulle, les trois canaux s'effondrent sur le même gris.
Le parcours est une arithmétique pure, sans horloges et sans réseau, de sorte que la même chaîne produit toujours le même triplet.
Contrat d'entrée, unités, espacement et erreurs
La valeur doit être une fonction CSS hsl() ou hsla(), parenthèses comprises ; un triple nu de nombres est rejeté afin que le contrat reste un analyseur de chaînes et non une seconde forme HSL numérique. Les espaces extra à l'intérieur des parenthèses sont ignorés. Saturation et luminosité hors de zéro à cent pour cent échouent aussi au lieu d'être bornées, afin qu'une faute comme cinq cents pour cent ne puisse pas devenir du blanc en silence.
La teinte s'enroule modulo trois cent soixante après conversion d'unité, comme CSS, si bien que quatre cent quatre-vingts degrés et cent vingt degrés peignent le même vert. En cas de succès, le corps renvoie la chaîne d'entrée rognée, les h, s et l numériques analysés (teinte en degrés après enroulement, saturation et luminosité en pourcentages), les canaux entiers r, g et b, un tableau triplet rgb, une chaîne rgb() imprimable, un code hex en minuscules et une courte note de formule.
Lorsque la chaîne source incluait une composante alpha, la réponse inclut aussi a dans l'intervalle unitaire et une chaîne rgba() ; si l'alpha est absent, ces clés sont omises plutôt que mises à null. Exemple : hsl(210, 80%, 45%) produit les mêmes canaux bleu profond qu'un convertisseur HSL numérique renverrait pour la teinte deux cent dix, la saturation quatre-vingts et la luminosité quarante-cinq.
Où l'analyse d'une chaîne hsl() rend service
Les pipelines de jetons de design stockent les rampes de marque comme des fonctions CSS afin qu'elles restent lisibles à côté des feuilles de style, puis émettent des canaux entiers pour UIColor iOS, Android Color et l'hex des e-mails. Les outils de régression visuelle comparent des pixels rendus ; une analyse déterministe de la même chaîne hsl() utilisée en CSS est le seul moyen de connaître le triplet huit bits attendu sans ouvrir un navigateur.
Les générateurs de documentation impriment un tableau d'échantillons à partir des jetons d'un dépôt et ne doivent pas inventer un vert différent de celui que le site expédie. Les supports d'enseignement qui montrent les fonctions de couleur CSS à côté de RGB et d'hex ont besoin d'un oracle qui signale une syntaxe malformée au lieu de se rattraper d'un signe de pourcentage manquant en devinant.
Si vous avez déjà trois nombres plutôt qu'une chaîne CSS, utilisez un convertisseur HSL vers RGB numérique ; cette page possède l'intention de recherche d'analyser une chaîne hsl() pour en faire un triplet RGB.
Cas d’usage
Des jetons de feuille de style au RGB canevas et natif
Collez des littéraux hsl() d'un fichier de thème ou des DevTools et obtenez r, g, b entiers plus hex pour les remplissages de canevas, UIColor et Android Color.
Pipelines de jetons de design et de documentation
Parcourez les jetons de fonction CSS d'un dépôt de design system et émettez une table stable de triplets RGB qui correspond à la peinture hsl() du navigateur.
Questions fréquentes
Quelles formes CSS hsl() l'analyseur accepte-t-il ?
La forme à virgules hsl(h, s, l) et la forme moderne à espaces hsl(h s l), plus hsla() et un alpha facultatif (quatrième virgule ou barre). Les espaces extra sont ignorés. La teinte peut utiliser deg, turn, rad ou grad.
Comment hsl() est-il converti en triplet RGB ?
Après analyse de la chaîne, la conversion suit le chemin hue2rgb du CSS Color Module sur le cercle unitaire. Les canaux sont arrondis en entiers 0–255. La même chaîne produit toujours les mêmes r, g et b.
Que se passe-t-il si la chaîne hsl() est malformée ?
Mauvais noms de fonction, parenthèses manquantes, mauvais nombre de composantes, syntaxe mixte virgules et barre, et jetons non numériques sont rejetés et non facturés.
Les unités de teinte s'enroulent-elles, et saturation et luminosité sont-elles bornées ?
La teinte s'enroule modulo 360 après conversion d'unité, comme CSS. Saturation et luminosité doivent se situer entre 0 et 100 pour cent ; les valeurs hors plage échouent au lieu d'être bornées au blanc ou au noir.
Puis-je coller une couleur telle quelle depuis une feuille de style ou les DevTools ?
Oui. Collez tout le texte hsl() ou hsla(), parenthèses comprises, par exemple hsl(210, 80%, 45%). Les espaces en trop sont ignorés, mais trois nombres seuls sans hsl() sont refusés.
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-string-to-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hsl":"hsl(210, 80%, 45%)"}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-string-to-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hsl": "hsl(210, 80%, 45%)"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-string-to-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hsl": "hsl(210, 80%, 45%)"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-string-to-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hsl":"hsl(210, 80%, 45%)"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hsl":"hsl(210, 80%, 45%)"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-string-to-rgb", 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
{
"hsl": "hsl(210, 80%, 45%)"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_string_to_rgb",
"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
Une syntaxe malformée — parenthèses manquantes, mauvais nom de fonction, trop peu de composantes ou jetons non numériques — échoue avec invalid_input au lieu de deviner une couleur voisine.
Comment une chaîne CSS hsl() devient un triplet RGB
Les auteurs écrivent ce point comme un jeton de fonction, et non comme trois champs de formulaire séparés, si bien qu'un convertisseur qui n'accepte que des h, s et l numériques laisse un trou dès que la source de vérité est une feuille de style, un JSON de jetons de design ou une copie des DevTools.
Contrat d'entrée, unités, espacement et erreurs
Envoyez en POST un corps JSON avec un seul champ chaîne obligatoire nommé hsl. Les alias text, value, color et input sont acceptés et signifient la même chose. Un hsl manquant, une chaîne vide, une chaîne de plus de deux cent cinquante-six caractères, un nom de fonction autre que hsl ou hsla, des parenthèses déséquilibrées, le mauvais nombre de composantes, une syntaxe mixte virgules et barre, et des jetons qui ne sont pas des nombres finis échouent avec invalid_input et ne sont pas facturés.
Où l'analyse d'une chaîne hsl() rend service
Comme cette capacité est un moteur de parse pur, l'outil du navigateur est gratuit et un appel API réussi coûte le $0.002 publié par élément ; les échecs de validation ne consomment pas le solde prépayé.
Cas d'intégration
Fixtures de régression visuelle
Transformez les mêmes chaînes hsl() que votre CSS expédie en fixtures RGB 8 bits afin que les tests de capture comparent la couleur que le navigateur peindra réellement.
Questions techniques
Combien coûte l'analyse d'une chaîne hsl() vers RGB ?
L'outil du navigateur est gratuit. Les requêtes API utilisent le solde prépayé KIT à $0.002 par appel réussi ; une entrée invalide n'est pas facturée.