Monochrome verlopen: één tint, vele tonen

Een monochroom verloop mengt één tint door zijn eigen schakeringen, van diep naar licht, zonder een tweede kleur erbij te halen. Zwart naar wit via grijs is de zuiverste versie; een marineblauw dat opklimt naar bleekblauw, of een aubergine die oploopt naar lila, zijn ook monochrome verlopen. Ze ogen rustig en duur omdat niets concurreert, en om dezelfde reden tonen ze elke fout: banding, modderige middenpunten en een tint die halverwege afdrijft. De codes en CSS hieronder vermijden alle drie.

Monochroom verloop versus monochromatisch kleurenschema

De twee termen zijn verwant en worden vaak verward. Een monochromatisch kleurenschema is een palet: meerdere tinten, tonen en schakeringen van één tint, gebruikt in een heel ontwerp. Een monochroom verloop is één overgang binnen dat idee. Je kunt een monochroom verloop gebruiken in een ontwerp waarvan het palet helemaal niet monochromatisch is, zoals een diepblauwe achtergrond onder oranje letters.

Monochrome verloopcodes om te kopiëren

Elk van deze houdt één tint en verandert alleen de lichtheid en een beetje de verzadiging. Donkerdere stops zijn iets verzadigder dan lichtere, zoals echte kleur zich in schaduw gedraagt, en daarom ogen ze natuurlijk.

Voor het donkere uiteinde van deze familie op zich zie je zwarte verlopen en grijze verlopen. Voor hoe de stappen zich verhouden is tinten, tonen en schakeringen de achtergrondlectuur.

Een monochroom verloop maken in CSS

De simpelste manier om één tint te houden is de stops in oklch schrijven en alleen het eerste getal, de lichtheid, veranderen. De tinthoek blijft vast, dus de kleur kan niet dwalen, en oklch verdeelt zijn lichtheid gelijkmatig, dus de overgang klimt in een gestaag tempo. OKLCH uitgelegd behandelt het formaat.

.hero {
  /* one hue (264, a deep blue), lightness only */
  background: linear-gradient(
    in oklch 170deg,
    oklch(0.18 0.08 264) 0%,
    oklch(0.42 0.16 264) 55%,
    oklch(0.86 0.06 264) 100%
  );
}

.mono {
  /* true greyscale: chroma 0 */
  background: linear-gradient(
    180deg,
    oklch(0.12 0 0) 0%,
    oklch(0.55 0 0) 100%
  );
}

1. 1

   Kies de tint

   Kies één kleur en zoek zijn tinthoek. Een blauw zit rond 260, een groen rond 145, een rood rond 25.

2. 2

   Stel de donkerste en lichtste stop in

   Houd het donkere uiteinde boven zuiver zwart en het lichte onder zuiver wit, tenzij je een harde rand wilt. Een lichtheid van 0,15 tot 0,9 is een prettig bereik.

3. 3

   Plaats de middelste stop bewust

   Verplaats hem naar het uiteinde dat moet domineren. Een middelste stop op 30 procent geeft een grotendeels licht beeld; op 70 procent grotendeels donker. Verloopkleurstops toont meer.

4. 4

   Voeg korrel toe

   Een zwakke ruislaag over het verloop verbergt banding en geeft een materiaalgevoel.

Waarom donkere monochrome verlopen banding vertonen

De meeste schermen tonen 256 niveaus per kanaal. Een verloop van zwart #000000 naar donkergrijs #282828 heeft maar 40 onderscheiden stappen om mee te werken. Rek het uit over een hero van 1920 pixels breed en elke stap is een streep van 48 pixels, die het oog in het donker makkelijk opmerkt. Meerkleurige verlopen verbergen dit omdat de kanalen op verschillende momenten veranderen; een monochroom verloop verandert alle drie samen, dus de banden vallen op één lijn.

Verloopbanding en korrelige verlopen gaan uitgebreid in op de oplossing, met code voor een SVG-ruislaag.

Waar monochrome verlopen werken

Omdat ze één kleur dragen, laten monochrome verlopen letters en fotografie leiden. Ze passen bij luxe productlanceringen, architectenbureaus, muziekreleases en elk merk waarvan de identiteit één kleur is. Zet de woorden in het lichtste of donkerste uiteinde van dezelfde tint, of in wit of zwart, en het ontwerp leest als één zelfverzekerde beslissing.

Heb je een accent nodig, neem het dan van buiten de tint en gebruik het één keer: één oranje datum op een marineblauw verloop, of een rode prijs op grafiet. Het verloop blijft monochroom, en het accent krijgt alle aandacht omdat niets anders erom strijdt.

Een monochrome achtergrond in Gradiently kan ook bewegen: een Mark rendert zijn licht live, dus een eenkleurig verloop kan langzaam achter de woorden driften, en met Pro exporteert het als naadloze lus op elk formaat dat je ontwerpt.