60 kleurcombinaties voor kleurverlopen die werken, met codes

De beste kleurcombinaties voor kleurverlopen volgen een van twee regels: ze gebruiken tinten die naast elkaar op de kleurencirkel liggen, zodat de overgang zuiver blijft, of ze overbruggen ver uiteenliggende tinten met een gekozen middenkleur, zodat hij nooit grijs wordt. Hieronder staan 60 combinaties die die regels volgen, gegroepeerd op sfeer: rustig, krachtig, warm, koel, donker en pastel. Kopieer elk staal als CSS, en lees de uitleg onder elke groep om te zien waarom ze werken, zodat je je eigen kunt maken.

Alles hier is gewone CSS met hexkleuren, dus het werkt in elke browser, en dezelfde codes kun je in elke ontwerptool intypen. Is een term nieuw, dan legt wat een kleurverloop is stops en hoeken uit.

Rustige kleurcombinaties voor kleurverlopen

Rustige kleurverlopen houden hun kleuren dicht bij elkaar in tint en lichtheid. Niets springt eruit, dus het oog rust. Ze zijn goede achtergronden voor lezen, welzijnsmerken, portfolio’s en alles wat stil moet voelen. Salie en steen bijvoorbeeld beweegt maar een klein stukje over de cirkel en verliest onderweg wat lichtheid, wat leest als schaduw op een muur in plaats van als kleureffect.

Krachtige kleurcombinaties voor kleurverlopen

Krachtige kleurverlopen gebruiken verzadigde kleuren en meer afstand over de cirkel. Ze trekken de aandacht in een drukke feed, op een uitverkoopbanner of een lanceringspagina. De truc is paren kiezen waarvan de rechte overgang helder blijft. Magenta naar amber gaat via koraal; kobalt naar koraal gaat via paars. Geen van beide komt in de buurt van grijs, en daarom ogen ze van begin tot eind levendig.

Warme kleurcombinaties voor kleurverlopen

Warme kleurverlopen leven tussen rood en geel en voelen zonnig, smakelijk en menselijk. Ze passen bij eten, horeca, lifestyle en alles wat persoonlijk is. De meeste voegen een donkerder, roder uiteinde toe zodat de overgang gewicht heeft: Gouden uur loopt van bleke honing naar gebrand amber, zoals laat licht langs een muur naar beneden zakt. Voor de psychologie van temperatuur, zie warme en koele kleuren.

Koele kleurcombinaties voor kleurverlopen

Koele kleurverlopen zitten tussen groen en violet en voelen schoon, rustig en precies. Ze zijn de natuurlijke thuisbasis van technologie, gezondheid, financiën en water. Blauw is het anker van de meeste, en daarom ogen ze betrouwbaar, en daarom heeft een koel kleurverloop een onderscheidend detail nodig, zoals een violet uiteinde of een verschuiving naar petrol, om niet op elke bank te lijken. Meer blauwen staan in blauwe kleurverlopen.

Donkere kleurcombinaties voor kleurverlopen

Donkere kleurverlopen zijn bijna zwarte ondergronden waaruit één verlichte kleur oprijst. Ze voelen luxe, nachtelijk en filmisch, en ze laten witte letters scherp ogen. Houd het donkere uiteinde licht gekleurd in plaats van puur zwart, zodat de overgang iets heeft om doorheen te reizen. Donkere hellingen vertonen snel banding, dus voeg korrel toe voordat je publiceert; zie donkere kleurverloopachtergronden.

Kleurcombinaties voor pastelkleurverlopen

Pastels zijn bleke kleuren met veel lichtheid en een beetje verzadiging. Ze voelen fris, zacht en vriendelijk, en passen bij beauty, baby, papierwaren en voorjaarscampagnes. Omdat ze allemaal zo licht zijn, kunnen zelfs ver uiteenliggende pasteltinten in elkaar overlopen tot een witachtig grijs, dus de laatste twee hier lopen via een bleek lila. Zet tekst op pastels in donkere inkt in plaats van wit. Er staat meer in pastelkleurverlopen.

Zo gebruik je deze kleurverloopcodes

Elke code is een complete CSS-waarde voor background. Plak hem op elk element, of neem de hexkleuren en stopposities over in een ontwerptool. Stel op het web eerst een effen terugvalkleur in, genomen uit de donkerste of belangrijkste stop.

.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}

Zo maak je je eigen combinatie

1. 1

   Kies eerst de sfeer

   Bepaal rustig of krachtig, warm of koel, donker of licht voordat je een kleur kiest. Dat beperkt de keuze tot een van de groepen hierboven.

2. 2

   Kies een ankerkleur

   Meestal je merkkleur of de kleur van wat je verkoopt. Zie merkkleuren kiezen.

3. 3

   Voeg een buur toe

   Schuif 30 tot 60 graden over de kleurencirkel voor een zuivere tweede kleur. Verander ook de lichtheid een beetje, voor diepte.

4. 4

   Overbrug alles wat ver weg ligt

   Wil je een verre tint, zet dan een heldere middenkleur ertussen zodat de overgang niet grijs wordt. Zie modderige kleurverlopen.

5. 5

   Maak hem van jou

   Verander de hoek, schuif een stop weg van 50%, voeg een derde kleur of een laag korrel toe. Kleine wijzigingen zorgen dat een combinatie niet als preset oogt.

Een populaire code is een goed begin, maar duizenden andere ontwerpen beginnen daar ook. Wil je een kleurverloopidentiteit die niemand anders heeft, dan kun je een afbeelding die je mooi vindt koppelen aan haar palet en de Marks die er het dichtst bij liggen, of nieuwe maken die erop lijken.