ForHosting KIT · Outils pour développeurs

HSL vers chaîne CSS

Transformez des valeurs distinctes de teinte, saturation et luminosité en une chaîne CSS hsl() propre, sans ponctuation assemblée à la main, arrondi incohérent ni signe de pourcentage oublié.

● BetaGratuit · dans votre navigateur

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Le formateur valide chaque composant, normalise la teinte sur le cercle chromatique, arrondit selon la précision choisie et renvoie un résultat prévisible. Il convient à toute conversion de données couleur structurées en CSS prêt pour le navigateur, des chaînes de jetons graphiques et générateurs de thèmes aux tests automatisés, modèles et petits outils de développement.

Fournissez des composants HSL numériques

Envoyez la teinte, la saturation et la luminosité sous forme de nombres JSON, et non comme une expression CSS déjà partiellement formatée. La teinte est un angle en degrés qui peut être positif, négatif ou dépasser un tour complet. Le formateur la ramène dans l’intervalle canonique commençant à zéro et finissant avant 360 : -30 équivaut à 330 et 390 devient 30. La saturation et la luminosité sont des pourcentages saisis sans le signe correspondant : utilisez 65 pour soixante-cinq pour cent. Elles doivent rester entre 0 et 100. Chaque valeur obligatoire doit être finie ; les chaînes comme « 50 », les champs absents, null, Infinity et NaN sont refusés afin de révéler les erreurs et de garantir le même résultat dans l’API, le navigateur et les tests.

Maîtrisez un arrondi déterministe

Le paramètre precision fixe le nombre maximal de décimales conservées pour les trois composants. Sa valeur par défaut est deux et il accepte les entiers de zéro à six. Zéro produit des valeurs entières ; une valeur supérieure préserve davantage de détail. L’arrondi intervient après la normalisation de la teinte. Les zéros finaux inutiles sont supprimés et le zéro négatif devient un simple zéro. Ces règles ne dépendent pas des paramètres régionaux : le séparateur décimal reste un point, les arguments sont séparés par une virgule et une espace, et les deux pourcentages reçoivent toujours leur signe. Une entrée valide identique produit donc exactement la même chaîne dans chaque environnement.

Employez le CSS renvoyé en toute sécurité

Le résultat comporte un champ css conforme à la notation hsl(h, s%, l%). Vous pouvez l’insérer dans une déclaration de style, une propriété DOM, un jeton graphique ou un test golden. Cette capacité formate uniquement : elle ne convertit ni RGB ni hexadécimal, n’ajoute pas de transparence alpha, ne calcule pas le contraste et n’évalue pas la lisibilité. Pour créer un thème, validez les enregistrements en amont et formatez chaque couleur séparément afin d’identifier les erreurs. Si la précision appartient à une convention publique, indiquez-la explicitement. Chaque requête automatisée coûte $0.002. Placez la chaîne uniquement à un emplacement qui attend une couleur CSS.

Cas d’usage

Générer des jetons graphiques

Convertissez des données HSL calculées en valeurs CSS uniformes avant d’écrire des variables de thème ou des fichiers de jetons.

Normaliser un formulaire

Validez les nombres d’un sélecteur de couleur et obtenez une chaîne stable pour l’aperçu, le stockage ou les styles.

Créer des tests stables

Appliquez un arrondi et un espacement fixes pour éviter les différences de snapshots dues au formatage.

Questions fréquentes

Quel est le coût d’une requête ?

Le prix de base de l’API est de $0.002 par requête.

Faut-il inclure les signes de pourcentage ?

Non. Envoyez des nombres de 0 à 100 ; le formateur ajoute les signes requis.

Que devient une teinte hors de 0 à 360 ?

Elle est ramenée sur le cercle chromatique dans l’intervalle allant de 0 à moins de 360.

Combien de décimales puis-je conserver ?

Définissez precision sur un entier de 0 à 6. La valeur par défaut est 2 et les zéros finaux disparaissent.

La transparence alpha est-elle prise en charge ?

Non. Le résultat est une chaîne hsl() opaque à trois composants, sans composant alpha.

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/hsl-to-css

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-to-css \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"hue":210.456,"saturation":64.444,"lightness":42.225}'

const res = await fetch("https://api.kit.forhosting.com/color/hsl-to-css", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "hue": 210.456,
    "saturation": 64.444,
    "lightness": 42.225
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/hsl-to-css",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "hue": 210.456,
    "saturation": 64.444,
    "lightness": 42.225
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-to-css", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"hue":210.456,"saturation":64.444,"lightness":42.225}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"hue":210.456,"saturation":64.444,"lightness":42.225}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-to-css", 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.456,
  "saturation": 64.444,
  "lightness": 42.225
}

Exemple de réponse

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

Consulter la documentation complète du KIT →