Livfulla gradienter: mättade koder som inte vibrerar

En livfull gradient är stark och mättad utan att vibrera när två regler håller: varje färg ligger nära sin granne på färghjulet, och varje steg ändras tydligt i ljushet. Bryt den första och mitten blir lerig; bryt den andra, genom att lägga motsatta kulörer med lika ljushet sida vid sida, och kanten verkar flimra. De tolv koderna nedan följer båda reglerna, så de är högljudda som en affisch är högljudd, inte som en migrän.

Tolv koder för livfulla gradienter

Därför vibrerar vissa starka gradienter

Lägg ett mättat rött direkt mot ett mättat blått med liknande ljushet och gränsen verkar flimra, som om de två färgerna inte kan bestämma vilken som är främst. Formgivare kallar det kromatisk vibration. Den är starkast vid hårda kanter, i fina linjer och i färgad text, och det är därför röd text på blå bakgrund är så tröttande att läsa. Färgerna i sig är fina; det är kombinationen av motsatt kulör och lika ljushet, i kontakt, som orsakar det.

Det finns två lösningar. Antingen håller du färgerna isär med ett mörkare eller ljusare steg mellan dem, som till höger, eller så väljer du grannar i stället för motsatser. Komplementfärger förklarar när motsatser är värda besväret.

Regler för att göra din egen livfulla gradient

Lera är det andra sättet starka gradienter misslyckas. Blanda två mättade motsatser i vanlig sRGB och mittfärgen sjunker mot grått, vilket tas upp i leriga gradienter och, på en mer teknisk nivå, gradientinterpolering. Mättnad är i sig en ratt, inte en strömbrytare; mättnad i design visar hur du ställer in den.

Livfulla gradienter i CSS

Moderna webbläsare kan blanda i ett perceptuellt färgrum genom att du lägger till in oklch i gradienten. Det håller mitten av en bred blandning lika levande som ändarna. Ge äldre webbläsare en hexversion först.

.hero {
  /* fallback: neighbouring hues, stepped lightness */
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 50%, #db2777 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero {
    background: linear-gradient(135deg in oklch, #1d4ed8 0%, #db2777 100%);
  }
}

.hero h1 {
  color: #ffffff; /* white or near black, never another saturated colour */
}

Där livfulla gradienter fungerar bäst

Livfull färg förtjänar uppmärksamhet, så lägg den där uppmärksamhet är hela jobbet: ett scrollande flöde, en miniatyr bland tjugo andra, en affisch tvärs över en gata. Den fungerar sämre där folk behöver läsa länge, som dokument, instrumentpaneler och långa artiklar, där en mättad yta tröttar ögat inom några stycken. Där håller du den livfulla gradienten till en rubrik eller en enda knapp och låter en lugn yta bära resten.

Tryck är det enda stället att vänta sig en chock. De klaraste skärmfärgerna, särskilt elektriskt blått, knallrosa och syragrönt, ligger utanför vad CMYK-färger kan återge och kommer tillbaka märkbart matta på papper. RGB eller CMYK förklarar varför; välj lite djupare varianter själv och beställ ett korrektur före en tryckning.

Ord på en livfull gradient

Mättade bakgrunder svänger i ljushet från den ena änden till den andra, så en enda textfärg som läses i den mörka änden kan försvinna i den ljusa. Använd bara vitt eller nästan svart, sätt rubriken där gradienten är som djupast eller blekast och kontrollera kontrasten vid den sämsta punkten, inte genomsnittet. Färgkontrast och tillgänglighet har siffrorna att sikta på.

Det är här en Mark i Gradiently hjälper till med stark färg: den vet var orden är, fördjupar eller lyfter färgen nära bokstäverna, och Auto-bläck väljer ljus eller mörk text per rad ur sin egen palett. En mättad look förblir läsbar i varje storlek utan ruta eller skugga bakom rubriken. För neonlooks specifikt, se neongradienter; för den motsatta änden av ratten, subtila gradienter.