The current state of CSS color
As I write this book in 2022, here is the briefest summary this author can manage of the state of CSS color:
- All monitors and browsers can display sRGB colors, and there are various syntaxes to describe them in CSS; hex (for example,
#000),rgb(0,0,0),hsl(0 0% 0%). - There are also colors that many modern monitors can display but not all browsers currently support. This category of colors is typically dealt with in CSS with the
color()function to pass a custom color space (typicallydisplay-P3) to CSS, or using LCH/Lab. - Finally, there is a category of colors that humans can see, yet few (if any?) monitors can display. CSS can now also describe such colors with LCH/Lab.
- Right now, in 2022, only the Safari browser supports
lch(),lab(),color().
Introductory note
As we work through all these formats, be aware that there is no real “best” color format. They are all useful for certain applications...