Därför blir vissa gradienter grå i mitten, och så stoppar du det

En gyttjig gradient är en övergång som blir grå, brun eller matt i mitten, trots att båda färgerna är klara. Det händer eftersom de flesta verktyg blandar färger i färgrymden sRGB och blandar röda, gröna och blå värden i raka linjer. När de två färgerna ligger på motsatta sidor av färghjulet möts de raka linjerna nära grått. Lösningen är att välja vilken väg övergången tar: lägg till en färg i mitten, blanda i OKLCH eller använd nyanser som ligger närmare varandra.

Därför blir motsatta färger grå

Titta på siffrorna. Rent blått är röd 0, grön 0, blå 255. Rent gult är röd 255, grön 255, blå 0. Halvvägs mellan dem hamnar varje kanal på ungefär 128, vilket är #808080: en mellangrå. Samma sak händer med rött och cyan, orange och azurblått, eller vilket annat komplementärt par som helst. Matematiskt går den raka linjen mellan dem rakt genom gråaxeln.

Ett andra, subtilare problem är den mörka svackan. Blått till rött i sRGB passerar #800080, en lila som är mörkare än båda ändarna, så övergångens mitt ser ut som ett blåmärke. Färgerna är inte motsatta, men övergången tappar ändå ljushet där de möts.

Lösning 1: lägg till ett mittstopp

Den enklaste lösningen fungerar i varje verktyg och format: välj färgen du vill ha i mitten och placera den där själv. Välj en klar, mättad färg som ligger mellan ändarna på färghjulet. Mellan blått och gult är det turkos eller grönt. Mellan orange och blått tar en rosa den varma vägen, den som de flesta solnedgångsgradienter använder.

Lösning 2: blanda i OKLCH

OKLCH beskriver färg som ljushet, kroma (intensitet) och nyans, och det utformades så att lika steg ser ut som lika förändringar för människor. Blandning i OKLCH håller uppe kroman och svänger runt nyanshjulet i stället för att skära rakt över det, så övergången kollapsar aldrig till grått. I CSS ber du om det med en enda fras. Du kan också välja vilket håll runt hjulet den ska ta.

/* Default for hex colours: sRGB, grey in the middle */
.muddy   { background: linear-gradient(90deg, #0000ff, #ffff00); }

/* OKLCH, shorter way round the wheel: through teal and green */
.clean   { background: linear-gradient(90deg in oklch, #0000ff, #ffff00); }

/* OKLCH, longer way round: through magenta, red and orange */
.sunset  { background: linear-gradient(90deg in oklch longer hue, #0000ff, #ffff00); }

/* OKLab: straight line, but with even lightness */
.even    { background: linear-gradient(90deg in oklab, #0000ff, #ffff00); }

OKLab är också värt att känna till. Det är standard i modern CSS-färgsyntax och ger mjuka, jämna övergångar, men eftersom det fortfarande färdas i en rak linje tappar äkta motsatser intensitet i mitten. Använd OKLab för färger som redan ligger nära varandra, och OKLCH eller ett mittstopp för färger som ligger långt ifrån varandra. För hela syntaxen, se OKLCH-gradienter i CSS, eller utforska rymden på oklch.com.

Lösning 3: välj närmare nyanser

Det mest pålitliga sättet att undvika gyttja är att inte be om den. Färger som ligger intill varandra på hjulet, som blått och violett eller orange och rosa, blandas rent i vilken färgrymd som helst eftersom deras raka linje aldrig går nära grått. Därför ger analoga färger de säkraste gradienterna, och därför kräver komplementära par försiktighet, se komplementfärger.

Lösning 4: håll koll på ljusheten

Gyttja är inte bara grått. En övergång kan också se matt ut när ljusheten sviktar i mitten, eller när ena änden är mycket mörkare än den andra och övergången sker i ett smalt band. Håll ljusheten hos dina stopp någorlunda jämn, eller ändra den stadigt åt ett håll, och ge övergången utrymme. En stoppposition på 40 % eller 60 % ser ofta mer naturlig ut än en mekanisk 50 %.

Gyttja blir värre i mesh gradienter, där flera färger möts på en gång. Samma regler gäller varje överlappning: håll grannar nära varandra och lägg en brygga mellan motsatser.

Vill du hellre utgå från en övergång som redan är balanserad kan du söka på Marknaden med färgord som ”blått och gult” eller ”djup turkos” och designa med vilken Mark du än hittar.