Replies: 2 comments
-
The problem is that in CSS we can detect only srgb/p3/rec2020. There is not way to get what colors supports exactly this monitor.
How did you check it? Web API allows you to set color in any gamut and then it will do gamut correction. It is hard to be sure that the color was really supported and not gamut corrected. |
Beta Was this translation helpful? Give feedback.
-
True, but saying that colors displayable on many HDR monitors are "Unavailable on any device" is incorrect. Even a monitor that supports only display-p3 color space can also support HDR and thus display colors which oklch.com claims are "Unavailable on any device". I'm talking about colors in this triangle:
These colors are still within the p3 gamut, they are just brighter. So detecting gamut is irrelevant here, what is needed is detecting peak brightness which is also unavailable.
I was displaying increasingly brighter white until it stopped changing. This was around (1.15, 1.15, 1.15). |
Beta Was this translation helpful? Give feedback.

Uh oh!
There was an error while loading. Please reload this page.
-
Colors with any color channel in display-p3 color space larger than 1.0 are assumed to be non-displayable and instead either "Rec2020 is unavailable on this monitor" or "Unavailable on any device" error is displayed. However, HDR displays are capable of displaying colors brighter than (1.0, 1.0, 1.0) or colors where only some channels are brighter than 1.0. Chrome doesn't display such colors using CSS but can display them on WebGPU canvas.
I've made a simplified version of oklch-picker using WebGPU which can display more colors.: https://kryptan.github.io/hdr.html
I've clamped all color channels to 1.15 because this is what my display seem to be capable of, I don't think there is a way to get an exact value using web APIs.
Black stripes on the left graphs delineate colors with any color channel > 1.0.
Tested on Chrome on Windows.
Beta Was this translation helpful? Give feedback.
All reactions