CSS-muuttujageneraattori

Muuta yksi perusväri täydeksi design-token CSS-muuttujajoukoksi. Valitse heksadesimaalinen perusväri, nimeä muuttuja, valitse etuliite, ja valinnaisesti luo 50–950-sävyasteikko ja/tai HSL-kanavan erittely. Lähtötulos on valmis liitettäväksi :root { ... } -lohko, jossa sävytasot on johdettu säätämällä HSL-valoisuutta säilyttäen sävyn ja kylläisyyden perusväristäsi.

1. Valitse Base Color (Perusväri) värivalitsimella (tai kirjoita heksadesimaaliarvo). 2. Anna Variable Name (Muuttujanimi) (esim. primary) — käytetään jälkiliitteenä etuliitteesi jälkeen. 3. Aseta Prefix (Etuliite) (oletus --, saa automaattisesti loppuviivan jos puuttuu). 4. Valitse Generate Shades (Luo sävyt) lähettääksesi 50–950-asteikon, ja/tai Generate HSL lähettääksesi raakaa HSL-kanavan erittelyn. 5. Napsauta Generate, sitten Copy kopioaksesi CSS-lohkon.

Sävyt tuotetaan muuntamalla perusväri HSL-muotoon ja korvaamalla kiinteät valoisuustasot: 50→97%, 100→94%, 200→86%, 300→76%, 400→64%, 500 (perusvärisi muuttumaton), 600→42%, 700→34%, 800→26%, 900→20%, 950→12%. Sävy ja kylläisyys otetaan perusväristäsi. HSL-varianttilohko lähettää välilyönneillä erotetun HSL:n (esim. --primary: 217 91% 60%) plus erilliset -h, -s, -l -kanavat moderniin color-mix/relative-color -funktioiden käyttöön.