På en nettside har hver farge en jobb: bakgrunn, tekst, knapper, lenker og varsler. Disse 12 palettene er laget for nettopp det, med lys eller mørk bakgrunn, en lesbar tekstfarge og en aksent til knapper. Kopier HEX-kodene rett inn i CSS-en eller nettverktøyet ditt.
Ren SaaS-blå
Nesten hvit bakgrunn, svært mørkeblå tekst og klare blå knapper.
Diskret bedrift
Til advokatfirmaer, konsulentselskaper eller industribedrifter.
Varm nettbutikk
Oransje får kjøpsknappene til å lyse på en varm bakgrunn.
Mørk modus med grønt
Mørke bakgrunner i lag, lys tekst og en grønn aksent til handlinger.
Naturlig og økologisk
Til butikker med naturprodukter, gårder eller velværemerker.
Vennlig pastell
Imøtekommende; den mørke blågrå tonen holder teksten lesbar.
Redaksjonell med rødt
Til blogger, magasiner og medier; rødt fremhever lenker og overskrifter.
Tech-lilla
Vanlig i digitale produkter, nettkurs og KI-verktøy.
Turkis og korall
To komplementære aksenter: én til knapper, én til varsler.
Mørk luksus
Til hoteller, restauranter eller premiummerker der bildene leder.
Helse og velvære
Ren og rolig; fin til klinikker og terapisentre.
Sand og blågrønn
Varm, men seriøs; til reiser, eiendom eller kafeer.
Trykk på en farge for å kopiere HEX-koden. Med blyantikonet åpner du paletten i editoren for å tilpasse den.
Bruk 60-30-10-regelen
Bruk den dominerende fargen (som regel bakgrunnen) på omtrent 60 % av siden, en sekundærfarge på 30 % (seksjoner, kort, topptekst) og aksenten på de resterende 10 %. Spar aksenten til knapper og lenker, så vet de besøkende hvor de skal klikke.
Sjekk tekstkontrasten
Tilgjengelighetsretningslinjene WCAG krever en kontrast på minst 4,5:1 for vanlig tekst. Lysegrått på hvitt ser elegant ut, men er vanskelig å lese, særlig på mobilen i sola. Kjør en kontrastsjekk før du publiserer.
Bestem farger for tilstander og varsler
I tillegg til merkevarens palett trenger en nettside farger for feil (rødt), suksess (grønt) og advarsler (gult eller oransje). Velg varianter som passer paletten din, og bruk dem konsekvent i skjemaer og meldinger.