Generative colors with CSS

I just updated the CSS for my website to use a fork of Kelp UI, which includes a much more consistent and easy-to-maintain class system than I had before. Quick aside: if you see any bugs in your travels, please let me know! While it mostly looks the same as before, the biggest change was to the color palette. I’m now taking advantage of relative colors with the oklch() CSS function to dynamically generate all of the colors used on this site from just six hex codes defined as CSS variables. Let’s look at how it all works! The oklch() CSS function The oklch() CSS function lets you create a color by defining its… Lightness - the perceived brightness. Chroma - the vibrancy or saturation of the color. Hue - a number representing the color. For example, the blue I use for this website, #007ab8, is represented in OKLCH as oklch(55.48% 0.131 241.70). What makes the oklch() function so cool is that once you have a colors L, C, and H values, you can tweak the lightness and chroma slightly to…