Anton Danshin

Why gradients go muddy: the visual version

The widgets from the article Why gradients go muddy, in one place, for when you would rather play than read. Under each heading is a short note on what that widget illustrates. The last one lets you pick any two colors.

One blend, five spaces

Blue to yellow, blended in five color spaces. The formula is always the same straight line; only the numbers it is drawn in change. The middle of the bar goes from dead gray to mauve to teal depending on the space.

#0000FF to #FFFF00, in five color spaces

Encoded sRGB

#808080

Linear light

#BCBCBC

HSL

#00FF80

Lab

#CA8AAA

Oklab

#6CABC7

50%

The same two colors and the same formula, five different middles.

The path through the gray point

The same five blends drawn as paths on the a*/b* plane of Lab. The gray cross in the middle is where color disappears: some paths go straight through it, others pass it at a distance.

#0000FF to #FFFF00, seen in Lab

  • Encoded sRGB#808080 · L* 54 · C 0
  • Linear light#BCBCBC · L* 76 · C 0
  • HSL#00FF80 · L* 88 · C 90
  • Lab#CA8AAA · L* 65 · C 30
  • Oklab#6CABC7 · L* 67 · C 24
50%

Each line is one gradient space, drawn on the a*/b* plane (looking down the lightness axis). The gray cross is where color disappears. The dots are the colors at the chosen position.

Try your own colors

Pick any two colors and see the same blend in each space. It also prints the CSS line that asks a browser for each blend, ready to copy.

Gradient comparison

From
To

Encoded sRGB

#808080

Linear light

#BCBCBC

HSL

#00FF80

Lab

#CA8AAA

Oklab

#6CABC7

50%
  • Encoded sRGBlinear-gradient(to right in srgb, #0000ff, #ffff00)
  • Linear lightlinear-gradient(to right in srgb-linear, #0000ff, #ffff00)
  • HSLlinear-gradient(to right in hsl, #0000ff, #ffff00)
  • Lab (closest)linear-gradient(to right in lab, #0000ff, #ffff00)
  • Oklablinear-gradient(to right in oklab, #0000ff, #ffff00)

Pick two colors. Each bar is the same straight-line blend, done in a different color space. Below are the CSS lines that ask a browser for each one; CSS lab() uses a D50 white, so its Lab is only close to ours.

For the reasoning and the numbers, read the full article.

© 2026, Built with Gatsby