Why "same brightness" colours don't look the same

The lightness and brightness numbers in your colour picker are arithmetic, not eyesight. That's why pure yellow and pure blue both read 50% lightness, even though yellow gives off almost 13 times as much light as blue, as your eye counts it. Lightness scales that were built from human judgement, such as OKLCH, close most of that gap. Not all of it, though. Very vivid colours still look slightly lighter than their number says.

Why do yellow and blue both say 50% lightness?

Say you've given a yellow tag and a blue tag the same HSL lightness, so they should carry the same weight on the page. They don't. The yellow one glows, and the blue one looks far darker. That's because the lightness number in your picker is simple arithmetic on the red, green and blue values, and it never asks how your eye sees them. HSL lightness sits halfway between the strongest and the weakest of the three. HSB brightness is just the strongest one. Which means every pure colour at full strength scores 50% lightness in HSL and 100% brightness in HSB, whether it's yellow or blue.

Even the web's own colour standard uses this exact case. CSS Color Module Level 4 (opens in a new tab) sets pure yellow and pure blue side by side at the same HSL lightness and notes that the yellow looks much lighter. And back in 1996, Alvy Ray Smith, the man who invented the HSV model, wrote that HSV and HSL are not based on perception, despite their names.

So an HSL number tells you where the slider sits, not how light the colour will look. If you'd like a refresher on how each slider works, have a look at What colour is made of: hue, saturation and brightness.

Yellow gives off far more light than blue

It comes down to your eyes, which respond far more strongly to some light than to others. In daylight they're most sensitive to light around 555 nanometres, near the middle of the spectrum. At a typical blue, though, 450 nanometres, that sensitivity falls to under 4% of the peak. The CIE, the international body behind colour standards, has standardised this sensitivity curve since 1924.

Now, a screen makes every colour from red, green and blue light. The standard weights for how much each one counts towards the light we see are about 21% for red, 72% for green and only 7% for blue. Yellow on a screen is red and green switched on together. So pure yellow gives off about 93% as much light as white, as the eye weighs it. Pure blue gives off about 7%, even at full strength.

In other words, yellow gets the two channels your eye counts most, and blue gets the one it barely counts at all. Divide one by the other and yellow carries 12.85 times the light of blue. Your picker calls them equal.

Worth knowing: light and lightness aren't the same thing. Luminance is the physical amount of light a colour gives off, whereas lightness is how light it looks, and the two don't rise in step. A grey that looks halfway between black and white gives off only about 18% of white's light. That's why lightness scales use a curve rather than a straight percentage of light.

Lightness numbers that match your eyes

There are lightness scales that get much closer, and they were built from experiments on how light people judge colours to be, rather than from arithmetic. HSL's marks were placed by sums. The marks on these scales were placed by asking people where "a bit lighter" falls, so equal steps on them look roughly equal.

The two you'll come across most are L* from CIELAB, a CIE standard from 1976 that the CIE itself calls "approximately uniform", and OKLCH, which Björn Ottosson published in December 2020 (opens in a new tab). OKLCH has worked in every major web browser since May 2023, and the story of how it got there is in How one engineer's blog post changed colour on the web.

On OKLCH's scale, pure yellow is 0.968 and pure blue is 0.452, which are the same figures the CSS standard prints. Shown out of 100, that's 97 and 45. On L*, blue comes out at about 30. When you're comparing colours of different hues, these are the numbers worth looking at, not HSL.

The real test is to go the other way. I built twelve colours, one every 30 degrees round the hue circle, all at OKLCH lightness 0.65 and a gentle strength. In grey, that row is nearly level. Yet HSL describes those same twelve colours with lightness numbers from 43% to 64%. So your app's numbers disagree by 20 points about colours your eyes see as matched.

Close is the honest word, though, not identical. Measured on L*, the matched row still wanders by about 3 points. Ottosson says as much himself: no lightness scale can be perfectly uniform in every viewing condition and against every background.

There's a reason the row uses gentle colours. Some OKLCH combinations are too vivid for a normal screen to show, and at a slightly stronger setting two of the cyans fall off the edge. Why your brand colour looks different on your phone explains those limits.

Vivid colours still look lighter than their number

Put a strong, vivid colour next to a grey that gives off exactly the same light, and the colour looks lighter. Colour scientists call this the Helmholtz–Kohlrausch effect, and the CIE lists it as an official term (opens in a new tab). People first described it in the 19th century, yet a 2009 paper in PLOS ONE (opens in a new tab) said it had "never been explained", and then offered an explanation of its own.

The easiest way to think about it is bonus points. Every colour has a lightness score, and vividness quietly adds a bonus that the score doesn't record. Yellow gets almost nothing. In most studies, vivid blues, purples, magentas and reds get the most. But one 2025 study found the effect mainly in greens, so the pattern isn't settled.

So how big is the bonus? That depends on the study, the screen and the set-up, which means there's no single figure. In one 2023 study (opens in a new tab), 21 people matched light colours to greys. Every colour measured 90 on a 100-point lightness scale, but depending on the hue, people matched them to greys anywhere from about 90 to about 105.

Neither of the eye-based scales can see the bonus. L* is calculated from the amount of light alone, so it misses it. OKLCH wasn't designed to account for it either, because Ottosson built it to follow the ordinary lightness of an existing colour-appearance model, and that lightness leaves the effect out. A correction for that model came later, as a separate add-on, and Ottosson's own posts don't mention the effect. Even with OKLCH, then, expect your most vivid blues and reds to look a touch lighter than the colours around them.

One more thing: a matching grey doesn't mean a matching colour. Two colours that come out the same in greyscale can still look different in brightness once you see them in colour, and the vivid one usually wins. Greyscale shows you the amount of light, weighted by the eye. It can't show the bonus that strong colour adds on top.

Which greyscale check can you trust?

The one that weights colours the way your eye does. That matters, because "greyscale" isn't one formula. Some converters average the red, green and blue values. Some use HSL lightness. Some use an old TV formula. Others use luminance, the eye-weighted light behind the web's contrast rules. And pure yellow and pure blue come out very differently depending on which one you use:

The HSL version is the trap. It turns every pure colour into the same mid-grey, #808080, which hides the very problem you're checking for. The average isn't much better, since pure red, green and blue all become #555555. The TV formula gets closer to the eye, but it works on the stored values rather than the light, so blue comes out darker than it should.

I couldn't find any documentation for which formula the popular design and photo apps use for their greyscale filters. So the safe thing is to test yours. Put pure red (#FF0000), pure green (#00FF00) and pure blue (#0000FF) side by side and convert them. If all three come out the same grey, your converter is doing arithmetic. But an eye-weighted one makes green much lighter than red, and blue the darkest of the three.

If you're wondering why the same weighting sits under the contrast rules, that's in Can everyone actually read your design?

What should you do differently in your next design?

Pick lightness with eye-based numbers, check it in an eye-weighted grey, and then trust your own eyes for the last nudge.

1. Stop comparing HSL or HSB numbers across hues. Two colours at the same HSL lightness can be wildly different in how light they look. The numbers only compare fairly within one hue.
2. Use a perceptual lightness number where you can. That means OKLCH lightness, or L* (which Google's Material Design calls "tone"). Hold the number steady while you change the hue. When I checked in September 2026, Figma's colour picker (opens in a new tab) offered RGB, HEX, CSS, HSL and HSB, and OKLCH had been a requested feature since March 2022. Community plugins add it. Canva's help describes colours by hex code.
3. Test your greyscale converter first. Run the red, green and blue test above. If the three greys match, switch to a different converter.
4. Check your set in eye-weighted grey. Colours that are meant to feel equally weighted should land on close greys.
5. Nudge vivid colours down by eye. Strong blues, purples, magentas and reds can still look a touch lighter than their matched neighbours, so darken them slightly until they sit level.
6. Spend the effort where it shows. Buttons and text that should carry equal weight, chart colours that shouldn't shout over each other, and sets of tags or status colours all depend on matched lightness.

Frequently asked questions

Why does yellow look brighter than blue?

Because your eyes respond far more strongly to some light than to others. Daylight sensitivity peaks around 555 nanometres, and for a typical blue it falls to under 4% of that peak. On a screen, yellow is red and green light together, so pure yellow gives off about 93% as much light as white, as the eye weighs it. Pure blue gives off only about 7%, even at full strength.

Why do yellow and blue both say 50% lightness when they look so different?

Because HSL's lightness is simple arithmetic on the red, green and blue values, not a measure of what you see. It takes the halfway point between the strongest and weakest channel, so every pure colour scores 50%. Scales built from how people judge colours tell a different story. On OKLCH's 0-to-1 scale, pure yellow is 0.97 and pure blue 0.45, and the web's colour standard uses this exact example.

Is OKLCH better than HSL?

For keeping colours equally light, yes. OKLCH's lightness number was built to follow what eyes see across different hues, so if you change the hue at a fixed lightness, colours stay roughly as light. In HSL the same move can change how light a colour looks by a lot. OKLCH isn't perfect, though: very vivid colours still look slightly lighter than their number. Figma's picker doesn't offer it yet, and Canva's help describes colours by hex code.

How do I make different colours look equally bright?

Choose them with a perceptual lightness number and keep that number the same while you change the hue. OKLCH's lightness works, and so does L* from CIELAB, which Google's Material Design calls "tone". Either gets far closer than HSL or HSB. Then check the set in an eye-weighted greyscale, and expect the most vivid colours, especially blues, purples and magentas, to still look slightly lighter. Nudge those down by eye.

Why do saturated colours look brighter?

It's a known feature of vision called the Helmholtz–Kohlrausch effect, where vivid colours look brighter than a grey that gives off the same amount of light. In most studies it's weakest in yellows and strongest in blues, purples, magentas and reds. It was first described in the 19th century and still isn't fully explained. Standard lightness scales, including CIELAB's L*, are calculated from the amount of light alone, so they don't capture it.

Why does my greyscale check give different results in different apps?

Because "greyscale" isn't one formula. Some tools average the red, green and blue values. Others use HSL lightness, which turns pure yellow and pure blue into exactly the same grey. Some use an old video formula, and others use the eye-weighted luminance behind web contrast rules. That's why pure yellow can come out anywhere from mid-grey to almost white. For a check that matches your eyes, use a luminance-based conversion.

For the curious

The picker numbers are HSL lightness, (max + min) ÷ 2, and HSV/HSB value, the max. "Light the eye counts" is relative luminance: WCAG 2.2 applies the ITU-R BT.709 weights 0.2126, 0.7152 and 0.0722 to linearised sRGB. The TV formula in the greyscale table is BT.601 luma (0.299, 0.587, 0.114), worked on gamma-encoded values. The eye's sensitivity curve is the CIE's photopic V(λ), CIE 018:2019.

CIELAB L* uses a cube root that was chosen in the 1950s to match Munsell's value scale. Oklab, and its polar form OKLCH, was fitted to lightness data generated by the CAM16 appearance model. CSS's lab() uses a D50 white, which puts blue at L* 29.6, while tools using sRGB's own D65 white give 32.3. Both are right, and that's why I quote OKLCH figures in the body.

The vividness bonus is the Helmholtz–Kohlrausch effect. In 2022 Hellwig, Stolitzka and Fairchild added it to CAM16 as a separate term, J_HK. CSS Color 4's explanatory (non-normative) text says equal L means "identical visual lightness". For vivid colours, the research says that's a close approximation rather than an exact match. If you want a longer read aimed at developers, try Evil Martians' "OKLCH in CSS" (opens in a new tab).

Sources (19)

• W3C, CSS Color Module Level 4 (opens in a new tab), Candidate Recommendation Draft, 13 September 2026, §7, §9 and §20
• W3C, WCAG 2.2, definition of relative luminance (opens in a new tab), 12 December 2024
• ITU-R, Recommendation BT.709-6 (opens in a new tab), June 2015, item 3.2
• ITU-R, Recommendation BT.601-7 (opens in a new tab), March 2011
• CIE, Spectral luminous efficiency for photopic vision (opens in a new tab), CIE 018:2019 dataset
• CIE, Helmholtz–Kohlrausch phenomenon, term 17-22-066 (opens in a new tab), luminance, 17-21-050 (opens in a new tab), spectral luminous efficiency, 17-21-035 (opens in a new tab) and CIE 1976 L*a*b* colour space, 17-23-076 (opens in a new tab), CIE S 017:2020
• Björn Ottosson, "A perceptual color space for image processing" (opens in a new tab), 23 December 2020
• Björn Ottosson, "Two new color spaces for color picking – Okhsv and Okhsl" (opens in a new tab), 8 September 2021
• Alvy Ray Smith and Lyons, "HWB: A More Intuitive Hue-Based Color Model" (opens in a new tab), Journal of Graphics, GPU, and Game Tools 1(1), 1996, pp. 3–17
• Corney, Haynes, Rees and Lotto, "The Brightness of Colour" (opens in a new tab), PLOS ONE 4(3), 2009
• High, Green and Nussbaum, "The Helmholtz-Kohlrausch effect on display-based light colors and simulated substrate colors" (opens in a new tab), Color Research & Application 48(2), 2023
• Hellwig, Stolitzka and Fairchild, "Extending CIECAM02 and CAM16 for the Helmholtz-Kohlrausch effect" (opens in a new tab), Color Research & Application 47, 2022, and "The brightness of chromatic stimuli" (opens in a new tab), 49(1), 2024
• Seong, Kwak and Kim, a CIECAM16-based lightness model incorporating the H-K effect (opens in a new tab), Color Research & Application 50, 2025
• Glasser, McKinney, Reilly and Schnelle, "Cube-Root Color Coordinate System" (opens in a new tab), JOSA 48(10), 1958
• MDN, oklch() (opens in a new tab), browser support, retrieved September 2026
• Figma Help Center, "About color models" (opens in a new tab), and Figma Forum, "Support OKLab and OKLCH" (opens in a new tab), retrieved 19 September 2026
• Canva Help, "Design with print colours" (opens in a new tab), retrieved 19 September 2026
• Google, Material Color Utilities (opens in a new tab) (HCT and tone)
• Andrey Sitnik, "OKLCH in CSS: why we moved from RGB and HSL" (opens in a new tab), Evil Martians, 2022, updated September 2025