Open Bug 1824402 Opened 2 years ago Updated 2 years ago

Visually indicate when a color is not supported by the monitor it's displayed on

Categories

(DevTools :: Inspector: Rules, task)

Product:
DevTools
Component:
Inspector: Rules
Type:
task

Tracking

(Not tracked)

People

(Reporter: nchevobbe, Unassigned)

References

(Blocks 1 open bug)

Details

color 4 function (e.g. oklch) can represent colors that some monitors can't handle (rec2020, p3)
in such case, we should add some visual information (next) to the color swatch to indicate it to the user

We should be able to use color-gamut media query to check this https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-gamut

We might have a simple tooltip on hover indicating the fallback color that is used

We should also handle cases where the color can't be represented anywhere (e.g. oklch(42.67% 0.363 89.47))

You need to log in before you can comment on or make changes to this bug.