Dynamic theme via OKLCH
You can change the theme on this site by clicking the eye dropper icon in the navigation menu.
I am using a web component when the browser supports the OKLCH color format to change a CSS custom property representing the hue value. The hue in OKLCH is a value between 0 and 360.
The basic idea can be seen in this demo:
The actual web component code can be seen here on github.
Thehsl()color model is not reliable for manipulating and creating color palettes because it can lead to accessibility issues.oklch()offers the same intuitive approach as HSL, but provides much more consistency in its output.