60 gradientfärgkombinationer som fungerar, med koder

De bästa gradientfärgkombinationerna följer en av två regler: de använder nyanser som ligger bredvid varandra på färghjulet, så att övergången förblir ren, eller så överbryggar de avlägsna nyanser med en vald mellanfärg, så att den aldrig blir grå. Nedan finns 60 kombinationer som följer de reglerna, sorterade efter stämning: lugna, djärva, varma, svala, mörka och pastell. Kopiera vilket prov som helst som CSS och läs sedan anteckningen under varje grupp för att se varför de fungerar, så att du kan göra dina egna.

Allt här är ren CSS med hexfärger, så det fungerar i vilken webbläsare som helst, och samma koder kan skrivas in i vilket designverktyg som helst. Om en term är ny förklarar vad en gradient är stopp och vinklar.

Lugna gradientkombinationer

Lugna gradienter håller sina färger nära varandra i både nyans och ljushet. Ingenting hoppar, så ögat vilar. De blir bra bakgrunder för läsning, välmåendevarumärken, portföljer och allt som ska kännas stilla. Salvia och sten, till exempel, rör sig bara en kort sträcka runt hjulet och tappar lite ljushet på vägen, vilket läses som skugga på en vägg snarare än en färgeffekt.

Djärva gradientkombinationer

Djärva gradienter använder mättade färger och större avstånd runt hjulet. De fångar uppmärksamheten i ett fullt flöde, på en reabanner eller en lanseringssida. Knepet är att välja par vars raka övergång förblir stark. Magenta till bärnsten går genom korall; kobolt till korall går genom lila. Ingen av dem kommer nära grått, vilket är varför de ser levande ut hela vägen.

Varma gradientkombinationer

Varma gradienter bor mellan rött och gult och känns soliga, aptitretande och mänskliga. De passar mat, restaurang- och hotellbranschen, livsstil och allt personligt. De flesta av dem lägger till en mörkare, rödare ände så att övergången får tyngd: Gyllene timmen går från blek honung till bränd bärnsten på samma sätt som sent ljus rör sig nedför en vägg. För temperaturens psykologi, se varma och kalla färger.

Svala gradientkombinationer

Svala gradienter ligger mellan grönt och violett och känns rena, lugna och precisa. De är det naturliga hemmet för teknik, hälsa, finans och vatten. Blått är ankaret i de flesta av dem, vilket är varför de ser pålitliga ut, och varför en sval gradient behöver en särpräglad detalj, som en violett ände eller ett turkost skifte, för att inte se ut som alla banker. Fler blå finns samlade i blå gradienter.

Mörka gradientkombinationer

Mörka gradienter är nästan svarta bottnar med en upplyst färg som stiger upp ur dem. De känns premium, nattliga och filmiska, och de får vit text att se skarp ut. Håll den mörka änden lätt färgad snarare än rent svart, så att övergången har något att färdas genom. Mörka skalor bandar lätt, så lägg till korn innan du publicerar; se mörka gradientbakgrunder.

Pastellgradientkombinationer

Pasteller är bleka färger med hög ljushet och lite mättnad. De känns friska, mjuka och vänliga, och de passar skönhet, bebis, pappersvaror och vårkampanjer. Eftersom de alla är så ljusa kan även avlägsna pastellnyanser blandas till en vitaktig grå, så de två sista här går via en blek lila. Sätt text på pasteller i mörkt bläck snarare än vitt. Det finns mer i pastellgradienter.

Så använder du de här gradientkoderna

Varje kod är ett komplett CSS-värde för background. Klistra in den på vilket element som helst, eller läs in hexfärgerna och stoppens positioner i ett designverktyg. På webben anger du en solid reservfärg först, hämtad från det mörkaste eller viktigaste stoppet.

.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}

Så gör du din egen kombination

1. 1

   Välj stämningen först

   Bestäm lugn eller djärv, varm eller sval, mörk eller ljus innan någon färg. Det smalnar av valen till en av grupperna ovan.

2. 2

   Välj en ankarfärg

   Oftast din varumärkesfärg eller färgen på det du säljer. Se hur du väljer varumärkesfärger.

3. 3

   Lägg till en granne

   Gå 30 till 60 grader runt färghjulet för en ren andra färg. Ändra ljusheten lite också, för djupets skull.

4. 4

   Överbrygga allt avlägset

   Om du vill ha en nyans långt bort, lägg en stark mellanfärg emellan så att övergången inte blir grå. Se grumliga gradienter.

5. 5

   Gör den till din

   Ändra vinkeln, flytta ett stopp från 50 %, lägg till en tredje färg eller ett lager korn. Små ändringar är det som hindrar en kombination från att se ut som en förinställning.

En populär kod är en bra start, men tusentals andra designer börjar där också. Om du vill ha en gradientidentitet som ingen annan har kan du matcha en bild du älskar mot dess palett och de närmaste Marks, eller göra nya som liknar den.