Convertisseur RGB vers HSL
Voyez n’importe quelle couleur RVB en teinte, saturation et luminosité : 255, 128, 64 devient 20.1°, 100 % et 62.55 %. Ajustez les nuances ou créez des thèmes clairs et sombres 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
- Résistance (Ω)
- 255
- G
- 128
- B
- 64
- H
- 20,1047
- S
- 100
- L
- 62,549
- Teinte
- 20,1047
Les designers, les développeurs front-end et les auteurs de pipelines conservent souvent les couleurs sous forme d'entiers rouge, vert et bleu de zéro à deux cent cinquante-cinq, tout en ayant besoin de teinte, saturation et luminosité pour ajuster le ton sans dériver la luminosité perçue, construire des variables CSS ou alimenter des outils sensibles à la couleur. Ce convertisseur RGB vers HSL accepte trois canaux dans cette plage d'octet standard, exécute une conversion déterministe de style sRGB et renvoie la teinte en degrés ainsi que la saturation et la luminosité en pourcentages, avec des chaînes hsl CSS modernes et classiques à coller dans des feuilles de style. Les canaux hors de zéro à deux cent cinquante-cinq échouent avec une erreur d'entrée invalide claire, afin qu'aucune donnée erronée ne soit écrêtée en silence.
Saisir les canaux RGB et ce que calcule la conversion
Fournissez trois nombres nommés r, g et b pour le rouge, le vert et le bleu. Le moteur normalise d'abord chaque canal en le divisant par deux cent cinquante-cinq pour placer les valeurs sur l'intervalle unitaire. Il trouve ensuite le maximum et le minimum de ces trois composantes normalisées et la chroma comme leur différence.
La luminosité est la moitié de la somme du maximum et du minimum. Lorsque la chroma est nulle, la couleur est achromatique : la teinte est zéro et la saturation est zéro, ne laissant que la luminosité pour décrire les gris du noir au blanc en passant par le gris moyen. Lorsque la chroma est positive, la saturation est la chroma divisée par un moins la valeur absolue de deux fois la luminosité moins un, 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 maximal : dominance rouge, verte ou bleue, mise à l'échelle en degrés sur l'intervalle semi-ouvert de zéro jusqu'à trois cent soixante.
Cas d’usage
CSS et jetons de design
Convertissez des nuanciers RGB issus d'outils de design en HSL pour que les thèmes ajustent teinte ou luminosité tout 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 de marque RGB dérive des composantes HSL pour générer teintes claires, ombres et variantes d'accent sans écrêter en silence les canaux hors plage.
Questions fréquentes
Comment convertir RGB en HSL avec cet outil ?
La réponse inclut h, s, l, des chaînes CSS et un objet hsl imbriqué.
Que se passe-t-il si un canal est hors de 0–255 ?
Chacun de r, g et b doit être entre 0 et 255 inclus ; les valeurs hors plage sont rejetées et non facturées.
Teinte, saturation et luminosité sont-elles en pourcentages ou en fractions 0–1 ?
La teinte est en degrés de 0 jusqu'à 360. Saturation et luminosité sont des pourcentages de 0 à 100, comme l'usage courant de hsl() en CSS.
Le convertisseur RGB vers HSL est-il gratuit ?
L'outil du navigateur s'exécute gratuitement sur votre appareil.
Comment la luminosité HSL est-elle calculée ?
Chaque canal est divisé par 255, puis la luminosité vaut la moitié de la somme de la plus grande et de la plus petite valeur. Pour 255, 128, 64, on obtient 62.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/rgb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"r":255,"g":128,"b":64}'const res = await fetch("https://api.kit.forhosting.com/color/rgb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"r": 255,
"g": 128,
"b": 64
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/rgb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"r": 255,
"g": 128,
"b": 64
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/rgb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"r":255,"g":128,"b":64}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"r":255,"g":128,"b":64}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/rgb-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
{
"r": 255,
"g": 128,
"b": 64
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.rgb_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 les canaux RGB et ce que calcule la conversion
Chaque canal doit être un nombre fini entre zéro et deux cent cinquante-cinq inclus ; les chaînes entières telles que "128" sont acceptées, et les alias red, green et blue correspondent aux mêmes champs si vous préférez des noms longs. Des entrées identiques produisent toujours un JSON identique car le chemin est purement arithmétique, sans réseau, sans graine aléatoire et sans horloge murale.
Lire teinte, saturation, luminosité et chaînes CSS
En cas de succès, la réponse répète les canaux d'entrée r, g et b, puis expose h, s et l pour la teinte en degrés, la saturation en pour cent et la luminosité en pour cent. Le rouge pur deux cent cinquante-cinq zéro zéro donne une teinte zéro avec saturation pleine et luminosité moyenne ; le vert pur et le bleu pur se placent près de cent vingt et deux cent quarante degrés respectivement ; des canaux égaux produisent des gris à saturation zéro. Les trois mêmes nombres apparaissent aussi sous les noms longs hue, saturation et lightness, et imbriqués dans un objet hsl, afin que le code d'interface, les démos SDK et les correcteurs puissent choisir la forme qui convient sans mappage supplémentaire. Deux chaînes prêtes à coller sont incluses : hsl_css utilise la forme moderne CSS Color Module séparée par des espaces, comme hsl(30 100% 50%), et hsl_legacy utilise la forme classique avec virgules et parenthèses que les anciens parseurs attendent encore. Le champ method vaut toujours rgb_to_hsl pour que les routeurs aval puissent se brancher sans inspecter les formes. L'absence d'un canal requis, des valeurs non numériques et tout canal hors de zéro à deux cent cinquante-cinq échouent avec invalid_input et ne sont pas facturés après le rejet du moteur.
Usage de l'API, tarification, flux de design et limites pratiques
Appelez le convertisseur RGB vers HSL gratuit dans le navigateur pour des retouches de palette, des démonstrations de cours et des contrôles rapides sans installer de bibliothèque de couleurs. Préférez ce point d'accès lorsque l'intention de recherche et le cadrage produit portent spécifiquement sur RGB vers HSL avec des bornes de canal strictes ; pour une conversion multi-format entre HEX, RGB, HSL, LAB et CMYK en un seul appel, utilisez le convertisseur de couleur plus large du catalogue. Associez les sorties HSL à des vérificateurs de contraste pour construire des thèmes accessibles, ou alimentez des décalages de teinte dans des pipelines de jetons de marque qui maintiennent la luminosité fixe tout en faisant tourner les accents. Envoyez un corps JSON avec les nombres obligatoires r, g et b dans la plage publiée. 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 de 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 de solde après le rejet du moteur. Les auteurs qui livrent des SDK peuvent mapper h, s et l directement vers des contrôles de formulaire ou des propriétés personnalisées CSS sans réimplémenter la conversion dans chaque langage.
Cas d'intégration
Enseignement et notation du calcul des couleurs
Cours et évaluations de code comparent les réponses RGB→HSL des étudiants à un JSON déterministe, avec invalid_input clair si un canal sort de 0–255.
Questions techniques
Puis-je utiliser les alias red, green et blue ?
Oui. Les champs red, green et blue sont acceptés comme alias de r, g et b afin que les clients utilisent des noms de canal courts ou longs.