De korte versie
- Een kleurverloop ziet er goed uit als zijn kleuren elkaar raken zonder grijs te worden, zijn stops ongelijk verdeeld zijn en zijn licht van één plek lijkt te komen.
- Grijze of modderige middens ontstaan als twee tegengestelde kleuren direct mengen, een overbruggende kleur of mengen in OKLCH lost dat op.
- Een kleine hoeveelheid korrel, rond 2 tot 6 procent dekking, verbergt banding en laat een digitaal kleurverloop als oppervlak aanvoelen.
- Een goed kleurverloop laat altijd een rustig gebied waar woorden met sterk contrast kunnen staan.
- Exporteer kleurverlopen als PNG of video van hoge kwaliteit in plaats van gecomprimeerde JPEG, die zichtbare strepen maakt.
Op deze pagina
Weten hoe je een kleurverloop er goed laat uitzien komt neer op zeven checks, in volgorde: kleuren die elkaar raken zonder grijs te worden, ongelijk geplaatste stops, licht dat uit één richting komt, een ondergrond die de sfeer zet, een vleugje korrel, een rustige ruimte voor woorden en een export die het vloeiend houdt. Elk is een snelle test met een duidelijke oplossing. Bijna elk kleurverloop dat goedkoop oogt faalt op minstens twee ervan, en die twee herstellen doet meestal meer dan de kleuren helemaal veranderen.
De test
Als het faalt
De test
Als het faalt
De test
Als het faalt
De test
Als het faalt
De test
Als het faalt
De test
Als het faalt
De test
Als het faalt
1. Kleuren die elkaar schoon raken
Als twee kleuren die op het wiel tegenover elkaar liggen direct mengen, zakt het midden weg in grijs. Blauw naar oranje en groen naar roze zijn de gebruikelijke boosdoeners. Voeg tussen de twee een overbruggende kleur toe, zodat de overgang om het wiel heen reist in plaats van door het midden, of meng in een perceptuele kleurruimte. Modderige kleurverlopen en interpolatie van kleurverlopen leggen beide uit.
2. Ongelijk geplaatste stops
Gelijk verdeelde kleuren lezen als een verloop uit een voorinstelling. In de natuur domineert meestal één kleur en gebeurt de verandering over een korte afstand: een lucht is vooral blauw met een smalle warme band aan de horizon. Geef je hoofdkleur 60 tot 70 procent van het beeld en laat de anderen laat arriveren. Kleurstops van kleurverlopen gaat dieper in op plaatsing en hints.
3. Licht uit één richting
Een goed kleurverloop voelt belicht. Kies waar het licht vandaan komt, meestal een bovenhoek, en maak dat gebied het helderst en meest verzadigd. Al het andere valt ervan weg. Kun je de lichtbron niet aanwijzen, dan voelt het kleurverloop vlak, welke kleuren je ook gebruikt. Een zacht radiaal kleurverloop over een lineair gelegd is de snelste manier om het toe te voegen.
4. Een ondergrond die de sfeer zet
Bepaal of het ontwerp donker of licht is en leg je vast. Een kleurverloop dat van middenviolet naar middenroze dwaalt heeft geen ondergrond en voelt dus besluiteloos. Een bijna zwarte basis laat kleuren gloeien, een warm gebroken wit laat ze gedrukt voelen. Duw de basis verder dan comfortabel voelt en breng hem dan een stap terug.
5. Korrel: de juiste ruisverhouding
Perfect gladde digitale kleurverlopen tonen op veel schermen strepen en ze lijken op softwarestandaarden. Een fijne ruislaag lost allebei op. Het bruikbare bereik is smal: onder ongeveer 2 procent dekking zie je het niet en boven ongeveer 8 procent leest het als bewuste textuur en niet als afwerking. Begin bij donkere kleurverlopen op 3 procent en bij bleke op 5 procent, want ruis is op lichte kleuren moeilijker te zien.
.gradient {
position: relative;
background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}
.gradient::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.04;
mix-blend-mode: overlay;
pointer-events: none;
}Meer korrelrecepten staan in korrelige kleurverlopen en CSS-ruistextuur.
6. Een rustige ruimte voor woorden
De meeste kleurverlopen bestaan om een boodschap te dragen. Zoek waar de woorden komen en zorg dat dat gebied het rustigst en meest consistent van toon is, zodat elke regel hetzelfde contrast heeft. Het helderste, drukste deel van het kleurverloop hoort elders. Herstel slecht contrast nooit met een gloed achter de letters: verplaats het licht.
Faalt check 6: de kleur loopt dwars door de woorden.
Voldoet: het gebied achter de tekst is rustiger en elke regel leest.
Dit is de check die Gradiently voor je doet. Een Mark weet waar je woorden staan: zijn rustigste gebied verplaatst zich achter de tekst, kleuren bij letters worden dieper of lichter en Auto-inkt kiest per regel lichte of donkere letters uit het eigen palet van de Mark.
7. Een export die het vloeiend houdt
- Stilstaand beeld: exporteer PNG. JPEG-compressie maakt van lange uitlopen stappen en social-apps comprimeren bij het uploaden opnieuw.
- Video: gebruik MP4 met hoge bitrate op het exacte platformformaat, zodat niets wordt geschaald.
- Formaat: exporteer op de eigen afmetingen van het platform, zoals 1080×1350 voor een Instagram-post, in plaats van de app te laten bijsnijden.
- Controleer op een telefoon: bekijk de geüploade versie in een donkere kamer op volle helderheid. Daar verstopt banding zich.
Overleven de strepen dit alles, dan heeft banding in kleurverlopen de diepere oplossingen.
Vragen die mensen stellen
Hoe laat ik een kleurverloop er goed uitzien?
Gebruik kleuren die mengen zonder grijs te worden, plaats stops ongelijk, belicht het uit één richting, leg je vast op een donkere of lichte ondergrond, voeg een beetje korrel toe en laat een rustige ruimte voor woorden.
Hoeveel ruis moet ik aan een kleurverloop toevoegen?
Meestal 2 tot 6 procent dekking. Begin rond 3 procent bij donkere kleurverlopen en 5 procent bij bleke, en stop zodra de strepen verdwijnen.
Waarom ziet mijn kleurverloop er modderig uit?
Twee tegengestelde kleuren mengen via grijs. Voeg een overbruggende kleur tussen ze toe of meng in OKLCH.
Waarom ziet mijn kleurverloop er goedkoop uit?
Waarschijnlijk zijn het twee kleuren, gelijk verdeeld, onder een hoek van 45 graden, zonder korrel. Dat zijn de standaardinstellingen van de meeste tools, dus ze lezen als niet overwogen.
Welk bestandsformaat is het best voor kleurverlopen?
PNG voor stilstaande beelden en MP4 met hoge bitrate voor video. Gecomprimeerde JPEG toont banding in lange, vloeiende uitlopen.
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