The new color features in CSS allow for a much wider range of colors,
many of which cannot be shown on many (or any) screens. When selecting
colors, consider that most users will see these colors on a display that
supports the sRGB
or P3
gamut.
There are two primary ways a color can be out of gamut:
- Choosing a color in a space with a wider gamut, especially when a
channel is near one of the edges of its range.
- Specifying a channel value that is outside its range. While the
sliders in this tool set hard boundaries, values outside these
boundaries are still valid, and can be entered in the text input.
When a color is out of gamut for the user's screen, the browser will
adjust the color to be in gamut.