Waarom je kleurverloop strepen heeft, en hoe je banding oplost

Banding in een kleurverloop is wanneer een vloeiend kleurverloop zichtbare strepen of trappen toont in plaats van een doorlopende overgang. Het gebeurt omdat digitale afbeeldingen maar een beperkt aantal tinten per kleur kunnen opslaan, meestal 256 per kanaal, en als een kleurverloop langzaam over een breed vlak verandert, moet elke tint een band van pixels bedekken. Je oog is heel goed in het zien van randen, dus het pikt die banden eruit. De oplossing is meestal fijne korrel toevoegen, met minder compressie exporteren of de overgang meer kleur geven om mee te werken.

Wat banding in kleurverlopen veroorzaakt

De meeste afbeeldingen gebruiken 8 bits per kanaal: 256 mogelijke waarden voor elk van rood, groen en blauw. Dat klinkt als ruim genoeg, en voor een sterk kleurverloop is het dat ook. Het probleem begint als de kleuren aan beide uiteinden dicht bij elkaar liggen.

Neem een grijs kleurverloop van #202020 naar #303030 over een scherm van 1920 pixels breed. Elk kanaal gaat maar van 32 naar 48, dat zijn 16 stappen. Het kleurverloop bevat dus 16 verschillende tinten, elk ongeveer 120 pixels breed. Geen enkele software kan het vloeiender maken, want er zijn geen tussentinten om te gebruiken.

Waar banding het meest opvalt

Daarom vragen donkere kleurverloopachtergronden en aurora-kleurverlopen de meeste zorg. Hun schoonheid hangt af van lange, zachte hellingen door donkere tinten, en dat is precies het recept voor banding.

Zo los je banding in kleurverlopen op

1. 1

   Voeg korrel of dither toe

   Een fijne laag willekeurige ruis verspreidt pixels tussen naburige tinten, zodat het oog de randen niet meer vindt. Het is de betrouwbaarste oplossing, en het laat het oppervlak ook rijker ogen. Zie korrelige kleurverlopen.

2. 2

   Geef de overgang meer bereik

   Grotere verschillen in lichtheid of tint tussen de eindkleuren betekenen meer beschikbare stappen en smallere banden. Een kleurverloop dat ook een beetje van tint verschuift, gebruikt meer combinaties van rood, groen en blauw dan een pure lichtheidshelling.

3. 3

   Werk in 16 bits waar het kan

   Beeldbewerkers die 16 bits per kanaal ondersteunen, houden tijdens het werken veel meer niveaus vast. Zet pas bij het exporteren om naar 8 bits, met dithering aan.

4. 4

   Exporteer op hoge kwaliteit

   Gebruik PNG voor vlakke graphics, of JPEG op een hoge kwaliteitsinstelling voor fotografische beelden. Vermijd GIF en PNG-8, die in totaal maar 256 kleuren bewaren.

5. 5

   Exporteer op het uiteindelijke formaat

   Een kleine kleurverloopafbeelding vergroten rekt de banden mee uit. Render of exporteer op het exacte formaat, of groter, in plaats van op te schalen.

Banding oplossen in CSS-kleurverlopen

Browsers renderen CSS-kleurverlopen live, dus er is geen exportinstelling om te veranderen. Twee dingen helpen. Maak ten eerste de helling breder of voeg een tintverschuiving toe. Leg ten tweede een subtiele ruislaag over het kleurverloop, die precies werkt als korrel in een afbeelding. CSS-ruistextuur laat lichte manieren zien om die laag te maken zonder grote afbeeldingsbestanden.

Banding oplossen in video en uploads op social

Sociale platforms comprimeren wat je uploadt opnieuw, en videocodecs zijn ontworpen om precies het soort subtiele detail weg te gooien dat kleurverlopen vloeiend houdt. Korrel helpt hier dubbel: het verbergt trappen en geeft de encoder echt detail om te bewaren. Upload op het aanbevolen formaat van het platform zodat het niet opnieuw wordt geschaald, en exporteer video op een royale kwaliteitsinstelling. Codeer je met ffmpeg, dan heeft x264 een instelling die is afgestemd op het behouden van korrel.

# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4

Loopende videoachtergronden zijn hier extra gevoelig voor, omdat ze meestal donker en langzaam zijn. Naadloze loopvideo’s behandelt de rest van de export.

Banding vanaf het begin voorkomen

• Kies kleurverlopen met genoeg verandering in lichtheid of tint voor hun formaat
• Plan korrel vanaf het begin in plaats van het als redding toe te voegen
• Houd donkere kleurverlopen iets opgetild in plaats van helemaal naar puur zwart te laten zakken
• Controleer na het uploaden op een telefoon, niet alleen op je ontwerpmonitor

Elke Mark in Gradiently wordt live gerenderd op het formaat waarin je ontwerpt, met korrel als onderdeel van het recept, en ontwerpen met een geclaimde Mark exporteren als PNG of JPEG tot drie keer het formaat van het ontwerp, dus een kleurverloop hoeft nooit uit een kleine afbeelding te worden uitgerekt.