# Kleurverloop met twee kleuren: 30 paren die altijd werken [Canonical HTML page](https://gradiently.design/nl/guide/two-color-gradients) Twee kleuren, één richting, niets wat mis kan gaan. Bijna. Dit zijn de twee regels die bepalen of een paar werkt, en dertig paren die aan beide voldoen, klaar om te kopiëren. ## The short version - Een kleurverloop met twee kleuren laat de ene kleur overlopen in de andere, en het is het eenvoudigste verloop om te ontwerpen, opnieuw in te kleuren en consistent te houden. - Of een paar werkt, hangt vooral af van de tintafstand: naburige tinten mengen altijd zuiver, en tegenovergestelde tinten worden grijs in het midden. - Een verschil in lichtheid tussen de twee kleuren geeft een kleurverloop richting en diepte. - Twee kleuren uit dezelfde tintfamilie, één licht en één donker, vormen het veelzijdigste kleurverloop, omdat tekst aan één uiteinde werkt. - Omdat verlopen met twee kleuren zo gewoon zijn, maakt een kleine ingreep, zoals een ongewone hoek, een verschoven middelpunt of een laag korrel, er een herkenbaar. 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. | Tintafstand | Wat er in het midden gebeurt | Oordeel | | --- | --- | --- | | 0 tot 60 graden | Een zuivere tussenkleur, zoals violet tussen blauw en roze | Altijd veilig | | 60 tot 120 graden | Meestal een heldere nieuwe kleur, soms wat dof | Veilig; controleer het midden | | 120 tot 150 graden | Vaak een zachter, grijzer midden | Zorgvuldig testen | | 150 tot 180 graden | Grijs of bruin in het midden bij de standaardmenging | Heeft een brugkleur of OKLCH nodig | Hoe groter de afstand, hoe waarschijnlijker het middelpunt kleur verliest. De volledige uitleg staat in [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients). Afstanden in de eerste rij zijn [analoge kleuren](https://gradiently.design/nl/guide/analogous-colors). Afstanden in de laatste rij zijn [complementaire kleuren](https://gradiently.design/nl/guide/complementary-colors), 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. ### Voelt vlak - Twee middentonen met dezelfde lichtheid - Twee volledig verzadigde kleuren zonder donker uiteinde - Geen duidelijke plek voor tekst ### Voelt belicht - Eén lichtere en één donkerdere kleur - Een verzadigde kleur met een diepere buur - Een duidelijk licht en donker uiteinde voor tekst ## 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. - Bosbes: `linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)` - Flamingo: `linear-gradient(135deg, #f472b6 0%, #fb923c 100%)` - Lagune: `linear-gradient(135deg, #06b6d4 0%, #10b981 100%)` - Goudsbloem: `linear-gradient(135deg, #fbbf24 0%, #f97316 100%)` - Orchidee: `linear-gradient(135deg, #d946ef 0%, #6366f1 100%)` - Vers gemaaid: `linear-gradient(135deg, #84cc16 0%, #10b981 100%)` - Rozenhout: `linear-gradient(135deg, #e11d48 0%, #db2777 100%)` - Getij: `linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)` - Clementine: `linear-gradient(135deg, #fb923c 0%, #facc15 100%)` - Mos en teal: `linear-gradient(135deg, #65a30d 0%, #0f766e 100%)` Paren met naburige tinten: buren op de cirkel, dus het midden is altijd een zuivere kleur. ## 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](https://gradiently.design/nl/guide/monochromatic-color-scheme) voor de theorie. - Denim: `linear-gradient(180deg, #bfdbfe 0%, #1e3a8a 100%)` - Pruim: `linear-gradient(180deg, #f5d0fe 0%, #701a75 100%)` - Bos: `linear-gradient(180deg, #bbf7d0 0%, #14532d 100%)` - Roest: `linear-gradient(180deg, #fed7aa 0%, #9a3412 100%)` - Houtskool: `linear-gradient(180deg, #e5e5e5 0%, #262626 100%)` - Wijn: `linear-gradient(180deg, #fecdd3 0%, #881337 100%)` - Diep teal: `linear-gradient(180deg, #99f6e4 0%, #134e4a 100%)` - Indigo: `linear-gradient(180deg, #c7d2fe 0%, #312e81 100%)` - Cacao: `linear-gradient(180deg, #e7d3c1 0%, #4a2c1d 100%)` - Amber: `linear-gradient(180deg, #fef3c7 0%, #92400e 100%)` Paren van licht naar donker: één tintfamilie, een groot verschil in lichtheid. Donkere inkt bovenaan, witte tekst onderaan. ## 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. - Koraal en indigo: `linear-gradient(135deg, #fb7185 0%, #4338ca 100%)` - Perzik en violet: `linear-gradient(135deg, #fdba74 0%, #7c3aed 100%)` - Limoen en blauw: `linear-gradient(135deg, #a3e635 0%, #2563eb 100%)` - Roze en hemelsblauw: `linear-gradient(135deg, #f472b6 0%, #38bdf8 100%)` - Geel en roze: `linear-gradient(135deg, #fde047 0%, #ec4899 100%)` - Cyaan en magenta: `linear-gradient(135deg, #22d3ee 0%, #d946ef 100%)` - Rood en violet: `linear-gradient(135deg, #ef4444 0%, #6d28d9 100%)` - Mint en violet: `linear-gradient(135deg, #34d399 0%, #8b5cf6 100%)` - Oranje en magenta: `linear-gradient(135deg, #f97316 0%, #c026d3 100%)` - Groen en goud: `linear-gradient(135deg, #16a34a 0%, #facc15 100%)` Contrastparen: meer tintafstand, toch een helder midden. Controleer het tekstcontrast aan beide uiteinden. ## 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. ```css /* 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); } ``` Een kleurhint verschuift het middelpunt zonder een kleur toe te voegen. Het is een van de snelste manieren om een gangbaar paar minder standaard te laten ogen. ## 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](https://gradiently.design/nl/guide/text-on-gradient) behandelt de controles in detail. Een staande post met een korte kop aan het rustigere uiteinde van een achtergrond met kleurverloop Woorden aan het rustige uiteinde van de overgang, kleur aan het andere: de eenvoudigste lay-out die een kleurverloop biedt. ## 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](https://gradiently.design/nl/guide/gradient-angle)), 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](https://gradiently.design/nl/guide/gradient-color-combinations) 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. ## FAQ ### Welke twee kleuren geven het beste kleurverloop? Kleuren binnen ongeveer 60 graden van elkaar op de kleurencirkel, met een duidelijk verschil in lichtheid, geven de betrouwbaarste verlopen met twee kleuren. ### Waarom ziet mijn kleurverloop met twee kleuren er grijs uit in het midden? De kleuren liggen bijna tegenover elkaar op de kleurencirkel. Voeg een heldere brugkleur toe in het midden of meng in OKLCH. ### Is een kleurverloop met twee kleuren beter dan met drie? Twee kleuren zijn eenvoudiger en veiliger. Drie geven meer diepte en laten je het middelpunt bepalen, maar gaan makkelijker mis. ### Hoe verander ik waar twee kleuren elkaar ontmoeten in een CSS-gradient? Voeg een kleurhint toe, een los percentage tussen de twee stops, zoals `linear-gradient(#3b82f6, 25%, #8b5cf6)`. ### Waar zet je tekst op een kleurverloop met twee kleuren? Aan het uiteinde met het meeste contrast voor je tekstkleur: wit op het donkere uiteinde, donkere inkt op het lichte uiteinde.