CSS-variabel-generator

Vend en enkelt grundfarve til en komplet CSS-variabelsamling til design-token. Vælg en hex-grundfarve, give variabelen en navn, vælg et prefix, og generer eventuelt en skala af 50–950 nyanser og/eller en opdeling af HSL-kanalerne. Resultatet er en :root { ... }-blok, der er klar til at klippe ind, med nyansnivåer, der opstilles ved at justere lyshed i HSL, mens hue og saturation beholds fra din grundfarve.

1. Vælg en grundfarve med farvevalgern (eller skriv en hex-verdi). 2. Indtast en variabelnavn (f.eks. primary) – bruges som suffix efter din prefix. 3. Stilfærdig prefixet (standard er --; det får automatisk en streg på slutningen hvis det fejles). 4. Marker “Generer skifter” for at generere skalaen 50–950, og/eller “Generer HSL” for at få den råe HSL-kanalanalyse. 5. Klik på “Generer”, så erstat med “Kopier” for at kopiere CSS-blokken.

Skuffer opstilles ved at konvertere den grundfarve til HSL og erstatte den med faste lysstyrkenivauer: 50→97%, 100→94%, 200→86%, 300→76%, 400→64%, 500 (den grundfarve forbliver uforændret), 600→42%, 700→34%, 800→26%, 900→20%, 950→12%. Hue og saturation tages fra den grundfarve. HSL-variantblokket sender ud HSL-werte med mellemrum mellem dem (f.eks. --primary: 217 91% 60%) samt separate -h, -s, -l-kanaler til brug i moderne farbblanding-/relativfarvefunktioner.