CSS-variabelgenerator

Gjør en enkelt basis-farge om til et komplett sett med CSS-variabler for design-tokens. Velg en heksadesimal basis-farge, navngi variabelen, velg et prefiks, og generer valgfritt en 50–950-nyanseskala og/eller en oppdeling av HSL-kanaler. Utdata er en klar-til-lim :root { ... }-blokk der nyansenivåene utledes ved å justere HSL-lysstyrken mens fargetone (hue) og metning (saturation) beholdes fra basis-fargen din.

1. Velg en Base Color med fargevelgeren (eller skriv en heksadesimal verdi). 2. Skriv inn et Variable Name (f.eks. primary) — brukes som suffiks etter prefikset ditt. 3. Sett Prefix (standard --, får automatisk en bindestrek til slutt hvis den mangler). 4. Huk av for Generate Shades for å sende ut 50–950-skalaen, og/eller Generate HSL for å sende ut den rå HSL-kanaloppdelingen. 5. Klikk Generate, og deretter Copy for å kopiere CSS-blokken.

Nyanser produseres ved å konvertere basis-fargen til HSL og erstatte med faste lysstyrkenivåer: 50→97 %, 100→94 %, 200→86 %, 300→76 %, 400→64 %, 500 (basis-fargen din uendret), 600→42 %, 700→34 %, 800→26 %, 900→20 %, 950→12 %. Fargetone og metning hentes fra basis-fargen. HSL-variantblokken sender ut mellomromsskilt HSL (f.eks. --primary: 217 91% 60%) pluss egne -h-, -s- og -l-kanaler for bruk i moderne color-mix-/relative-color-funksjoner.