Kortversjonen
- En grønn gradient blander nyanser av grønt, fra blek mint og salvie til smaragd, skog og elektrisk lime, ofte med en nabofarge som blågrønt eller gult.
- Grønt forbindes vidt med natur, helse, vekst og penger, og derfor er det så vanlig innen bærekraft, velvære og finans.
- Grønt blander seg rent mot blågrønt, blått og gult, men har en tendens til å bli grått når det blandes direkte mot rosa, rødt eller lilla.
- Hvit tekst fungerer på dype grønnfarger som #14532d, men en mellomgrønn som #16a34a trenger mørk tekst eller store størrelser.
- Uventede grønnfarger som oliven, flaskegrønn og chartreuse, kombinert med en partnerfarge som ikke er hentet fra naturen, unngår det slitne øko-uttrykket.
På denne siden
En grønn gradient blander nyanser av grønt, fra blek mint og salvie via smaragd og skog til elektrisk lime, ofte med en nabofarge som blågrønt eller gult. Grønt har større spenn enn nesten noen annen farge: det kan føles friskt og rent, dypt og kostbart, eller høylytt og syntetisk. Nedenfor er paletter med grønne gradienter for hver stemning med CSS du kan kopiere, tekstfargene som fungerer på dem, og hvordan du unngår å ligne enhver bærekraftsrapport.
Den grønne familien
Grønnfarger heller to veier. Mot gult blir de lime, chartreuse og oliven, som føles varme, energiske eller jordnære. Mot blått blir de blågrønn, jade og smaragd, som føles kjølige, rolige og polerte. Grå dem ned, og du får salvie, som er myk og voksen. Gjør dem mørkere, og du får skoggrønn og flaskegrønn, som føles etablerte og litt luksuriøse.
Hva en grønn gradient signaliserer
De mest utbredte assosiasjonene til grønt er natur, vekst, helse og friskhet, som kommer rett fra plantene. Konvensjoner har lagt til flere: kjør i trafikklys, penger i USA på grunn av sedlene, og suksess i dashbord og finansapper. Det har også religiøse og nasjonale betydninger noen steder; fargenes betydning rundt om i verden går gjennom dem.
I praksis betyr det at nyansen gjør det meste av snakkingen. Mint sier rent. Salvie sier rolig og gjennomtenkt. Skog og flaske sier tradisjon. Lime sier energi. Blågrønt sier polert. Bestem hvilken av dem du mener før du velger en gradient, så blir palettene nedenfor mye lettere å velge mellom.
Friske og mintgrønne gradienter
Bleke grønnfarger føles rene, kjølige og lette. De passer til hudpleie, helse, mat og alt som skal føles friskt. Hold teksten mørk, og varm dem litt opp i den ene enden så de ikke føles kliniske.
Dype og skoggrønne gradienter
Mørke grønnfarger er noen av de mest kostbart utseende fargene som finnes. Tenk på racerbiler, gamle biblioteker og tradisjonsrik emballasje. De bærer hvit og kremfarget tekst godt og passer vakkert sammen med gull, messing og varm off-white.
Elektrisk lime og neongrønne gradienter
Syregrønt og lime er høylytte og syntetiske på den beste måten. De passer til sport, musikk, spill og teknologilanseringer. På en nesten svart bunn gløder de; på hvitt kan de være vanskelige å se på, så bruk dem på små områder der.
Gradienter i blågrønt og jade
Grønt som heller mot blått, er rolig, polert og stille selvsikkert. Det fungerer godt for finans, velvære og reise, og er mindre forventet enn ren blå i de kategoriene.
Unngå bærekraftsklisjeen
Fordi grønt er så sterkt knyttet til natur, har det blitt standardfargen for alt som er øko, organisk eller bærekraftig. En sterk bladgrønn, en hvit bakgrunn og et bladikon leses nå som kategorien, ikke som noe bestemt selskap. Jobber du i det feltet og vil bli lagt merke til, endrer du minst én av de tre tingene.
Klisjé
- Sterk bladgrønn på hvitt
- Grønt blandet bare med mer grønt og blått
- Blader, jordkloder og spirer som pynt
- Glatt, blank digital finish
Friskt
- Oliven, flaskegrønn, salvie eller chartreuse
- En partner som ikke er fra naturen: rosa, lilla, krem eller svart
- Skrift og tekstur i stedet for ikoner
- Papirkorn eller et matt materiale
Grønt og rosa er et særlig godt par til dette, fordi kombinasjonen føles botanisk uten å være bokstavelig. De ligger likevel nesten rett overfor hverandre på fargesirkelen, så hold dem i adskilte områder i stedet for å blande den ene inn i den andre. Komplementærfarger forklarer hvorfor.
linear-gradient(90deg, #0b3b2e 0% 62%, #f4b6c2 62% 100%)Tekst på grønne gradienter
| Tekst på bakgrunn | Kontrast | Dom |
|---|---|---|
Hvit på #14532d | 9.1:1 | Utmerket |
Hvit på #15803d | 5.0:1 | Bra for brødtekst |
Hvit på #16a34a | 3.3:1 | Bare stor tekst |
#052e16 på #22c55e | 6.5:1 | Mørkt blekk fungerer her |
#052e16 på #a3e635 | 9.9:1 | Utmerket |
#052e16 på #86efac | 10.6:1 | Utmerket |
Sterke grønnfarger er lysere enn de ser ut, så hvit tekst på dem består som regel ikke. Et svært mørkt grønt blekk leses bedre og holder alt i familien. Sjekk det lyseste punktet bak hvit tekst på enhver gradient; tekst på en gradient viser hvordan.
Et rolig, dypt felt for et redaksjonelt innlegg.
En høylytt nedtellingshistorie, der en elektrisk grønn ville glødet.
.panel {
background-color: #0b3b2e;
background-image: linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%);
color: #f5f0e6;
}Flere paletter hentet fra skoger, marker og vann finner du i fargepaletter fra naturen.
Spørsmål folk stiller
Hvilke farger passer til grønt i en gradient?
Blågrønt, blått, gult og lime blander seg rent med grønt. Rosa, rødt og lilla er slående partnere, men bør ligge i adskilte områder, for når grønt blandes inn i dem, blir det grått.
Hva er CSS-en for en mørkegrønn gradient?
For eksempel gir linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%) en dyp flaskegrønn. Hver palett på denne siden kan kopieres som CSS.
Hvilken tekstfarge fungerer på grønt?
Hvit eller krem fungerer på dype grønnfarger. På sterke eller lyse grønnfarger bruker du et svært mørkt grønt blekk, fordi hvit tekst som regel faller under anbefalt kontrast.
Hvordan bruker jeg grønt uten å ligne et øko-merke?
Velg mindre forventede grønnfarger som oliven, flaskegrønn eller chartreuse, kombiner dem med en farge som ikke er fra naturen, som rosa eller lilla, og bruk tekstur eller skrift i stedet for bladmotiver.
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


