Kortversionen
- En gradientpalett är en liten, namngiven familj av gradienter gjorda av en baspalett och några gemensamma regler.
- De flesta varumärken behöver fyra till sex gradienter: en hero, en djup version, en stilla ljus version, ett radiellt sken, en accent och en lugn för text.
- Gradienter läses som en familj när de delar en grundfärg, en riktning, konsekventa stopppositioner och samma steg i ljushet.
- Att lagra gradienter som namngivna CSS-variabler håller dem identiska över en webbplats, en app och designfiler.
- En gradientpalett bör testas på riktiga format med riktiga ord innan den skrivs in i varumärkesriktlinjer.
På den här sidan
En gradientpalett är en liten, namngiven familj av gradienter byggd av en färgpalett och en handfull gemensamma regler, så att varje gradient ett varumärke använder ser släkt ut. Börja med fem eller sex basfärger, ge varje gradient en uppgift (hero, djup, stilla, sken, accent, text) och fixera sedan det som gör dem till syskon: samma grundfärg, samma vinkel, matchande stopppositioner och jämna steg i ljushet. Skriv ner dem som variabler och testa dem på riktiga designer innan någon annan använder dem.
Varför ett varumärke behöver mer än en gradient
En enda gradient sträcks över uppgifter den inte klarar. Den klara hero-blandningen som ser fantastisk ut på ett lanseringsinlägg är för högljudd bakom ett stycke, för mörk för en ljus webbsektion och för stökig för en bild full av siffror. Team improviserar då, någon väljer ett blått i närheten, och inom ett år har varumärket femton gradienter som nästan matchar. En palett förhindrar det genom att bestämma variationerna i förväg.
En hög gradienter
- Var och en gjord för sig, för en design
- Olika vinklar på varje sida
- Färger som nästan matchar varumärket
- Inget namn, så ingen kan be om en
- Kopierade på känn från gamla filer
En gradientpalett
- Byggd av en baspalett
- En riktning, använd överallt
- Exakta hexkoder och stopppositioner
- Namngivna efter uppgift: hero, djup, stilla
- Lagrade som variabler i kod och filer
Börja från en baspalett
Varje gradient i familjen ska bara göras av de här färgerna, eller av nyanser och toner av dem. Om dina varumärkesfärger inte är klara än, ordna det först med hur du väljer varumärkesfärger. En användbar bas har en mörk grund, två eller tre steg av huvudnyansen, ett nästan vitt och en accent från någon annan del av hjulet.
Ge varje gradient en uppgift
Namnge gradienter efter vad de gör, inte efter hur de ser ut. ”Hero” överlever en färgförnyelse, ”lila solnedgång” gör det inte. Sex roller täcker nästan alla varumärken.
Hur den skiljer sig
Hur den skiljer sig
Hur den skiljer sig
Hur den skiljer sig
Hur den skiljer sig
Hur den skiljer sig
Reglerna som gör gradienter till en familj
- En grund. Varje mörk gradient slutar i samma bläck, varje ljus i samma snäcka. Grunden är det ögat använder för att gruppera dem.
- En riktning. Välj en vinkel, 135 grader eller 160 grader, och behåll den. Blandade vinklar får en sida att kännas slumpmässig. Gradientvinkel förklarar valet.
- Matchande stopp. Återanvänd samma positioner (till exempel 0, 45, 75, 100 procent) så att övergångarna får samma rytm. Gradientstopp går igenom avstånden.
- Jämna steg i ljushet. Varje färg i en blandning ska vara ett tydligt steg ljusare eller mörkare än sin granne. Ojämna steg ger ett klart streck i mitten.
- En accent, ransonerad. Accentfärgen förekommer i bara en gradient. Spridd över alla slutar den vara en accent.
- En fast interpolering i kod. Om din sajt blandar i oklch ska alla gradienter göra det, annars ser samma koder olika ut mellan sektioner.
Gör gradientpaletten till variabler
En palett som bara lever i en PDF skrivs om och glider iväg. Lagra varje gradient en gång som en namngiven variabel och hänvisa till den överallt. Formgivare kan klistra in samma värden i sina filer, och en framtida förnyelse ändrar en rad per gradient. Designvariabler tar upp den bredare praktiken.
: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); }Testa den på riktiga format
Färgprover ljuger. En gradient som ser balanserad ut som en liten kvadrat kan lägga sitt klaraste band rakt bakom en rubrik när den fyller en story i 1080×1920. Innan du publicerar paletten, gör tre riktiga designer med riktiga ord: ett stående inlägg, en story och en webbplats-hero. Kontrollera att textgradienten håller styckena läsbara med kontrastkontrollerna i färgkontrast och tillgänglighet, och att hero och djup ser släkt ut när de ligger sida vid sida.
Hero-rollen på ett stående inlägg i 1080×1350.
Samma familj på en story i 1080×1920. Kontrollera att det klaraste bandet fortfarande håller sig utanför rubriken i den högre bildrutan.
Med Gradiently Pro rymmer varumärkeskitet dina färgpaletter vid sidan av logotyp och typsnitt, och Designer tillämpar dem när den lägger ut nya designer. Om din hero-gradient ska vara det folk känner igen, tar varumärkesgradienter upp hur du gör en gradient till en signatur.
Vanliga frågor
Vad är en gradientpalett?
En liten, namngiven uppsättning gradienter gjorda av en färgpalett med gemensamma regler, så att de ser ut som en familj var de än dyker upp.
Hur många gradienter bör ett varumärke ha?
Fyra till sex täcker de flesta behov: en hero, en djup och en stilla version, ett radiellt sken, en accent och en som är lugn nog för text. Små varumärken kan börja med tre.
Hur får jag gradienter att se ut att höra ihop?
Använd samma grundfärg, samma vinkel, samma stopppositioner och jämna steg i ljushet över varje gradient.
Hur ska jag lagra varumärkesgradienter för en webbplats?
Definiera färgerna och varje gradient en gång som CSS-variabler och hänvisa sedan till de namnen i varje komponent.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil