De korte versie
- Een blauw kleurverloop mengt tinten blauw, vaak met een naburig petrol, cyaan of violet, van bleek ijs tot diep marineblauw.
- Blauw wordt breed geassocieerd met rust, betrouwbaarheid en technologie, wat het populair maakt en makkelijk met dat van iedereen te verwarren.
- Blauw mengt schoon richting petrol, cyaan, indigo en violet, maar wordt grijs als je het rechtstreeks richting oranje of geel mengt.
- Witte tekst werkt op diepe en middenblauwen zoals #1e3a8a en #2563eb, maar faalt voor lopende tekst op lichtere blauwen zoals #3b82f6.
- Een blauw kleurverloop naar petrol of violet laten leunen, dieper of bleker gaan en een warm accent toevoegen zijn de snelste manieren om aan de zakelijke look te ontsnappen.
Op deze pagina
Een blauw kleurverloop mengt tinten blauw, vaak met een naburig petrol, cyaan of violet. Het kan aanvoelen als een heldere hemel, een diepe oceaan, een scherm bij nacht of het jaarverslag van een bank, afhankelijk van welke blauwen je kiest en hoe je ze gebruikt. Hieronder staan twintig blauwe kleurverlooppaletten met kopieerbare CSS, gegroepeerd van bleekst naar donkerst, gevolgd door de tekstkleuren die erop werken en hoe je voorkomt dat blauw saai aanvoelt.
Lichtblauwe kleurverlopen: ijs en hemel
Bleke blauwe kleurverlopen voelen open, schoon en stil. Ze passen bij gezondheidszorg, reizen, welzijn en productpagina’s die ruimte nodig hebben. Gebruik er donkere inkt op en voeg een vleugje warmte of lila toe zodat ze niet koud en klinisch ogen.
Oceaanblauwe en petrolkleurige kleurverlopen
Blauw richting groen laten leunen geeft het leven. Oceaankleurverlopen voelen fris en natuurlijk en omzeilen de zakelijke associaties van puur blauw. Ze passen bij merken voor reizen, eten, duurzaamheid en buitensport.
Felle en elektrische blauwe kleurverlopen
Verzadigde blauwen zijn energiek en technisch. Ze passen bij lanceringen, apps, sport en evenementen. Het zijn ook de meest voorkomende blauwen op het web, dus ze hebben het meeste baat bij een onverwachte vorm of een warm accent.
Donkerblauwe en middernachtkleurverlopen
Diep marineblauwe en middernachtkleurverlopen voelen serieus, premium en rustig. Ze zijn uitstekende ondergronden voor witte letters en voor heldere accenten. Let op banding, dat in langzame, donkere blauwen snel zichtbaar is; een fijne korrel lost het op. Zie banding in kleurverlopen.
Welk blauw kleurverloop voor welke klus
Twintig paletten is veel om uit te kiezen. Begin bij de taak die het ontwerp moet doen en de woorden die het moet dragen, en kies dan uit de bijbehorende groep.
| Klus | Probeer | Waarom |
|---|---|---|
| Rustige product- of gezondheidspagina | 1, 3, 4 | Bleek, open, prettig onder donkere tekst |
| Reizen, eten, buiten | 6, 8, 10 | Blauw dat naar groen leunt voelt natuurlijk |
| App-lancering of techevenement | 11, 13, 15 | Verzadigd en verlicht, leest als energie |
| Premium of financieel | 16, 17, 19 | Diepe ondergronden voelen serieus en dragen witte letters |
| Iets gedenkwaardigs | 2, 14, 20 | Een warme noot laat blauw specifiek voelen |
Wat blauw uitstraalt, en het probleem van saaiheid
In een groot deel van de wereld wordt blauw geassocieerd met rust, betrouwbaarheid en diepte, deels door lucht en water. Daarom is het zo gangbaar in bankieren, verzekeren, gezondheidszorg en technologie. Het is ook waarom een middenblauw kleurverloop zelden iemand helpt je te herkennen: het lijkt op de categorie in plaats van op het bedrijf. Kleurpsychologie legt uit waarom conventie twee kanten op snijdt.
Zakelijk blauw
- Eén middenblauw naar een lichter blauw onder 135 graden
- Puur, volledig verzadigd primair blauw
- Glad en vlak, zonder textuur
- Overal blauw, niets warms
Onderscheidend blauw
- Leunend naar petrol, indigo of violet
- Heel diep of heel bleek, niet het midden
- Korrel, glans of een zachte gloed
- Eén warm accent: koraal, goud of abrikoos
Blauw mengt goed richting zijn buren: petrol, cyaan, indigo en violet. Het mengt slecht richting zijn tegenpolen. Blauw rechtstreeks naar oranje of geel loopt door een grijzig midden, dus houd warme accenten kort of leid ze via violet of roze. Complementaire kleuren legt uit waarom.
Tekst op blauwe kleurverlopen
| Tekst op achtergrond | Contrast | Oordeel |
|---|---|---|
Wit op #0b1437 | 18,0:1 | Uitstekend |
Wit op #1e3a8a | 10,4:1 | Uitstekend |
Wit op #2563eb | 5,2:1 | Prima voor lopende tekst |
Wit op #3b82f6 | 3,7:1 | Alleen grote tekst |
#0b1a33 op #60a5fa | 6,8:1 | Donkere inkt werkt hier |
#0b1a33 op #bae6fd | 13,1:1 | Uitstekend |
De valkuil zit in het midden van het blauwbereik: een heldere korenbloem zoals #3b82f6 lijkt sterk genoeg voor witte tekst maar zakt onder 4,5:1. Controleer bij een kleurverloop het contrast waar het blauw het lichtst is achter je woorden. Tekst op een kleurverloop heeft de volledige methode.
Een diep vlak laat één getal het woord doen.
Een rustiger story met veel open ruimte.
.hero {
background-color: #0b1437;
background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
color: #ffffff;
}Een blauw kleurverloop als afbeelding exporteren voor sociale media vraagt om één extra stap. Platforms comprimeren uploads opnieuw, en langzame, donkere blauwen behoren tot de eerste kleuren die in zichtbare banden uiteenvallen. Exporteer op het aanbevolen formaat van het platform, voeg vóór het opslaan een fijne korrel toe en gebruik PNG waar het platform dat accepteert. Korrelige kleurverlopen laat zien hoeveel korrel genoeg is.
Voor paars naast blauw, zie paarse kleurverlopen; voor groenere opties, zie groene kleurverlopen.
Vragen die mensen stellen
Welke kleuren passen goed bij blauw in een kleurverloop?
Petrol, cyaan, indigo en violet mengen schoon met blauw. Warme kleuren als koraal en goud zijn goede accenten als je ze kort houdt, want blauw rechtstreeks naar oranje of geel mengen wordt grijs.
Wat is een goede CSS-code voor een blauw kleurverloop?
Probeer voor een diep, rustig blauw linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Elk palet op deze pagina is als CSS te kopiëren.
Is witte tekst leesbaar op een blauw kleurverloop?
Op diepe en middendonkere blauwen wel. Op lichtere blauwen zoals #3b82f6 valt witte tekst onder de verhouding van 4,5:1 die voor lopende tekst wordt aanbevolen.
Hoe laat ik een blauw kleurverloop minder zakelijk ogen?
Laat het leunen naar petrol of violet, kies heel diepe of heel bleke blauwen in plaats van middenblauw, voeg korrel toe en gebruik een klein warm accent.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
