Kortversionen
- En blå gradient blandar nyanser av blått, ofta med en närliggande turkos, cyan eller violett, från blek is till djup marinblå.
- Blått förknippas i stor utsträckning med lugn, pålitlighet och teknik, vilket gör det populärt och lätt att förväxla med alla andras.
- Blått blandas rent mot turkos, cyan, indigo och violett, men tenderar att bli grått när det blandas rakt mot orange eller gult.
- Vit text fungerar på djupa och mellanblå toner som #1e3a8a och #2563eb, men inte som brödtext på ljusare blått som #3b82f6.
- Att luta en blå gradient mot turkos eller violett, gå djupare eller blekare och lägga till en varm accent är de snabbaste sätten att slippa företagsuttrycket.
På den här sidan
En blå gradient blandar nyanser av blått, ofta med en närliggande turkos, cyan eller violett. Den kan kännas som en klar himmel, ett djupt hav, en skärm på natten eller en banks årsredovisning, beroende på vilka blå toner du väljer och hur du använder dem. Nedan följer tjugo paletter med blå gradienter och CSS att kopiera, ordnade från blekast till mörkast, följt av de textfärger som fungerar på dem och hur du håller blått från att kännas tråkigt.
Ljusblå gradienter: is och himmel
Bleka blå gradienter känns öppna, rena och stilla. De passar vård, resor, välmående och produktsidor som behöver luft. Använd mörkt bläck på dem och lägg till en gnutta värme eller lila så att de inte ser kalla och kliniska ut.
Blå och turkosa havsgradienter
Att luta blått mot grönt ger det liv. Havsgradienter känns friska och naturliga, och de undviker de företagsassociationer som rent blått för med sig. De passar resor, mat, hållbarhet och friluftsvarumärken.
Klarblå och elektriskt blå gradienter
Mättade blå toner är energiska och tekniska. De passar lanseringar, appar, sport och evenemang. De är också de vanligaste blå tonerna på webben, så de tjänar mest på en oväntad form eller en varm accent.
Mörkblå gradienter och midnatt
Djupa marinblå och midnattsblå gradienter känns allvarliga, exklusiva och lugna. De är utmärkta underlag för vit text och för klara accenter. Se upp för ränder, som lätt syns i långsamma, mörka blå toner. Ett fint korn löser det. Se gradientränder.
Vilken blå gradient till vilket jobb
Tjugo paletter är många att välja bland. Utgå från jobbet designen ska göra och orden den ska bära, och välj sedan ur den grupp som passar.
| Jobb | Prova | Varför |
|---|---|---|
| Lugn produkt- eller vårdsida | 1, 3, 4 | Bleka, öppna och lätta under mörk text |
| Resor, mat, friluftsliv | 6, 8, 10 | Blått som lutar mot grönt känns naturligt |
| Applansering eller teknikevent | 11, 13, 15 | Mättade och upplysta, läses som energi |
| Exklusivt eller finans | 16, 17, 19 | Djupa underlag känns allvarliga och bär vit text |
| Något minnesvärt | 2, 14, 20 | En varm ton får blått att kännas specifikt |
Vad blått signalerar, och problemet med tråkighet
I stora delar av världen förknippas blått med lugn, pålitlighet och djup, delvis på grund av himmel och vatten. Därför är det så vanligt inom bank, försäkring, vård och teknik. Det är också därför en mellanblå gradient sällan hjälper någon att känna igen dig: den ser ut som branschen snarare än företaget. Färgpsykologi förklarar varför konventioner slår åt båda hållen.
Företagsblått
- Ett mellanblått till ett ljusare blått i 135 graders vinkel
- Rent, fullt mättat blått i primärfärg
- Slätt och platt, utan textur
- Blått överallt, inget varmt
Särpräglat blått
- Lutar mot turkos, indigo eller violett
- Mycket djupt eller mycket blekt, inte mitten
- Korn, glans eller en mjuk glöd
- En varm accent: korall, guld eller aprikos
Blått blandas väl mot sina grannar: turkos, cyan, indigo och violett. Det blandas dåligt mot sina motsatser. Blått rakt in i orange eller gult passerar en gråaktig mitt, så håll varma accenter korta eller led dem via violett eller rosa. Komplementfärger förklarar varför.
Text på blå gradienter
| Text på bakgrund | Kontrast | Omdöme |
|---|---|---|
Vit på #0b1437 | 18,0:1 | Utmärkt |
Vit på #1e3a8a | 10,4:1 | Utmärkt |
Vit på #2563eb | 5,2:1 | Går bra för brödtext |
Vit på #3b82f6 | 3,7:1 | Bara stor text |
#0b1a33 på #60a5fa | 6,8:1 | Mörkt bläck fungerar här |
#0b1a33 på #bae6fd | 13,1:1 | Utmärkt |
Fällan ligger i mitten av det blå spannet: en klar kornblå som #3b82f6 ser stark nog ut för vit text men hamnar under 4,5:1. Kontrollera kontrasten på en gradient där blått är som ljusast bakom dina ord. Text på en gradient har hela metoden.
Ett djupt fält låter en enda siffra göra allt pratande.
En lugnare story med gott om luft.
.hero {
background-color: #0b1437;
background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
color: #ffffff;
}Att exportera en blå gradient som bild för sociala medier kräver ett extra steg. Plattformar komprimerar om uppladdningar, och långsamma, mörka blå toner hör till de första som brister i synliga band. Exportera i plattformens rekommenderade storlek, lägg på ett fint korn innan du sparar och använd PNG där plattformen tar emot det. Korniga gradienter visar hur mycket korn som räcker.
För lila toner intill blått, se lila gradienter, och för grönare alternativ, se gröna gradienter.
Vanliga frågor
Vilka färger passar ihop med blått i en gradient?
Turkos, cyan, indigo och violett blandas rent med blått. Varma färger som korall och guld fungerar bra som accenter om de hålls korta, eftersom blått som tonas rakt in i orange eller gult blir grått.
Vilken CSS-kod är bra för en blå gradient?
För ett djupt, lugnt blått kan du prova linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Varje palett på den här sidan går att kopiera som CSS.
Går vit text att läsa på en blå gradient?
På djupa och mörka mellanblå toner, ja. På ljusare blått som #3b82f6 hamnar vit text under den kontrast på 4,5:1 som rekommenderas för brödtext.
Hur får jag en blå gradient att se mindre företagslik ut?
Luta den mot turkos eller violett, välj mycket djupa eller mycket bleka blå toner i stället för mellanblått, lägg på korn och använd en liten varm accent.
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
