Kleurverloop met twee kleuren: 30 paren die altijd werken

Een kleurverloop met twee kleuren is een overgang van de ene kleur naar de andere, en het is het veiligste verloop dat je kunt maken: twee kleuren zijn makkelijk te kiezen, makkelijk opnieuw in te kleuren en makkelijk consistent te houden. Of een paar werkt, komt neer op twee dingen: hoe ver de tinten uit elkaar liggen op de kleurencirkel en hoe sterk ze in lichtheid verschillen. Zit dat goed, dan vormen bijna elke twee kleuren een goed verloop. Hieronder staan de regels, en daarna dertig paren die ze volgen.

Regel 1: let op de tintafstand

Tintafstand is hoe ver twee kleuren uit elkaar liggen op de kleurencirkel, gemeten in graden. Ze voorspelt wat er in het midden van de overgang gebeurt, en daar slagen of mislukken verlopen met twee kleuren.

Afstanden in de eerste rij zijn analoge kleuren. Afstanden in de laatste rij zijn complementaire kleuren, die naast elkaar opvallend ogen maar hulp nodig hebben als je ze mengt.

Regel 2: geef het een verschil in lichtheid

Twee kleuren met dezelfde lichtheid geven een verloop dat vlak aanvoelt, alsof het nergens heen gaat. Een duidelijk verschil in lichtheid geeft de overgang richting, zoals licht dat van één kant valt. Het levert ook een praktisch voordeel op: tekst kan in wit op het donkere uiteinde staan, of in een donkere inkt op het lichte uiteinde.

Paren met naburige tinten

Deze paren liggen binnen ongeveer 60 graden van elkaar. Ze kunnen niet modderig worden en staan goed op bijna alles, van knoppen tot schermvullende achtergronden. Bosbes en Getij zijn bijvoorbeeld allebei blauw dat richting violet beweegt, wat leest als één kleur die het licht vangt.

Paren van licht naar donker

Deze paren houden één tintfamilie aan en veranderen de lichtheid van bleek naar diep. Het zijn de veelzijdigste verlopen met twee kleuren: rustig genoeg voor een hele pagina, en met een donker uiteinde dat klaar is voor witte tekst. Ze vormen ook uitstekende merkverlopen, omdat ze één merkkleur uitbreiden in plaats van een nieuwe toe te voegen. Zie monochrome kleurenschema’s voor de theorie.

Contrastparen die zuiver blijven

Deze paren liggen verder uit elkaar, tussen ongeveer 90 en 150 graden, maar elk heeft een helder middelpunt bij de standaardmenging. Perzik en violet lopen via mauve, cyaan en magenta via maagdenpalm, oranje en magenta via felroze. Ze zijn energieker dan naburige paren, goed voor lanceringen, muziek en alles wat moet opvallen.

Het middelpunt verschuiven

Standaard is een kleurverloop met twee kleuren half om half. In CSS kun je het punt waar de twee kleuren gelijk gemengd zijn verschuiven met een kleurhint: een los percentage tussen de stops. Duw het naar één uiteinde en de andere kleur neemt meer van het oppervlak in, zonder een derde kleur toe te voegen.

/* Even blend: the mix point sits at 50% */
.even   { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }

/* Colour hint at 25%: violet arrives early and fills most of the box */
.violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); }

/* Colour hint at 75%: blue holds on for most of the box */
.blue   { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); }

Waar je tekst zet op een kleurverloop met twee kleuren

Een verloop met twee kleuren heeft een ingebouwde lay-out: het ene uiteinde is lichter en het andere donkerder. Zet de woorden aan het uiteinde dat het sterkst contrasteert met je tekstkleur, en laat het andere uiteinde de kleur dragen. Voor witte tekst is dat het donkere uiteinde; voor donkere inkt het lichte. Centreer kleine tekst nooit op het middelpunt van een paar van licht naar donker, want het contrast verandert dan over de regel. Tekst op een kleurverloop behandelt de controles in detail.

Een verloop met twee kleuren van jezelf maken

Verlopen met twee kleuren zijn juist populair omdat ze veilig zijn, dus de populaire paren zie je overal. Om er een herkenbaar te maken verander je iets wat mensen opmerken zonder erover na te denken: een steilere of ongewone hoek (zie hoek van een kleurverloop), een verschoven middelpunt, een fijne korrel, of een derde kleur die alleen aan één rand wordt gebruikt. Ben je klaar voor meer dan twee, dan zijn de 60 kleurcombinaties voor kleurverlopen gegroepeerd op sfeer.

Weet je al welke twee kleuren je wilt, dan kun je ze intypen in de zoekbalk van de Markt, bijvoorbeeld ‘blauw en violet’, en ontwerpen met de Marks die eromheen zijn gebouwd.