Gjør én farge om til komplette skalaer med lysere nyanser, mørkere nyanser og dempede toner, og eksporter dem som CSS-variabler — i nettleseren din.
Et designsystem trenger sjelden én farge: det trenger en familie. Lysere nyanser (tints), mørkere nyanser (shades) og dempede toner er de tre klassiske måtene å bygge den familien fra én enkelt fargetone. En tint er fargen blandet med hvitt, som gir lysere, mykere varianter til bakgrunner, hover-flater og deaktiverte tilstander. En shade er fargen blandet med svart, som gir mørkere varianter til tekst på lys bakgrunn, kantlinjer og nedtrykte tilstander. En tone er fargen blandet med grått, som senker metningen uten å endre lysheten like brått — den minst kjente av de tre, og den som gir det dempede, redaksjonelle uttrykket rene tints og shades ikke klarer.
Matematikken her er bevisst enkel og forutsigbar: hvert trinn er en lineær interpolasjon av RGB-kanalene mellom grunnfargen din og målet (hvitt #ffffff, svart #000000 eller mellomgrått #808080), i steg på 10 %, slik at det tiende trinnet lander nøyaktig på målet. Det er den samme konvensjonen de klassiske tint- og shade-generatorene bruker, og den gjør hver verdi reproduserbar — du kan regne ut hvilken som helst fargerute for hånd. Det er verdt å kjenne kompromisset: fordi interpolasjonen skjer i sRGB og ikke i et persepsjonsbasert rom som OKLCH, blir de opplevde lyshetstrinnene ikke helt jevne, særlig for svært mettede gul- og cyanfarger. For grensesnittskalaer er det som regel greit, og ofte å foretrekke, siden resultatene holder seg nær den opprinnelige fargetonen.
Eksporten er der dette blir praktisk. Ett klikk kopierer paletten som egendefinerte CSS-egenskaper, klar til å limes inn i en :root-blokk, eller som en ren liste med hex-koder til et designverktøy. Slår du på navn i Tailwind-stil, remappes paletten til den velkjente skalaen fra 50 til 900 — 50 til 400 lysner, 500 er grunnfargen din, 600 til 900 mørkner — som limes rett inn i et Tailwind-tema eller en hvilken som helst token-fil som følger samme konvensjon. Du kan også laste ned paletten som en .css-fil. Hver beregning og selve filen lages 100 % i nettleseren din; fargen du velger sendes aldri til en server.
En tint er fargen din blandet med hvitt, en shade er fargen din blandet med svart, og en tone er fargen din blandet med grått. Tints og shades endrer lysheten; toner senker først og fremst metningen og gir et dempet resultat på omtrent samme lyshet.
Hvert trinn er en rett lineær blanding av RGB-kanalene mellom grunnfargen din og hvitt, svart eller 50 % grått, i steg på 10 % — så den tiende tinten er rent hvitt og den tiende shaden er rent svart. Verdiene er fullt ut reproduserbare.
Ja. Slå på navn i Tailwind-stil, så bruker eksporten skalaen fra 50 til 900, med 500 som grunnfargen din, klar til å limes inn i temakonfigurasjonen din eller en fil med CSS-variabler.
Ikke automatisk. Skalaen er matematisk jevn, ikke persepsjonsmessig jevn, så du må fortsatt sjekke par av tekst og bakgrunn mot WCAG-tersklene for kontrast — som tommelfingerregel bør du kombinere de lyseste tintene med de mørkeste shadene.
Nei. Paletten, CSS-eksporten og den nedlastede filen lages alle lokalt i JavaScript på enheten din — ingenting overføres til eller lagres på noen server.
Vai.la gjør enhver URL om til en kortlenke med klikkstatistikk, QR Code og din egen biolink.
Vai.la er ikke ansvarlig for hvordan verktøyene brukes, eller for beslutninger tatt på grunnlag av resultatene.