Kortversjonen
- En gradientpalett er en liten, navngitt familie av gradienter laget fra én grunnpalett og noen få felles regler.
- De fleste merkevarer trenger fire til seks gradienter: en hovedvariant, en dyp variant, en rolig lys variant, radiell glød, en aksent og en rolig tekstvariant.
- Gradienter oppfattes som én familie når de deler grunnfarge, retning, faste stopp-posisjoner og like trinn i lyshet.
- Navngitte egendefinerte CSS-egenskaper holder gradientene identiske på nettstedet, i appen og i designfiler.
- En gradientpalett bør testes i faktiske formater med ekte ord før den tas inn i merkevareretningslinjene.
På denne siden
En gradientpalett er en liten, navngitt familie av gradienter bygget fra én fargepalett og noen få felles regler, så alle gradientene merkevaren bruker, virker beslektet. Begynn med fem eller seks grunnfarger, gi hver gradient en oppgave (hovedvariant, dyp, rolig, glød, aksent, tekst) og fastsett det som gjør dem til søsken: samme grunnfarge, samme vinkel, samsvarende stopp-posisjoner og jevne trinn i lyshet. Lagre dem som designvariabler og test dem i ekte design før andre bruker dem.
Hvorfor en merkevare trenger mer enn én gradient
Én gradient blir strukket til oppgaver den ikke kan løse. Den klare hovedblandingen som ser flott ut i et lanseringsinnlegg, er for kraftig bak et avsnitt, for mørk i en lys nettseksjon og for travel på et lysbilde fullt av tall. Teamet improviserer, noen velger en lignende blåfarge, og innen et år har merkevaren femten gradienter som nesten passer sammen. En palett hindrer det ved å bestemme variasjonene på forhånd.
En haug med gradienter
- Hver laget separat til ett design
- Ulike vinkler på hver side
- Farger som nesten treffer merkevaren
- Ingen navn, så ingen kan be om en bestemt
- Kopiert på øyemål fra gamle filer
En gradientpalett
- Bygget fra én grunnpalett
- Én retning brukt overalt
- Nøyaktige hex-koder og stopp-posisjoner
- Navn etter oppgave: hoved, dyp, rolig
- Lagret som designvariabler i kode og filer
Begynn med en grunnpalett
Hver gradient i familien bør lages bare av disse fargene eller lysere og mørkere varianter av dem. Hvis merkevarefargene ikke er fastlagt ennå, start med slik velger du merkevarefarger. En nyttig grunnpalett har mørk bunn, to eller tre trinn av hovedtonen, nesten hvitt og én aksent fra et annet sted i fargesirkelen.
Gi hver gradient en oppgave
Gi gradientene navn etter det de gjør, ikke hvordan de ser ut. «Hoved» overlever en fargefornyelse; «lilla solnedgang» gjør ikke det. Seks roller dekker nesten alle merkevarer.
Hva som skiller den
Hva som skiller den
Hva som skiller den
Hva som skiller den
Hva som skiller den
Hva som skiller den
Reglene som gjør gradienter til en familie
- Én grunnfarge. Alle mørke gradienter ender i samme blekkfarge, alle lyse i samme skjellfarge. Øyet bruker grunnfargen til å gruppere dem.
- Én retning. Velg en vinkel, 135 eller 160 grader, og behold den. Blandede vinkler gjør siden tilfeldig. Gradientvinkel forklarer valget.
- Samsvarende stopp. Gjenbruk samme posisjoner, for eksempel 0, 45, 75 og 100 prosent, så overgangene har samme rytme. Gradientstopp dekker avstand.
- Jevne lyshetstrinn. Hver farge i blandingen bør være et tydelig trinn lysere eller mørkere enn naboen. Ujevne trinn gir en lys stripe i midten.
- Én sparsom aksent. Aksentfargen vises bare i én gradient. Fordelt over alle slutter den å være en aksent.
- Fast interpolasjon i kode. Hvis nettstedet blander i oklch, bør alle gradienter gjøre det, ellers ser de samme kodene ulike ut mellom seksjonene.
Gjør gradientpaletten til designvariabler
En palett som bare finnes i en PDF, tastes inn igjen og spriker. Lagre hver gradient én gang som en navngitt egendefinert egenskap og referer til den overalt. Designere kan lime de samme verdiene inn i filene sine, og en senere fornyelse endrer én linje per gradient. Designvariabler dekker den bredere praksisen.
:root {
--ink: #14112b;
--plum: #4c1d95;
--violet: #7c3aed;
--orchid: #c084fc;
--shell: #faf5ff;
--ember: #f97316;
--gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
--gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
--gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
--gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
--gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
--gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}
.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }Test i faktiske formater
Fargeprøver lyver. En gradient som virker balansert som lite kvadrat, kan legge det lyseste båndet rett bak overskriften når den fyller en Story på 1080×1920. Før du publiserer paletten, lag tre ekte design med ekte ord: et stående innlegg, en Story og et toppbilde til et nettsted. Sjekk at tekstgradienten holder avsnittene lesbare med testene i fargekontrast og tilgjengelighet, og at hoved og dyp virker beslektet side om side.
Hovedrollen på et stående innlegg på 1080×1350.
Samme familie på en Story på 1080×1920. Sjekk at det lyseste båndet fortsatt holder seg unna overskriften i det høyere formatet.
Med Gradiently Pro holder merkevaresettet fargepalettene sammen med logo og skrifter, og Designer bruker dem når den setter opp nye design. Hvis hovedgradienten skal være det folk kjenner igjen, dekker merkevaregradienter hvordan én gradient blir en signatur.
Spørsmål folk stiller
Hva er en gradientpalett?
Et lite, navngitt sett med gradienter laget av én fargepalett med felles regler, så de virker som én familie uansett hvor de vises.
Hvor mange gradienter bør en merkevare ha?
Fire til seks dekker de fleste behov: en hovedvariant, en dyp og en rolig variant, radiell glød, en aksent og én rolig nok til tekst. Små merkevarer kan begynne med tre.
Hvordan får jeg gradienter til å høre sammen?
Bruk samme grunnfarge, samme vinkel, samme stopp-posisjoner og jevne lyshetstrinn i alle gradientene.
Hvordan bør jeg lagre merkevaregradienter til et nettsted?
Definer fargene og hver gradient én gang som egendefinerte CSS-egenskaper, og referer deretter til navnene i alle komponenter.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår