Subtiele kleurverlopen: rustige overgangen voor interfaces

Een subtiel kleurverloop loopt tussen twee kleuren die zo dicht bij elkaar liggen dat je de verandering meer voelt dan ziet: wit naar een koel gebroken wit, bijna zwart naar een iets zachter bijna zwart. Die kleine verschuiving laat een vlak verlicht lijken, en daarom gebruiken strakke interfaces ze op paginaachtergronden, kaarten en donkere panelen. De codes hieronder houden het helderheidsverschil op een paar procent; groter, en het kleurverloop wordt een kenmerk in plaats van een vlak.

Codes voor lichte subtiele kleurverlopen

Elk begint dicht bij wit en drijft naar een zwakke tint. Kies de tint uit je merkkleur, zodat zelfs de achtergrond een spoor van identiteit draagt. Van boven naar beneden voelt het natuurlijkst, want licht komt meestal van boven.

Codes voor donkere subtiele kleurverlopen

Donkere vlakken profiteren nog meer, want puur vlak zwart lijkt op een gat in het scherm. Til de bovenkant een beetje op en laat de onderkant landen. Kleurverlopen voor donkere modus behandelt complete thema’s; dit zijn de bouwstenen.

Waar subtiele kleurverlopen werken in een interface

De vuistregel: een subtiel kleurverloop mag nooit het ding zijn waar je naar kijkt. Als een beoordelaar iets over het kleurverloop zegt, is het te sterk voor een achtergrond. Voor meer ingetogen looks in print en social media en op schermen zie minimalistische achtergronden.

Hoe je een subtiel kleurverloop tint met je merkkleur

Een neutraal grijs kleurverloop is veilig maar anoniem. Het lichtere of donkere uiteinde tinten met een spoor van je merktint laat de hele interface verwant aanvoelen aan het logo, zonder dat iemand kan aanwijzen waarom. De truc is de tint te houden en bijna alle verzadiging weg te gooien.

1. 1

   Pak de merktint

   Zet je belangrijkste merkkleur om naar oklch of HSL en noteer alleen de tint: rond 265 voor een violet, 160 voor een groen, 30 voor een warm oranje.

2. 2

   Houd het bijna grijs

   Zet de chroma heel laag, rond 0,005 tot 0,015 in oklch, of de verzadiging onder ongeveer 30% in HSL bij heel hoge helderheid. Je wilt een fluistering van kleur, geen pastel.

3. 3

   Stel twee helderheidswaarden in

   Probeer voor lichte thema’s 99% en 96%; voor donkere thema’s ongeveer 20% en 15%. Houd beide uiteinden op dezelfde tint, zodat de overgang nooit naar grijs of een tweede kleur afdrijft.

4. 4

   Check het naast puur wit of zwart

   Zet het kleurverloop naast een effen wit of zwart blok. Als je het verschil helemaal niet ziet, verschuif dan het onderste uiteinde een tikje; als de tint van de andere kant van de kamer te zien is, verlaag dan de chroma.

Dezelfde tint kan dan doorlopen in randen, scheidingslijnen en hover-statussen, zodat het kleurverloop één onderdeel van een rustig systeem is in plaats van een los effect. Knoppen zijn de ene plek waar een iets sterkere verschuiving mag, een paar procent donkerder onderaan, omdat een vleugje volume helpt om aanklikbaar te lijken.

Een subtiel kleurverloop schrijven in css

Hexcodes werken overal. Voor fijnere controle schrijf je de kleuren in oklch, waar het eerste getal de waargenomen helderheid is, zodat je de verschuiving exact kunt instellen: bijvoorbeeld van 99% naar 96%. Mengen in oklch houdt de verandering ook gelijkmatig over de hele lengte. Css-kleurverloop in oklch legt de syntaxis uit en css lineair kleurverloop de basis.

:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}

Waarom subtiele kleurverlopen banding vertonen, en de oplossing

Twee dicht bij elkaar liggende kleuren hebben in een 8-bitsbeeld maar weinig stappen ertussen. Rek ze uit over een hero van 1920 pixels en elke stap wordt een zichtbare streep, vooral bij donkere kleurverlopen en goedkopere schermen. De volledige uitleg staat in banding in kleurverlopen.

Op het web haalt een kleine svg-ruistextuur met lage dekking over het kleurverloop zichtbare stappen weg zonder dat iemand de korrel opmerkt; css-ruistextuur heeft de code. Voor socialposts en slides heeft een Gradiently Mark zijn eigen korrel en wordt hij op elk formaat gerenderd, zodat een rustige achtergrond glad blijft, of het nu een story of een banner is. Wil je juist het tegenovergestelde van rustig, dan heeft levendige kleurverlopen de verzadigde codes.