ForHosting KIT · Images

OKLCH vers chaîne CSS

Luminosité 0.7, chroma 0.15 et teinte 180 deviennent oklch(0.7000 0.1500 180.00), ou oklch(70.0000% 0.1500 180.00) si vous préférez les pourcentages. Tous vos jetons et feuilles de style s'écrivent de la même façon, avec les mêmes décimales. 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

L: 0,7
C: 0,15
H: 180

Vous obtenez

L arrondi: 0,7
C arrondi: 0,15
H arrondi: 180
Décimales de L: 4

OKLCH est l’espace colorimétrique perceptuel derrière le module CSS Color Level 4 moderne : il permet aux concepteurs de fixer indépendamment la luminosité, le chroma et la teinte, tandis que le navigateur mappe le gamut des valeurs hors plage. Les design systems, pipelines de jetons et générateurs de documentation ont besoin d’un moyen déterministe de transformer des composantes numériques OKLCH en une chaîne de fonction oklch() prête à coller, validée de la même façon dans tout environnement.

Qu’est-ce qu’OKLCH et pourquoi une chaîne CSS oklch() compte

OKLCH sépare la couleur en trois axes perceptuellement significatifs : L pour la luminosité du noir au blanc sur une échelle à peu près uniforme, C pour le chroma (degré de colorisation de l’échantillon ; zéro signifie pleinement achromatique) et H pour l’angle de teinte en degrés autour de la roue des couleurs.

Contrairement au HSL hérité, des pas égaux de luminosité en OKLCH paraissent souvent plus réguliers à l’œil humain, d’où le choix des design systems qui quittent hex et HSL de stocker d’abord les rampes de marque en OKLCH. Le module CSS Color Level 4 expose cet espace directement via la fonction oklch(), de sorte qu’une feuille de style peut déclarer oklch(0.72 0.14 250) ou la forme en pourcentage équivalente oklch(72% 0.14 250) sans conversion sRGB intermédiaire qui rognerait le gamut trop tôt.

L’opacité optionnelle utilise la syntaxe moderne à barre oklch(L C H / A), alignée sur les autres fonctions de couleur CSS. Ce point de terminaison normalise ce contrat : valider les plages, arrondir à précision fixe et renvoyer les formes CSS à L unitaire et à L en pourcentage pour que le consommateur choisisse le style de la maison sans réimplémenter les règles de formatage.

Contrat d’entrée, règles d’arrondi et forme de la réponse

L’alpha optionnel entre zéro et un active l’opacité à barre dans la chaîne émise. Exemple : l égal à 0.7, c égal à 0.15, h égal à 180 produit oklch(0.7000 0.1500 180.00) et oklch(70.0000% 0.1500 180.00). Avec alpha 0.5 apparaît la forme à barre : oklch(0.7000 0.1500 180.00 / 0.5000).

La teinte n’est pas ramenée dans l’intervalle de zéro à trois cent soixante, afin que les angles multi-tours ou négatifs volontaires survivent en CSS, qui accepte tout type d’angle. Associez ce formateur à un convertisseur séparé si vous avez besoin d’hex ou de sRGB ; cette capacité ne fait que valider et sérialiser OKLCH pour le CSS.

Où un formateur OKLCH vers CSS apporte de la valeur

Les dépôts de jetons de design et les pipelines style-dictionary convertissent des objets de couleur structurés en propriétés personnalisées CSS ; un formateur partagé maintient chaque paquet du monorepo sur la même grammaire oklch() au lieu de modèles ad hoc. Les bibliothèques de composants et la documentation Storybook peuvent afficher des nuanciers en direct pilotés par des commandes numériques L, C et H tout en copiant le champ css exact dans les extraits.

Les outils d’accessibilité et de thématisation qui génèrent des rampes claires et sombres en OKLCH ont besoin d’une étape finale qui n’invente jamais de CSS illégal. Une validation échouée ne consomme pas le solde.

Cas d’usage

Documentation Storybook et de composants

Pilotez les commandes L, C et H dans une démo en direct et copiez le champ css exact dans des extraits de code alignés sur les feuilles de style de production.

Générateurs de thèmes et de rampes

Après calcul des étapes OKLCH pour les modes clair et sombre, formatez chaque arrêt en oklch() valide CSS Color Level 4 avec alpha optionnel à barre pour surfaces translucides.

Questions fréquentes

Comment formater OKLCH en chaîne CSS oklch() ?

Envoyez des nombres finis l dans [0,1], c ≥ 0 et h en degrés. L’alpha optionnel ajoute l’opacité à barre.

Comment l’arrondi est-il contrôlé ?

Par défaut : quatre décimales pour L et C, deux pour H. Les jetons imprimés utilisent toujours cette largeur exacte pour des goldens stables.

L’outil convertit-il OKLCH en hex ou RGB ?

Non. Il valide et formate uniquement OKLCH en chaînes CSS oklch() modernes. Utilisez une capacité de conversion de couleur séparée si vous avez besoin de canaux sRGB ou d’hex.

Comment ajouter de la transparence à une couleur oklch() ?

Indiquez une opacité entre 0 et 1, elle s'écrit après une barre oblique. Avec luminosité 0.7, chroma 0.15, teinte 180 et opacité 0.5, vous obtenez oklch(0.7000 0.1500 180.00 / 0.5000).

Quelles valeurs sont acceptées pour la luminosité, le chroma et la teinte ?

La luminosité va de 0 à 1, le chroma doit être nul ou positif, et la teinte accepte n'importe quel angle en degrés, même négatif ou au-delà d'un tour, car le CSS le comprend tel quel.

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/oklch-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/oklch-to-css \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"l":0.7,"c":0.15,"h":180}'

const res = await fetch("https://api.kit.forhosting.com/color/oklch-to-css", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "l": 0.7,
    "c": 0.15,
    "h": 180
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/oklch-to-css",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "l": 0.7,
    "c": 0.15,
    "h": 180
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/oklch-to-css", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"l":0.7,"c":0.15,"h":180}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"l":0.7,"c":0.15,"h":180}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/oklch-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

{
  "l": 0.7,
  "c": 0.15,
  "h": 180
}

Exemple de réponse

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

Notes techniques

Cette capacité accepte une luminosité dans l’intervalle unitaire, un chroma non négatif, une teinte en degrés et un canal alpha optionnel ; elle arrondit ensuite chaque composante à un nombre fixe de décimales et émet à la fois la forme à luminosité unitaire et la forme à luminosité en pourcentage de la fonction CSS. Les plages invalides échouent avec invalid_input au lieu de produire un résultat absurde silencieux.

Qu’est-ce qu’OKLCH et pourquoi une chaîne CSS oklch() compte

Les outils qui construisent des jetons, un JSON de thème ou du CSS généré doivent donc produire une chaîne stable octet par octet : les mêmes L, C et H donnent toujours les mêmes décimales, espaces et parenthèses.

Contrat d’entrée, règles d’arrondi et forme de la réponse

Envoyez un corps JSON avec les nombres finis obligatoires l (luminosité dans l’intervalle fermé de zéro à un), c (chroma supérieur ou égal à zéro) et h (teinte en degrés, tout angle fini). Les entiers optionnels l_decimals, c_decimals et h_decimals (chacun de zéro à dix) remplacent les valeurs par défaut de quatre, quatre et deux décimales respectivement ; l’alpha, lorsqu’il est présent, s’imprime toujours sur quatre décimales. Chaque champ peut arriver comme nombre JSON ou comme chaîne numérique ; champs manquants, valeurs non finies, booléens et L ou alpha hors plage échouent avec invalid_input en nommant le champ, et un chroma négatif est rejeté de la même façon. Ces échecs de validation ne sont pas facturés. En cas de succès le corps renvoie les composantes brutes, les composantes arrondies, les budgets de décimales utilisés, has_alpha, un champ css avec la chaîne oklch() à luminosité unitaire, un champ css_percent avec L en pourcentage à la même précision, plus les chaînes method, formula et message pour l’interface.

Où un formateur OKLCH vers CSS apporte de la valeur

Comme l’implémentation est du parse pur de tier A, chaque appel réussi coûte le prix de base publié $0.002 sans jetons de modèle ni réseau sortant. Gardez les requêtes petites, figez les chaînes css et css_percent dans les tests, et vous obtenez des littéraux de couleur CSS modernes et reproductibles pour design systems, workers en périphérie et générateurs de documentation, sans déployer une bibliothèque complète de science des couleurs pour un simple formatage.

Cas d'intégration

Pipelines de jetons de design et variables CSS

Sérialisez des rampes de marque OKLCH en propriétés personnalisées oklch() stables pour style-dictionary, Theo ou un JSON de thème maison, sans dérive de chaînes en virgule flottante entre machines de CI.

Questions techniques

Quelles plages sont valides pour L, C, H et alpha ?

La luminosité doit être dans [0, 1], le chroma non négatif, la teinte tout angle fini en degrés, et l’alpha (s’il est envoyé) dans [0, 1]. Les valeurs hors plage échouent avec invalid_input et ne sont pas facturées.

Quel est le coût de l’outil OKLCH vers chaîne CSS ?

L’outil 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.

Consulter la documentation complète du KIT →

Lancer gratuitement

Exemple résolu

Qu’est-ce qu’OKLCH et pourquoi une chaîne CSS oklch() compte

Contrat d’entrée, règles d’arrondi et forme de la réponse

Où un formateur OKLCH vers CSS apporte de la valeur

Cas d’usage

Documentation Storybook et de composants

Générateurs de thèmes et de rampes

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

Qu’est-ce qu’OKLCH et pourquoi une chaîne CSS oklch() compte

Contrat d’entrée, règles d’arrondi et forme de la réponse

Où un formateur OKLCH vers CSS apporte de la valeur

Cas d'intégration

Pipelines de jetons de design et variables CSS

Questions techniques

merci