Blå gradienter: 20 paletter fra is til midnat

En blå gradient blander nuancer af blå, ofte med en nabofarve som turkis, cyan eller violet. Den kan føles som en klar himmel, et dybt hav, en skærm om natten eller en banks årsrapport, alt efter hvilke blå toner du vælger, og hvordan du bruger dem. Nedenfor finder du tyve blå gradientpaletter med kopierbar CSS, ordnet fra den blegeste til den mørkeste, efterfulgt af de tekstfarver, der virker på dem, og hvordan du undgår, at blå føles fad.

Lyseblå gradienter: is og himmel

Blege blå gradienter føles åbne, rene og stille. De passer til sundhed, rejser, wellness og produktsider, der har brug for luft. Brug mørk tekst på dem, og tilføj et strejf af varme eller lilla, så de ikke ser kolde og kliniske ud.

Havblå og turkise gradienter

Når blå læner sig mod grøn, får den liv. Havgradienter føles friske og naturlige, og de undgår de virksomhedsagtige associationer, som ren blå har. De passer til rejser, mad, bæredygtighed og outdoor-brands.

Klare og elektriske blå gradienter

Mættede blå toner er energiske og tekniske. De passer til lanceringer, apps, sport og events. De er også de mest almindelige blå toner på nettet, så de har mest gavn af en uventet form eller en varm accent.

Mørkeblå og midnatsgradienter

Dyb marineblå og midnatsgradienter føles seriøse, eksklusive og rolige. De er fremragende bagtæpper til hvid tekst og skarpe accenter. Hold øje med striber, som let viser sig i langsomme, mørke blå toner. Et fint korn løser det. Se gradientstriber.

Hvilken blå gradient til hvilken opgave

Tyve paletter er mange at vælge imellem. Start med den opgave, designet skal løse, og de ord, det skal bære, og vælg så fra den gruppe, der passer.

Hvad blå signalerer, og problemet med det fade

I store dele af verden forbindes blå med ro, pålidelighed og dybde, blandt andet på grund af himmel og vand. Derfor er den så almindelig i bank, forsikring, sundhed og teknologi. Det er også derfor, en mellemblå gradient sjældent hjælper nogen med at genkende dig: den ligner kategorien frem for virksomheden. Farvepsykologi forklarer, hvorfor konventioner virker begge veje.

Blå blander godt mod sine naboer: turkis, cyan, indigo og violet. Den blander dårligt mod sine modsætninger. Blå direkte over i orange eller gul passerer en grålig midte, så hold varme accenter korte, eller led dem gennem violet eller pink. Komplementærfarver forklarer hvorfor.

Tekst på blå gradienter

Faldgruben er midten af det blå spænd: en klar kornblomstblå som #3b82f6 ser stærk nok ud til hvid tekst, men falder under 4,5:1. På en gradient skal du tjekke kontrasten der, hvor blå er lysest bag dine ord. Tekst på en gradient har den fulde metode.

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

At eksportere en blå gradient som billede til sociale medier kræver ét ekstra trin. Platformene komprimerer uploads igen, og langsomme, mørke blå toner er blandt de første, der brydes op i synlige striber. Eksportér i platformens anbefalede størrelse, læg et fint korn på, før du gemmer, og brug PNG, hvor platformen tillader det. Kornede gradienter viser, hvor meget korn der er nok.

Til lilla toner ved siden af blå, se lilla gradienter. Til grønnere valg, se grønne gradienter.