Tailwinds fargepalett

Tailwinds standardfargepalett inneholder 22 navngitte fargefamilier, hver med 11 nyanser nummerert fra 50 til 950. Familiene omfatter nøytrale farger (slate, gray, zinc, stone, neutral), varme toner (red, orange, amber, yellow), kalde toner (lime, green, emerald, teal, cyan, sky, blue, indigo, violet) og livlige aksentfarger (purple, fuchsia, pink, rose). Alle nyansene er forhåndsgodkjent for bruk i designsystemet Deres.

Nyansenumrene uttrykker lysstyrke: 50 er nesten hvit (en svak fargetone), 100–300 er lyse pasteller, 400–600 er livlige mellomtoner, 700–800 er mørke og mettede, og 900–950 er nesten svarte. Som tommelfingerregel brukes 50–200 til bakgrunner, 400–600 til ikoner og aksenter og 700–900 til tekst for å sikre lesbar kontrast på hvitt.

Bruk bakgrunnsfarger med verktøyet bg-{color}-{shade}. Dette angir CSS-egenskapen background-color på elementet. Bruk en lys nyanse som bg-indigo-50 til diskrete seksjonsbakgrunner, en mellomtone som bg-indigo-600 til primærknapper og en mørk nyanse som bg-indigo-950 til bakgrunner i bunntekster og sidepaneler. Kombiner alltid med en tekstfarge som gir tilstrekkelig kontrast.

I tillegg til den nummererte paletten tilbyr Tailwind flere spesielle fargenøkkelord. bg-white og bg-black angir ren hvit og svart. bg-transparent gjør bakgrunnen gjennomsiktig (arver fra forelderen). bg-current bruker elementets gjeldende tekstfarge som bakgrunn. bg-inherit arver bakgrunnen uttrykkelig fra foreldreelementet.

Valget mellom varme og kalde farger påvirker den følelsesmessige tonen i designet. Varme farger (red, orange, amber, yellow) formidler energi, hastverk og varme — godt egnet for varsler, salgsetiketter og advarsler. Kalde farger (blue, indigo, teal, cyan) formidler tillit, ro og profesjonalitet — ideelle for primærhandlinger, datadashbord og bedriftsapplikasjoner.

Tailwind har fem nøytrale gråfamilier: slate (blågrå tone), gray (nøytral), zinc (svakt varm), neutral (helt nøytral) og stone (varm beige tone). Valget mellom dem er subtilt, men viktig for merkevaren. Slate passer for teknologiske produkter og utviklerprodukter. Gray fungerer universelt. Stone passer for naturlige, jordnære merkevarer. Velg én og bruk den konsekvent gjennom hele prosjektet.

En praktisk bruk av Tailwinds fargefamilier er å bygge et system for statusindikatorer. Knytt semantiske tilstander til fargefamilier: suksess til grønn, advarsel til gul, feil til rød, informasjon til blå og nøytral til grå. Bruk nyanse 100 til bakgrunnen og nyanse 700 til teksten for å sikre både kontrast og et visuelt helhetlig uttrykk.

Skråstrekmodifikatoren for opasitet fungerer også for bakgrunnsfarger. bg-blue-600/20 bruker blue-600-fargen med 20 % opasitet og skaper en gjennomskinnelig fargetone. Dette brukes ofte til overleggsbakgrunner, effekter med frostet glass og fargede uthevingsbakgrunner bak innhold, uten å skjule det som ligger bak fullstendig.

Et vanlig mønster er å velge én primærfarge for de viktigste interaktive elementene og én aksentfarge for å fremheve viktig informasjon. For eksempel indigo som primærfarge og amber som aksentfarge. Begge fargene finnes allerede i Tailwinds palett, slik at De umiddelbart har et komplett spekter av nyanser uten å konfigurere noe.

I mørk modus går bakgrunnene fra lyse til mørke nyanser. Bruk prefikset dark: til å angi bakgrunnsfarger for mørkt tema. Et vanlig mønster er: hovedbakgrunn bg-white dark:bg-gray-900, kortoverflate bg-gray-50 dark:bg-gray-800 og elementer med høyere nivå bg-white dark:bg-gray-700. Dette systemet med tre nivåer av høyde skaper dybde i mørke brukergrensesnitt.

Hvis standardpaletten ikke passer til merkevaren Deres, kan De utvide den i tailwind.config.js under theme.extend.colors. De kan legge til helt nye fargefamilier med egendefinerte nyanser eller legge til én enkelt merkevarefarge. Når den er definert, er den nye fargen tilgjengelig med alle Tailwind-verktøyklasser: bg-brand-500, text-brand-700, border-brand-300 og så videre.

I denne leksjonen lærte De: Tailwinds 22 fargefamilier har hver 11 nyanser fra 50 (lys) til 950 (mørk), bg-{color}-{shade} bruker en bakgrunnsfarge, og /opacity-modifikatoren legger til gjennomsiktighet, og varme farger formidler at noe haster, mens kjølige farger formidler tillit. Deretter skal vi lage gradienter med Tailwinds verktøyklasser for gradientbakgrunner.