# Gröna gradienter: fräscha, djupa och elektriska [Canonical HTML page](https://gradiently.design/sv/guide/green-gradient) Grönt kan vara en vårmorgon, en privat herrklubb eller en raveaffisch. Här är gröna gradienter för alla tre, med koder, och en väg ut ur bladgröna klichéer. ## The short version - En grön gradient blandar nyanser av grönt, från blek mint och salvia till smaragd, skogsgrönt och elektrisk lime, ofta med en angränsande petrol eller gul. - Grönt förknippas allmänt med natur, hälsa, tillväxt och pengar, vilket är varför det är så vanligt inom hållbarhet, välmående och finans. - Grönt går rent över i petrol, blått och gult, men tenderar att bli grått när det blandas direkt med rosa, rött eller lila. - Vit text fungerar på djupa gröna toner som #14532d, men ett mellangrönt som #16a34a kräver mörk text eller stora storlekar. - Oväntade gröna toner som olivgrönt, flaskgrönt och chartreuse, i par med en icke-naturlig partnerfärg, undviker den trötta miljölooken. En **grön gradient** blandar nyanser av grönt, från blek mint och salvia via smaragd och skogsgrönt till elektrisk lime, ofta med en angränsande petrol eller gul. Grönt har större spännvidd än nästan någon annan färg: det kan kännas fräscht och rent, djupt och dyrt, eller högljutt och syntetiskt. Nedan finns gröna gradientpaletter för varje stämning med CSS att kopiera, de textfärger som fungerar på dem och hur du undviker att se ut som varje hållbarhetsrapport. ## Den gröna familjen Gröna toner lutar åt två håll. Mot gult blir de lime, chartreuse och olivgrönt, som känns varma, energiska eller jordnära. Mot blått blir de petrol, jade och smaragd, som känns svala, lugna och putsade. Gråa ner dem och du får salvia, som är mjuk och vuxen. Mörka dem och du får skogsgrönt och flaskgrönt, som känns etablerade och lite lyxiga. - Mint: #d1fae5 - Salvia: #a3b18a - Lime: #a3e635 - Smaragd: #059669 - Petrol: #0f766e - Olivgrön: #556b2f - Skogsgrön: #14532d - Flaskgrön: #0b3b2e Åtta gröna toner. Versioner av en färgfamilj som lutar åt gult, åt blått, som är gråade och som är djupa. ## Vad en grön gradient signalerar Grönts mest delade associationer är natur, tillväxt, hälsa och friskhet, som kommer direkt från växter. Konventionen har lagt till fler: kör på trafikljus, pengar i USA på grund av sedlarna och framgång i instrumentpaneler och finansappar. Det bär också religiösa och nationella betydelser på vissa håll, och [färgers betydelse i världen](https://gradiently.design/sv/guide/color-meanings-around-the-world) går igenom dem. I praktiken betyder det att nyansen står för det mesta av budskapet. Mint säger rent. Salvia säger lugnt och genomtänkt. Skogsgrönt och flaskgrönt säger anor. Lime säger energi. Petrol säger finish. Bestäm vilket av dem du menar innan du väljer en gradient, så blir paletterna nedan mycket lättare att välja bland. ## Fräscha och mintgröna gradienter Bleka gröna toner känns rena, svala och lätta. De passar hudvård, hälsa, mat och allt som ska kännas fräscht. Håll texten mörk och värm dem lite i ena änden så att de inte känns kliniska. - Mint: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%)` - Vårmorgon: `linear-gradient(160deg, #f0fdf4 0%, #bbf7d0 55%, #fef9c3 100%)` - Salviapapper: `linear-gradient(135deg, #e3eadb 0%, #a3b18a 100%)` - Akvamarin till lime: `linear-gradient(135deg, #ccfbf1 0%, #d9f99d 100%)` Ljusgröna gradienter. De gula och limegröna ändarna tillför värme och hindrar dem från att se kalla ut. ## Djupa och skogsgröna gradienter Mörkgrönt hör till de mest dyrt utseende färgerna som finns. Tänk på racerbilar, gamla bibliotek och traditionsrika förpackningar. De bär vit och gräddvit text väl och passar vackert ihop med guld, mässing och varmt benvitt. - Flaskgrön: `linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%)` - Skogsbotten: `linear-gradient(160deg, #0a1f14 0%, #14532d 55%, #3f7d4e 100%)` - Smaragdglöd: `radial-gradient(circle at 70% 20%, #34d399 0%, #065f46 40%, #022c22 100%)` - Oliv till mässing: `linear-gradient(135deg, #1a2410 0%, #556b2f 60%, #c9b458 100%)` Djupt gröna gradienter. Oliv till mässing visar hur väl mörkgrönt tar emot en varm metallisk partner. ## Elektriska lime- och neongröna gradienter Syra- och limegrönt är högljutt och syntetiskt på bästa sätt. De passar sport, musik, spel och tekniklanseringar. På en nästan svart grund lyser de, på vitt kan de vara svåra att titta på, så använd dem på små ytor där. - Lime på svart: `linear-gradient(135deg, #0a0a0a 0%, #1a2e05 50%, #a3e635 100%)` - Lime till citron: `linear-gradient(135deg, #84cc16 0%, #facc15 100%)` - Syraglöd: `radial-gradient(circle at 50% 50%, #bef264 0%, #4d7c0f 45%, #0c1a05 100%)` - Grön till cyan: `linear-gradient(135deg, #22c55e 0%, #06b6d4 100%)` Elektriskt grönt. Bara grannar: svart, gult och cyan. ## Petrol- och jadegradienter Grönt som lutar åt blått är lugnt, putsat och stillsamt självsäkert. Det fungerar bra för finans, välmående och resor, och är mindre väntat än rent blått inom de kategorierna. - Djup petrol: `linear-gradient(160deg, #042f2e 0%, #0f766e 55%, #5eead4 100%)` - Jade till akvamarin: `linear-gradient(135deg, #064e3b 0%, #0d9488 50%, #67e8f9 100%)` - Lagunljus: `linear-gradient(135deg, #134e4a 0%, #2dd4bf 60%, #f0fdfa 100%)` Petrol och jade. De ligger mellan de gröna ovan och de [blå gradienterna](https://gradiently.design/sv/guide/blue-gradient). ## Så undviker du miljöklichén Eftersom grönt är så starkt kopplat till natur har det blivit standardfärgen för allt som är eko, ekologiskt eller hållbart. Ett klart bladgrönt, en vit bakgrund och en bladikon läses nu som kategorin, inte som något enskilt företag. Om du jobbar där och vill synas, ändra minst en av de tre sakerna. ### Kliché - Klart bladgrönt på vitt - Grönt blandat bara med mer grönt och blått - Blad, jordglober och groddar som dekoration - Slät, blank digital yta ### Fräscht - Olivgrönt, flaskgrönt, salvia eller chartreuse - En icke-naturlig partner: rosa, lila, gräddvitt eller svart - Typografi och textur i stället för ikoner - Papperskorn eller ett matt material Grönt och rosa är ett särskilt bra par för detta, eftersom kombinationen känns botanisk utan att vara bokstavlig. De ligger nästan mitt emot varandra i färghjulet, så håll dem på skilda ytor i stället för att blanda den ena i den andra. [Komplementfärger](https://gradiently.design/sv/guide/complementary-colors) förklarar varför. Flaskgrönt och rosé, delat: `linear-gradient(90deg, #0b3b2e 0% 62%, #f4b6c2 62% 100%)` Två motsatser sida vid sida med en hård kant. Slående, botaniskt och långt från en standardpalett för eko. ## Text på gröna gradienter | Text på bakgrund | Kontrast | Omdöme | | --- | --- | --- | | Vitt på `#14532d` | 9,1:1 | Utmärkt | | Vitt på `#15803d` | 5,0:1 | Bra för brödtext | | Vitt på `#16a34a` | 3,3:1 | Bara stor text | | `#052e16` på `#22c55e` | 6,5:1 | Mörkt bläck fungerar här | | `#052e16` på `#a3e635` | 9,9:1 | Utmärkt | | `#052e16` på `#86efac` | 10,6:1 | Utmärkt | WCAG-kontrastvärden, beräknade. Brödtext kräver 4,5:1, stor text 3:1. Klara gröna toner är ljusare än de ser ut, så vit text på dem faller oftast igenom. Ett mycket mörkgrönt bläck läses bättre och håller allt i samma familj. Kontrollera den ljusaste punkten bakom vit text på vilken gradient som helst, och [text på gradient](https://gradiently.design/sv/guide/text-on-gradient) visar hur. Ett stående fältanteckningsinlägg med titeln Vad som växer i oktober på en djup gradient En lugn, djup yta för ett redaktionellt inlägg. En stående nedräkningsstory med texten 3 dagar kvar på en klar gradient En högljudd nedräkning som story, där ett elektriskt grönt skulle lysa. ```css .panel { background-color: #0b3b2e; background-image: linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%); color: #f5f0e6; } ``` Flaskgrönt med varm gräddvit text: ett enkelt, exklusivt par. För fler paletter hämtade från skogar, fält och vatten, se [färgpaletter från naturen](https://gradiently.design/sv/guide/nature-color-palettes). ## FAQ ### Vilka färger passar bra ihop med grönt i en gradient? Petrol, blått, gult och lime blandas rent med grönt. Rosa, rött och lila blir slående partner men bör ligga på skilda ytor, eftersom grönt som blandas med dem blir grått. ### Vad är CSS för en mörkgrön gradient? Till exempel ger linear-gradient(180deg, #03140e 0%, #0b3b2e 55%, #1f6f50 100%) ett djupt flaskgrönt. Varje palett på den här sidan går att kopiera som CSS. ### Vilken textfärg fungerar på grönt? Vitt eller gräddvitt fungerar på djupa gröna toner. På klara eller ljusgröna toner, använd ett mycket mörkgrönt bläck, eftersom vit text oftast hamnar under den rekommenderade kontrasten. ### Hur använder jag grönt utan att se ut som ett ekovarumärke? Välj mindre väntade gröna toner som oliv, flaskgrönt eller chartreuse, para dem med en icke-naturlig färg som rosa eller lila, och använd textur eller typografi i stället för bladmotiv.