Farvestærke gradienter: mættede koder, der ikke flimrer

En farvestærk gradient er lys og mættet uden at summe, når to regler holder: hver farve ligger tæt på sin nabo på farvecirklen, og hvert trin skifter tydeligt i lyshed. Bryd den første, og midten bliver mudret; bryd den anden ved at placere modsatte farvetoner med samme lysstyrke side om side, og kanten ser ud til at flimre. De tolv koder nedenfor følger begge regler, så de er højlydte på den måde, en plakat er højlydt, ikke på den måde, en migræne er.

Tolv koder til farvestærke gradienter

Hvorfor nogle lyse gradienter flimrer

Sæt en mættet rød lige op ad en mættet blå med samme lysstyrke, og grænsen ser ud til at flakke, som om de to farver ikke kan bestemme sig for, hvem der står forrest. Designere kalder det kromatisk vibration. Det er stærkest ved hårde kanter, i tynde linjer og i farvet tekst, og det er grunden til, at rød skrift på blå baggrund er så trættende at læse. Farverne i sig selv er fine; det er kombinationen af modsat farvetone og samme lyshed, der rører hinanden, der skaber det.

Der er to løsninger. Enten holder du farverne adskilt med et mørkere eller lysere trin imellem, som til højre, eller også vælger du naboer i stedet for modsætninger. Komplementærfarver forklarer, hvornår modsætninger er besværet værd.

Regler for at lave din egen farvestærke gradient

Mudder er den anden måde, lyse gradienter fejler på. Bland to mættede modsætninger i almindelig sRGB, og farven halvvejs falder mod gråt, hvilket dækkes i mudrede gradienter og, på et mere teknisk plan, interpolation i gradienter. Mætning er i sig selv en drejeknap, ikke en kontakt; mætning i design viser, hvordan du indstiller den.

Farvestærke gradienter i CSS

Moderne browsere kan blande i et perceptuelt farverum, når du tilføjer in oklch til gradienten. Det holder midten af en bred blanding lige så klar som enderne. Giv ældre browsere en hex-udgave 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 */
}

Hvor farvestærke gradienter virker bedst

Farvestærk farve tjener opmærksomhed, så brug den der, hvor opmærksomhed er hele opgaven: et feed, der scrolles, en thumbnail blandt tyve andre, en plakat på den anden side af gaden. Den virker dårligere der, hvor folk skal læse længe, som dokumenter, dashboards og lange artikler, hvor en mættet flade trætter øjet inden for få afsnit. Der skal du holde den farvestærke gradient til et sidehoved eller en enkelt knap og lade en rolig flade bære resten.

Tryk er det ene sted, hvor du skal forvente et chok. De klareste skærmfarver, især elektrisk blå, knaldpink og syregrøn, ligger uden for det, CMYK-farver kan gengive, og kommer tydeligt matte tilbage på papir. RGB eller CMYK forklarer hvorfor; vælg selv lidt dybere udgaver, og bestil en prøve før et oplag.

Ord på en farvestærk gradient

Mættede baggrunde svinger i lysstyrke fra den ene ende til den anden, så en enkelt tekstfarve, der kan læses i den mørke ende, kan forsvinde i den lyse. Brug kun hvid eller næsten sort, placer overskriften, hvor gradienten er dybest eller lysest, og tjek kontrasten på det værste punkt, ikke gennemsnittet. Farvekontrast og tilgængelighed har tallene, du skal sigte efter.

Det er her, en Gradiently Mark hjælper med lyse farver: den ved, hvor ordene er, gør farven dybere eller lysere nær bogstaverne, og Automatisk tekstfarve vælger lys eller mørk skrift per linje ud fra Markens egen palet. Et mættet udtryk forbliver læseligt i alle størrelser uden en boks eller skygge bag overskriften. Til neonlooks specifikt, se neongradienter; til den modsatte ende af skalaen, diskrete gradienter.