Hex vers variable CSS

Les équipes stockent encore les couleurs de marque en codes hex dans Figma, les PDF de charte et les palettes JSON, puis ont besoin d'une seule ligne déterministe à coller dans :root ou un bloc de thème. Cet outil enveloppe une couleur hex validée dans une déclaration de propriété personnalisée nommée : vous choisissez l'identifiant, le solveur normalise l'hex en six chiffres minuscules avec dièse, vérifie que le nom est un ident à tirets licite et renvoie la ligne de définition --name: #rrggbb;. Les codes hex invalides et les identifiants illicites échouent avec invalid_input au lieu d'émettre du CSS qui ne s'analyserait pas. La même logique pure s'exécute gratuitement dans le navigateur et sur l'API, de sorte que les jetons générés ne dérivent pas entre aperçus locaux, intégration continue et feuilles de production.

Ce qu'est une propriété personnalisée CSS et pourquoi envelopper une couleur hex

Vous écrivez --brand-primary: #3366ff; sur :root ou n'importe quel sélecteur, puis vous consommez le jeton avec color: var(--brand-primary) sur boutons, liens et surfaces. Cette source unique de vérité est la façon dont les systèmes de design gardent d'accord un hex issu de Figma, une palette JSON et une feuille de production sans chasser des dizaines de littéraux en dur. Une étape dédiée hex vers variable CSS standardise le contrat : valider la couleur, valider le nom, développer l'abréviation, passer l'hex à six chiffres en minuscules, préserver la casse de l'ident, et émettre une espace après le deux-points plus un point-virgule final.

Contrat d'entrée, règles de validation et ligne de définition

Les espaces entourants sont coupés. En cas de succès, l'hex est toujours renvoyé en #rrggbb minuscule, l'abréviation à trois chiffres est développée (#abc devient #aabbcc) et le nom revient avec le préfixe -- en conservant la casse d'origine des lettres. Le champ principal declaration est la ligne de définition elle-même : --brand-primary: #3366ff;. Envoyez un corps JSON avec deux chaînes obligatoires. hex est la couleur : trois ou six chiffres hexadécimaux, dièse initial facultatif, lettres en majuscules ou minuscules. Les alias color, value, text, input et code sont acceptés par le même solveur. name est l'ident de la propriété personnalisée, avec ou sans -- initial ; les alias comprennent variable, var, var_name, custom_property et ident. La même chaîne est scindée en variable et value pour les tables de jetons, et root_block l'enveloppe en :root { --brand-primary: #3366ff; } pour semer une feuille en un seul collage. Les canaux entiers r, g et b, plus les drapeaux shorthand, had_hash et had_prefix, décrivent la forme d'origine. Une validation échouée — champ manquant, hex vide après un dièse, longueur autre que trois ou six, caractères non hex, préfixe de programmation 0x, espaces dans le nom, préfixe $ Sass, enveloppe var(), ident qui ne commence pas par une lettre ou un souligné, ou un nom de plus de soixante-quatre caractères préfixe compris — renvoie invalid_input en nommant le champ et n'est jamais facturée. Le tarif est un forfait $0.002 par requête réussie.

Où un formateur hex vers variable CSS gagne vraiment sa place

Parce que l'implémentation est du parse pur de palier A, chaque appel réussi coûte le prix de base publié $0.002 sans jetons de modèle ni réseau sortant, et une validation échouée ne consomme pas le solde.