Kort fortalt
- En gradientpalet er en lille, navngivet familie af gradienter lavet af én grundpalet og nogle få fælles regler.
- De fleste brands har brug for fire til seks gradienter: en hero, en dyb udgave, en stille lys udgave, en radial glød, en accent og en rolig til tekst.
- Gradienter læses som én familie, når de deler en bundfarve, en retning, ensartede stoppositioner og de samme trin i lyshed.
- Når gradienter gemmes som navngivne CSS custom properties, forbliver de identiske på tværs af website, app og designfiler.
- En gradientpalet bør testes på rigtige formater med rigtige ord, før den skrives ind i brandets retningslinjer.
På denne side
En gradientpalet er en lille, navngivet familie af gradienter bygget af én farvepalet og en håndfuld fælles regler, så hver gradient, et brand bruger, ser beslægtet ud. Start med fem eller seks grundfarver, giv hver gradient en opgave (hero, dyb, stille, glød, accent, tekst), og lås så de ting, der gør dem til søskende: samme bundfarve, samme vinkel, matchende stoppositioner og jævne trin i lyshed. Skriv dem ned som tokens, og test dem på rigtige designs, før nogen andre bruger dem.
Hvorfor et brand har brug for mere end én gradient
En enkelt gradient bliver strakt ud over opgaver, den ikke kan klare. Den klare heroblanding, der ser fantastisk ud på et lanceringsopslag, er for højlydt bag et afsnit, for mørk til en lys sektion på et website og for travl til en slide fuld af tal. Så improviserer teamet, nogen vælger en blå, der ligger tæt på, og inden for et år har brandet femten gradienter, der næsten matcher. En palet forhindrer det ved at bestemme variationerne på forhånd.
En bunke gradienter
- Hver lavet for sig, til ét design
- Forskellige vinkler på hver side
- Farver, der næsten matcher brandet
- Intet navn, så ingen kan bede om en
- Kopieret efter øjemål fra gamle filer
En gradientpalet
- Bygget af én grundpalet
- Én retning, brugt overalt
- Præcise hexkoder og stoppositioner
- Navngivet efter opgave: hero, dyb, stille
- Gemt som tokens i kode og filer
Start fra en grundpalet
Hver gradient i familien bør kun laves af disse farver eller af lysere og mørkere udgaver af dem. Ligger dine brandfarver ikke fast endnu, så få styr på det først med sådan vælger du brandfarver. En brugbar grundpalet har en mørk bund, to eller tre trin af hovedfarven, en næsten hvid og én accent fra et andet sted på farvecirklen.
Giv hver gradient en opgave
Navngiv gradienter efter, hvad de gør, ikke hvordan de ser ud. »Hero« overlever en farveopdatering; »lilla solnedgang« gør ikke. Seks roller dækker næsten ethvert brand.
Hvordan den adskiller sig
Hvordan den adskiller sig
Hvordan den adskiller sig
Hvordan den adskiller sig
Hvordan den adskiller sig
Hvordan den adskiller sig
Reglerne, der gør gradienter til en familie
- Én bund. Hver mørk gradient ender i den samme blæk, hver lys i den samme musling. Bunden er det, øjet bruger til at gruppere dem.
- Én retning. Vælg en vinkel, 135 grader eller 160 grader, og hold fast i den. Blandede vinkler får en side til at føles tilfældig. Gradientvinkel forklarer valget.
- Matchende stop. Genbrug de samme positioner (for eksempel 0, 45, 75 og 100 procent), så overgangene har samme rytme. Farvestop i gradienter handler om afstande.
- Jævne trin i lyshed. Hver farve i en blanding bør være et tydeligt trin lysere eller mørkere end naboen. Ujævne trin giver en lys stribe i midten.
- Én accent, i små doser. Accentfarven optræder kun i én gradient. Spredt ud over dem alle holder den op med at være en accent.
- En fast interpolation i kode. Blander dit website i oklch, bør alle gradienter gøre det, ellers vil de samme koder se forskellige ud mellem sektionerne.
Gør gradientpaletten til tokens
En palet, der kun lever i en PDF, bliver tastet ind igen og glider. Gem hver gradient én gang som en navngiven custom property, og henvis til den overalt. Designere kan indsætte de samme værdier i deres filer, og en fremtidig opdatering ændrer én linje pr. gradient. Design tokens handler om den bredere praksis.
: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 den på rigtige formater
Farveprøver lyver. En gradient, der ser afbalanceret ud som en lille firkant, kan lægge sit klareste bånd lige bag en overskrift, når den fylder en story på 1080×1920. Før du udgiver paletten, så lav tre rigtige designs med rigtige ord: et stående opslag, en story og en hero til et website. Tjek, at tekstgradienten holder afsnit læselige, med kontrasttjekkene i farvekontrast og tilgængelighed, og at hero og dyb ser beslægtede ud, når de står side om side.
Hero-rollen på et stående opslag i 1080×1350.
Den samme familie på en story i 1080×1920. Tjek, at det klareste bånd stadig går fri af overskriften i det højere format.
Med Gradiently Pro rummer brandkittet dine farvepaletter sammen med dit logo og dine skrifttyper, og Designer anvender dem, når den sætter nye designs op. Er din herogradient tænkt som det, folk genkender, viser brandgradienter, hvordan du gør én gradient til en signatur.
Spørgsmål, folk stiller
Hvad er en gradientpalet?
Et lille, navngivet sæt gradienter lavet af én farvepalet med fælles regler, så de ligner én familie, uanset hvor de optræder.
Hvor mange gradienter bør et brand have?
Fire til seks dækker de fleste behov: en hero, en dyb og en stille udgave, en radial glød, en accent og én, der er rolig nok til tekst. Små brands kan starte med tre.
Hvordan får jeg gradienter til at se ud, som om de hører sammen?
Brug samme bundfarve, samme vinkel, samme stoppositioner og jævne trin i lyshed på tværs af alle gradienter.
Hvordan skal jeg gemme brandgradienter til et website?
Definér farverne og hver gradient én gang som CSS custom properties, og henvis så til de navne i hver komponent.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil