# Tvåfärgsgradienter: 30 par som alltid fungerar [Canonical HTML page](https://gradiently.design/sv/guide/two-color-gradients) Två färger, en riktning, inget som kan gå fel. Nästan. Här är de två regler som avgör om ett par fungerar, och trettio par som klarar båda, redo att kopiera. ## The short version - En tvåfärgsgradient blandar en färg in i en annan, och den är den enklaste gradienten att designa, färga om och hålla enhetlig. - Om ett par fungerar beror mest på nyansavståndet: närliggande nyanser blandas alltid rent, och motsatta nyanser blir grå i mitten. - En skillnad i ljushet mellan de två färgerna ger gradienten riktning och djup. - Två färger från samma nyansfamilj, en ljus och en mörk, ger den mest mångsidiga gradienten eftersom text fungerar i ena änden. - Eftersom tvåfärgsgradienter är så vanliga är det en liten förändring, som en ovanlig vinkel, en flyttad mittpunkt eller ett lager korn, som gör en igenkännbar. En **tvåfärgsgradient** är en blandning från en färg till en annan, och den är den säkraste gradienten du kan göra: två färger är lätta att välja, lätta att färga om och lätta att hålla enhetliga. Om ett par fungerar handlar om två saker, hur långt ifrån varandra nyanserna ligger på färgcirkeln och hur olika de är i ljushet. Får du de två rätt blir nästan vilka två färger som helst en bra gradient. Nedan följer reglerna, sedan trettio par som följer dem. ## Regel 1: håll koll på nyansavståndet Nyansavstånd är hur långt ifrån varandra två färger ligger på färgcirkeln, mätt i grader. Det förutsäger vad som händer i mitten av blandningen, och det är där tvåfärgsgradienter lyckas eller misslyckas. | Nyansavstånd | Vad som händer i mitten | Utlåtande | | --- | --- | --- | | 0 till 60 grader | En ren mellanfärg, som violett mellan blått och rosa | Alltid säkert | | 60 till 120 grader | Oftast en tydlig ny färg, ibland något matt | Säkert; kontrollera mitten | | 120 till 150 grader | Ofta en mjukare, gråare mitt | Testa noga | | 150 till 180 grader | Grått eller brunt i mitten när den blandas på standardsättet | Behöver en brofärg eller OKLCH | Ju bredare glapp, desto större risk att mittpunkten tappar färg. Hela förklaringen finns i [grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients). Avstånden i första raden är [analoga färger](https://gradiently.design/sv/guide/analogous-colors). Avstånden i sista raden är [komplementfärger](https://gradiently.design/sv/guide/complementary-colors), som ser slående ut bredvid varandra men behöver hjälp när de blandas. ## Regel 2: ge den en skillnad i ljushet Två färger med samma ljushet ger en gradient som känns platt, som om den inte är på väg någonstans. En tydlig skillnad i ljushet ger blandningen riktning, som ljus som faller in från ena sidan. Det ger också en praktisk fördel: text kan ligga i den mörkare änden i vitt, eller i den ljusare änden i mörkt bläck. ### Känns platt - Två mellantoner med samma ljushet - Två fullt mättade färger utan mörk ände - Ingen given plats för text ### Känns belyst - En ljusare och en mörkare färg - En mättad färg parad med en djupare granne - En tydlig ljus och mörk ände för text ## Par med närliggande nyanser De här paren ligger inom ungefär 60 grader från varandra. De går inte att göra grumliga och ser bra ut på nästan allt, från knappar till bakgrunder över hela skärmen. Blåbär och Tidvatten, till exempel, är båda blå på väg mot violett, vilket läses som en enda färg som fångar ljuset. - Blåbär: `linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)` - Flamingo: `linear-gradient(135deg, #f472b6 0%, #fb923c 100%)` - Lagun: `linear-gradient(135deg, #06b6d4 0%, #10b981 100%)` - Ringblomma: `linear-gradient(135deg, #fbbf24 0%, #f97316 100%)` - Orkidé: `linear-gradient(135deg, #d946ef 0%, #6366f1 100%)` - Nyklippt: `linear-gradient(135deg, #84cc16 0%, #10b981 100%)` - Rosenträ: `linear-gradient(135deg, #e11d48 0%, #db2777 100%)` - Tidvatten: `linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)` - Clementin: `linear-gradient(135deg, #fb923c 0%, #facc15 100%)` - Mossa och blågrönt: `linear-gradient(135deg, #65a30d 0%, #0f766e 100%)` Par med närliggande nyanser: grannar på cirkeln, så mitten är alltid en ren färg. ## Par från ljust till mörkt De här paren håller sig i en nyansfamilj och ändrar ljushet från blek till djup. De är de mest mångsidiga tvåfärgsgradienterna: lugna nog för en hel sida, och med en mörk ände redo för vit text. De blir också utmärkta varumärkesgradienter, eftersom de förlänger en enda varumärkesfärg i stället för att lägga till en ny. Teorin finns i [monokromatiska färgscheman](https://gradiently.design/sv/guide/monochromatic-color-scheme). - Denim: `linear-gradient(180deg, #bfdbfe 0%, #1e3a8a 100%)` - Plommon: `linear-gradient(180deg, #f5d0fe 0%, #701a75 100%)` - Skog: `linear-gradient(180deg, #bbf7d0 0%, #14532d 100%)` - Rost: `linear-gradient(180deg, #fed7aa 0%, #9a3412 100%)` - Träkol: `linear-gradient(180deg, #e5e5e5 0%, #262626 100%)` - Vin: `linear-gradient(180deg, #fecdd3 0%, #881337 100%)` - Djupt blågrönt: `linear-gradient(180deg, #99f6e4 0%, #134e4a 100%)` - Indigo: `linear-gradient(180deg, #c7d2fe 0%, #312e81 100%)` - Kakao: `linear-gradient(180deg, #e7d3c1 0%, #4a2c1d 100%)` - Bärnsten: `linear-gradient(180deg, #fef3c7 0%, #92400e 100%)` Par från ljust till mörkt: en nyansfamilj, en stor förändring i ljushet. Mörkt bläck överst, vit text nederst. ## Kontrastpar som håller sig rena De här paren ligger längre ifrån varandra, mellan ungefär 90 och 150 grader, men var och en har en klar mittpunkt när den blandas på standardsättet. Persika och violett passerar lila, cyan och magenta passerar blåklint, orange och magenta passerar knallrosa. De är mer energiska än paren med närliggande nyanser, bra för lanseringar, musik och allt som ska sticka ut. - Korall och indigo: `linear-gradient(135deg, #fb7185 0%, #4338ca 100%)` - Persika och violett: `linear-gradient(135deg, #fdba74 0%, #7c3aed 100%)` - Lime och blått: `linear-gradient(135deg, #a3e635 0%, #2563eb 100%)` - Rosa och himmel: `linear-gradient(135deg, #f472b6 0%, #38bdf8 100%)` - Gult och rosa: `linear-gradient(135deg, #fde047 0%, #ec4899 100%)` - Cyan och magenta: `linear-gradient(135deg, #22d3ee 0%, #d946ef 100%)` - Rött och violett: `linear-gradient(135deg, #ef4444 0%, #6d28d9 100%)` - Mynta och violett: `linear-gradient(135deg, #34d399 0%, #8b5cf6 100%)` - Orange och magenta: `linear-gradient(135deg, #f97316 0%, #c026d3 100%)` - Grönt och guld: `linear-gradient(135deg, #16a34a 0%, #facc15 100%)` Kontrastpar: större nyansavstånd, men fortfarande en klar mitt. Kontrollera textkontrasten i båda ändar. ## Flytta mittpunkten Som standard är en tvåfärgsgradient hälften och hälften. Med CSS kan du flytta punkten där de två färgerna är jämnt blandade med en färghint: en fristående procentsats mellan stoppen. Skjut den mot ena änden så tar den andra färgen över mer av ytan, utan att någon tredje färg tillkommer. ```css /* Even blend: the mix point sits at 50% */ .even { background: linear-gradient(135deg, #3b82f6, #8b5cf6); } /* Colour hint at 25%: violet arrives early and fills most of the box */ .violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); } /* Colour hint at 75%: blue holds on for most of the box */ .blue { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); } ``` En färghint flyttar mittpunkten utan att lägga till en färg. Det är ett av de snabbaste sätten att få ett vanligt par att se mindre standard ut. ## Var du placerar text på en tvåfärgsgradient En tvåfärgsgradient har en inbyggd layout: den ena änden är ljusare och den andra mörkare. Lägg orden i den ände som kontrasterar mest mot din textfärg och låt den andra änden bära färgen. För vit text är det den mörkare änden; för mörkt bläck den ljusare. Centrera aldrig liten text över mittpunkten på ett par från ljust till mörkt, eftersom kontrasten ändras längs raden. [Text på en gradient](https://gradiently.design/sv/guide/text-on-gradient) tar upp kontrollerna i detalj. Ett stående inlägg med en kort rubrik placerad i den lugnare änden av en gradientbakgrund Orden i den lugna änden av blandningen, färgen i den andra: den enklaste layouten en gradient erbjuder. ## Gör en tvåfärgsgradient till din egen Tvåfärgsgradienter är populära just för att de är säkra, så de populära paren finns överallt. För att göra en igenkännbar ändrar du något folk märker utan att tänka på det: en brantare eller ovanlig vinkel (se [gradientvinkel](https://gradiently.design/sv/guide/gradient-angle)), en flyttad mittpunkt, ett fint korn eller en tredje färg som bara används vid en kant. När du är redo att gå bortom två är [60 färgkombinationer för gradienter](https://gradiently.design/sv/guide/gradient-color-combinations) grupperade efter stämning. Om du redan vet vilka två färger du vill ha kan du skriva in dem i sökfältet i Marknaden, till exempel ”blått och violett”, och designa med de Marks som byggts kring dem. ## FAQ ### Vilka två färger ger den bästa gradienten? Färger inom ungefär 60 grader från varandra på färgcirkeln, med en tydlig skillnad i ljushet, ger de mest pålitliga tvåfärgsgradienterna. ### Varför ser min tvåfärgsgradient grå ut i mitten? Färgerna ligger nästan mitt emot varandra på färgcirkeln. Lägg till en klar brofärg i mitten eller blanda i OKLCH. ### Är en tvåfärgsgradient bättre än tre färger? Två färger är enklare och säkrare. Tre ger mer djup och låter dig styra mittpunkten, men är lättare att göra fel. ### Hur ändrar jag var två färger möts i en CSS-gradient? Lägg till en färghint, en fristående procentsats mellan de två stoppen, till exempel `linear-gradient(#3b82f6, 25%, #8b5cf6)`. ### Var ska text placeras på en tvåfärgsgradient? I den ände som ger mest kontrast för din textfärg: vitt på den mörkare änden, mörkt bläck på den ljusare.