I’m very excited
about the new color features
starting to roll out in CSS –
and similarly excited to make them available
(with some extra tooling)
in Sass as well.
This will allow us to:
- Define colors in new color spaces like
oklch & display-p3
- Convert colors between spaces
- Mix & manipulate colors in any space
- Gamut-map colors for a target space as needed
I hope to write more about color spaces here
at some point,
but for now
check out the request for comments,
or dive straight into the full proposal.
If you want to learn more about color spaces in CSS,
Bramus Van Damme has a great collection of resources,
Chris Lilley & Lea Verou released the handy Color.js library,
and all of this is based on
CSS Color Level 4 and Level 5.
Safari is the farthest along
in terms of browser support for the new color spaces,
but this is all part of
Interop 2022 –
which means every browser is
trying to get it done this year.
I recommend installing the latest
Safari Technology Preview
and playing around with it!
I put a lot of work into this proposal,
and I’m excited to get feedback.
Along the way,
I also went down a few rabbit holes.
If you’re interested,
check out
The Gray Areas of HWB Color,
or my Codepen experiments
with Sass color inversion
and interpolation of missing channels.
