Blå gradienter: 20 paletter fra is til midnatt

En blå gradient blander nyanser av blått, ofte med en nabofarge som turkis, cyan eller fiolett. Den kan føles som en klar himmel, et dypt hav, en skjerm om natten eller en banks årsrapport, avhengig av hvilke blåfarger du velger og hvordan du bruker dem. Under følger tjue blå gradientpaletter med CSS du kan kopiere, gruppert fra den blekeste til den mørkeste, etterfulgt av tekstfargene som fungerer på dem og hvordan du hindrer at blått føles kjedelig.

Lyseblå gradienter: is og himmel

Bleke blå gradienter føles åpne, rene og stille. De passer til helse, reise, velvære og produktsider som trenger rom. Bruk mørkt blekk på dem, og legg til et hint av varme eller lilla så de ikke ser kalde og kliniske ut.

Havblå og turkise gradienter

Å la blått lene seg mot grønt gir det liv. Havgradienter føles friske og naturlige, og de unngår de bedriftsaktige assosiasjonene til ren blå. De passer til reise, mat, bærekraft og friluftsmerkevarer.

Lysende og elektriske blå gradienter

Mettede blåfarger er energiske og tekniske. De passer til lanseringer, apper, sport og arrangementer. De er også de vanligste blåfargene på nettet, så de har mest å hente på en uventet form eller en varm aksent.

Mørkeblå og midnattsgradienter

Dype marine- og midnattsgradienter føles seriøse, eksklusive og rolige. De er utmerkede underlag for hvit skrift og for skarpe aksenter. Pass på bånd, som lett vises i langsomme, mørke blåfarger. Fint korn løser det. Se gradientbånd.

Hvilken blå gradient til hvilken jobb

Tjue paletter er mye å velge mellom. Begynn med jobben designet skal gjøre og ordene det skal bære, og velg så fra den passende gruppen.

Hva blått signaliserer, og problemet med kjedelighet

I store deler av verden forbindes blått med ro, pålitelighet og dybde, delvis på grunn av himmel og vann. Derfor er det så vanlig innen bank, forsikring, helse og teknologi. Det er også derfor en middels blå gradient sjelden hjelper noen å kjenne deg igjen: den ser ut som kategorien, ikke selskapet. Fargepsykologi forklarer hvorfor konvensjon virker begge veier.

Blått blander godt mot naboene sine: turkis, cyan, indigo og fiolett. Det blander dårlig mot motsetningene sine. Blått rett over i oransje eller gult passerer gjennom en gråaktig midte, så hold varme aksenter korte eller led dem gjennom fiolett eller rosa. Komplementære farger forklarer hvorfor.

Tekst på blå gradienter

Fellen er midten av blåskalaen: en klar kornblomstblå som #3b82f6 ser sterk nok ut for hvit tekst, men faller under 4,5:1. På en gradient sjekker du kontrasten der blåfargen er lysest bak ordene dine. Tekst på en gradient har hele metoden.

.hero {
  background-color: #0b1437;
  background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
  color: #ffffff;
}

Å eksportere en blå gradient som bilde til sosiale medier trenger ett ekstra steg. Plattformer komprimerer opplastinger på nytt, og langsomme, mørke blåfarger er blant de første fargene som brytes opp i synlige bånd. Eksporter i plattformens anbefalte størrelse, legg på fint korn før du lagrer og bruk PNG der plattformen godtar det. Kornete gradienter viser hvor mye korn som er nok.

For lilla ved siden av blått, se lilla gradienter. For grønnere alternativer, se grønne gradienter.