Negen fouten met kleurverlopen die je werk goedkoop laten lijken

De meest voorkomende fouten met kleurverlopen zijn een grijs, modderig midden, te veel kleuren, zichtbare banding, tekst die verdwijnt, harde stops, een overdaad aan regenboog, korrel die niet klopt, onaangeroerde presets en een look die gelijk is aan die van iedereen. Elke fout heeft een precieze oorzaak en een precieze oplossing. Voor geen ervan heb je een nieuwe tool nodig, alleen een scherpere blik op wat het verloop tussen de stops doet.

Deze gids behandelt de negen in de volgorde waarin je ze meestal tegenkomt, van de kleurwiskunde tot de identiteit. Wil je eerst de basis, lees dan wat een kleurverloop is.

Fout 1: een grijs, modderig midden

Meng twee kleuren van tegenovergestelde kanten van de kleurencirkel, zoals blauw en oranje, en het punt halverwege is in sRGB een dof grijsbruin. De browser neemt het gemiddelde van de rode, groene en blauwe kanalen, en het gemiddelde van twee complementaire kleuren ligt dicht bij neutraal. Het resultaat lijkt op een veeg tussen twee goede kleuren.

Los het op door het verloop langs een kleur te leiden die op de cirkel tussen de twee ligt, of door te interpoleren in een perceptuele kleurruimte. Modderige kleurverlopen behandelt beide methodes en OKLCH in CSS legt de syntaxis uit.

Fout 2: te veel kleuren

Elke kleur die je toevoegt is nog een overgang die het oog moet lezen. Voorbij vier of vijf stops leest een kleurverloop niet meer als licht dat over een oppervlak valt, maar als een strepengrafiek. Het wordt ook onmogelijk om het twee keer op dezelfde manier na te maken.

Kies één kleurfamilie, voeg een lichtere en een donkerdere verwant toe en sta daarna hooguit één accent toe. Werken met analoge kleuren is het veiligste vertrekpunt.

Fout 3: strepen door banding

Banding is de trap van zichtbare stappen die je ziet in een traag kleurverloop, vooral een donker. Een 8-bits kanaal heeft 256 niveaus, en als een verloop een korte afstand in kleur aflegt over een breed vlak, wordt elk niveau een band van meerdere pixels breed. Zware JPEG-compressie maakt het erger.

.hero {
  position: relative;
  background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

Korrel werkt omdat het pixels verstrooit over naburige niveaus, zodat de rand tussen twee banden verdwijnt. Exporteer als PNG of als JPEG van hoge kwaliteit. Banding in kleurverlopen loopt de exportinstellingen in detail door.

Fout 4: tekst die verdwijnt op het kleurverloop

Een kleurverloop verandert onder elke letter. Witte tekst kan prachtig lezen op het donkere uiteinde van een verloop en op het lichte uiteinde van dezelfde regel verdwijnen. Ontwerpers controleren de kop waar hij het mooist is, en lezers komen hem tegen waar hij het slechtst is.

Controleer het contrast op het lichtste punt achter lichte tekst, of op het donkerste punt achter donkere tekst. WCAG vraagt 4,5:1 voor lopende tekst en 3:1 voor grote tekst. Kleurcontrast legt de getallen uit en tekst op een kleurverloop gaat over de plaatsing.

Fout 5: harde stops die per ongeluk ontstaan

Als twee stops een paar procent uit elkaar staan, springt het verloop van de ene kleur naar de andere en trekt het een lijn waar niemand om vroeg. Harde stops zijn nuttig als je ze bewust inzet, voor strepen en grafieken, maar een onbedoelde naad leest als een fout.

Fout 6: een overdaad aan regenboog

Een volledig spectrum is het luidste wat een kleurverloop kan doen, en het zegt zelden iets over het merk dat het gebruikt. Het draagt ook de associaties van elke tint tegelijk. Wil je een regenboog, gebruik er dan een korte boog van en houd de helderheid in de hand. Regenboogkleurverlopen laat smaakvolle versies zien.

Fout 7: korrel die niet klopt

Textuur hoort bij een look, dus met wisselende korrel voelt een reeks ontwerpen alsof hij van drie plekken komt. Korrelige kleurverlopen behandelt hoeveel je gebruikt.

Fout 8: de preset onaangeroerd gebruiken

De meeste tools bieden dezelfde verlopen van twee kleuren onder 135 graden. Ze zien er prima uit, en daarom zie je ze overal. Een preset is een vertrekpunt: verschuif één kleur, voeg een derde stop toe, pas de richting aan de lay-out aan en voeg een materiaal toe. Een gradient generator gebruiken loopt die aanpassingen door.

Fout 9: eruitzien als iedereen

De laatste fout is de dure. Een kleurverloop dat goed gemaakt is maar in de kern gelijk is aan dat van elke concurrent, doet niets voor herkenning. De oplossing is consistentie plus iets dat moeilijk te kopiëren is, zoals een materiaal, een manier van bewegen of een manier om ruimte te maken voor woorden. Branding met kleurverlopen legt uit hoe je er een bezit.