css.types.color.oklch - Relative color bug (partial support) until Chromium 121 #26041
Labels
data:css
Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS
needs triage
This issue needs to be confirmed
Comments
github-actions
bot
added
the
data:css
marcustyphoon
changed the title
1 task
|
@marcustyphoon Thanks for reporting. Can you share the exact steps you took to reproduce the issue, ideally with screenshots? This would help us significantly to reproduce it. 🙏 |
|
Sure; here's a quick and dirty testing page. In Chromium 121, the spec-compliant code hardly changes the relative oklch and relative oklab luminance values; they're being serialized to a 0-100 range instead of 0-1. Apparently this is only true for luminance. I can also confirm the existing partial support notes about relative rgb (r/g/b are 0-1), hsl (s/l are 0-1), and hwb (w/b are 0-1) in that version. The oklch, oklab, and rgb bugs are fixed in Chromium 122 and 124; all of the bugs are fixed in Chromium 125. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>relative color demo</title>
<style>
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1ch;
margin: 1ch;
}
p::after {
content: ' ' attr(style);
font-style: italic;
color: black;
}
</style>
</head>
<body>
<div style="background-color: #5785a8">
relative oklch serialized maximums: 1, 0.4, 360
<p style="color: oklch(from #5785a8 calc(l - 0.3) c h)">This text should be 30% darker than the background.</p>
<p style="color: oklch(from #5785a8 l calc(c + 0.2) h)">This text should be 50% more saturated than the background.</p>
<p style="color: oklch(from #5785a8 l c calc(h + 180))">This text should be orange.</p>
</div>
<div style="background-color: #5785a8">
relative oklab serialized maximums: 1, ±0.4, ±0.4
<p style="color: oklab(from #5785a8 calc(l - 0.3) a b)">This text should be 30% darker than the background.</p>
<p style="color: oklab(from #5785a8 l calc(a + 0.2) b)">This text should be magenta.</p>
</div>
<div style="background-color: #5785a8">
relative lch serialized maximums: 100, 150, 360
<p style="color: lch(from #5785a8 calc(l - 30) c h)">This text should be 30% darker than the background.</p>
<p style="color: lch(from #5785a8 l calc(c + 50) h)">This text should be 33% more saturated than the background.</p>
<p style="color: lch(from #5785a8 l c calc(h + 180))">This text should be orange.</p>
</div>
<div style="background-color: #5785a8">
relative lab serialized maximums: 100, ±125, ±125
<p style="color: lab(from #5785a8 calc(l - 30) a b)">This text should be 30% darker than the background.</p>
<p style="color: lab(from #5785a8 l calc(a + 62.5) b)">This text should be magenta.</p>
</div>
<div style="background-color: #5785a8">
relative rgb serialized maximums: 255, 255, 255
<p style="color: rgb(from #5785a8 calc(r - 32) calc(g - 32) calc(b - 32))">This text should be 25% darker than the background and barely visible.</p>
</div>
<div style="background-color: #5785a8">
relative hsl serialized maximums: 360, 100, 100
<p style="color: hsl(from #5785a8 calc(h + 180) s l)">This text should be orange.</p>
<p style="color: hsl(from #5785a8 h calc(s + 40) l)">This text should be 40% more saturated than the background and barely visible.</p>
<p style="color: hsl(from #5785a8 h s calc(l - 15))">This text should be 15% darker than the background and barely visible.</p>
</div>
<div style="background-color: #5785a8">
relative hwb serialized maximums: 360, 100, 100
<p style="color: hwb(from #5785a8 calc(h + 180) w b)">This text should be orange.</p>
<p style="color: hwb(from #5785a8 h w calc(b + 15))">This text should be 15% darker than the background and barely visible.</p>
<p style="color: hwb(from #5785a8 h calc(w + 15) b)">This text should be 15% lighter than the background and barely visible.</p>
</div>
<div style="background-color: #5785a8">
relative color serialized maximums: 1, 1, 1
<p style="color: color(from #5785a8 srgb calc(r - 0.25) calc(g - 0.25) calc(b - 0.25))">This text should be 25% darker than the background.</p>
</div>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What type of issue is this?
Incorrect support data (example: BrowserX says "86" but support was added in "40")
What information was incorrect, unhelpful, or incomplete?
Browser compat data for relative
rgb()notes partial support in Chromium 119-121.There's also a similar qualifier for Chromium 119-124 for
hsl()andhwb(). There is not, however, a qualifier for any versions foroklch(),oklab(),lch(),lab()andcolor().In testing, I'm observing a similar issue in relative
oklch()in Chromium 121 (but not 122, 123, 124, 125, or Chrome 132). Thelparameter is serialized to a 0-100 range instead of 0-1 — kind of the opposite of the quoted message, but presumably stemming from the same code.What browsers does this problem apply to, if applicable?
Chromium (Chrome, Edge 79+, Opera, Samsung Internet)
What did you expect to see?
I assume that this means that at least some subset of relative
oklch(),oklab(),lch(),lab()andcolor()should have the same partial support qualifier as relativergb().Did you test this? If so, how?
Observed the result of
oklch(from #EDE6D1 calc(l - 0.3) c h)being significantly different than the base color in Chromium 122, 123, 124, and 125 (MacOS Arm64), but being essentially the same as the base color in Chromium 121.oklch(from #EDE6D1 calc(l - 30) c h)works.Can you link to any release notes, bugs, pull requests, or MDN pages related to this?
Couldn't find the relevant bug in the Chromium bug tracker, sorry. Can't figure out how to filter it.
Do you have anything more you want to share?
No response
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
MDN metadata
MDN page report details
css.types.color.oklchThe text was updated successfully, but these errors were encountered: