CSS-variabel-generator

Förvandla en enda basfärg till en komplett uppsättning CSS-variabler för designtokens. Välj en hex-basfärg, namnge variabeln, välj ett prefix och generera valfritt en nyansskala på 50–950 och/eller en uppdelning av HSL-kanaler. Utdatan är ett färdigt att klistra in :root { ... }-block där nyansnivåerna härleds genom att justera HSL-ljusheten med bibehållen färgton och mättnad från din basfärg.

1. Välj en Base Color med färgväljaren (eller skriv ett hex-värde). 2. Ange ett Variable Name (t.ex. primary) — används som suffix efter ditt prefix. 3. Ställ in Prefix (standard --, får automatiskt ett avslutande bindestreck om det saknas). 4. Markera Generate Shades för att skapa skalan 50–950 och/eller Generate HSL för att skapa den råa uppdelningen av HSL-kanaler. 5. Klicka på Generate och sedan på Copy för att kopiera CSS-blocket.

Nyanser skapas genom att basfärgen omvandlas till HSL och fasta ljushetsnivåer ersätts: 50→97 %, 100→94 %, 200→86 %, 300→76 %, 400→64 %, 500 (din basfärg oförändrad), 600→42 %, 700→34 %, 800→26 %, 900→20 %, 950→12 %. Färgton och mättnad tas från basfärgen. HSL-variantblocket skriver ut mellanslagsseparerad HSL (t.ex. --primary: 217 91% 60%) plus separata -h-, -s- och -l-kanaler för användning i moderna color-mix/relative-color-funktioner.