As I was designing UI for a recent project a realized that color is a subtle but powerful tool in providing a sense of depth and layering for human eyes. It's arguably even more important in today's trends of flat designs which has much less shadows, gloss, bevel and other 3d effects that were common 10-15 years ago.
In a nutshell, warmer colors for foreground content and cooler for background goes a long way in adding depth. Even when working with the same base hue. The fundamental reason this works is precisely sky/sun interaction, which is fascinating.
I used chroma.js with oklab as color space (importantly: it's perceptual). Working with HSV or RGB directly is very difficult in comparison.
In this case, I was trying to keep the actual code as “flat” as possible, while offering exactly that pleasing sense of depth for the UI. For the latter, it could probably be better utilised in the VSCode extension but I hope at least the colours offer a good basis to work off of.
Imho OKLab should be the defacto standard for designing with colour, I’m a big fan. Using the colour space based on the display technology never really made sense in this context as we are designing for humans and the display is merely a constraint.
> Imho OKLab should be the defacto standard for designing with colour
Agreed. It's a little challenging to make color picking UIs and programmatic interfaces I guess. Before seeing oklab in action, I never knew just how distorted a typical HSV picker is, it doesn't map to our vision at all.
In a nutshell, warmer colors for foreground content and cooler for background goes a long way in adding depth. Even when working with the same base hue. The fundamental reason this works is precisely sky/sun interaction, which is fascinating.
I used chroma.js with oklab as color space (importantly: it's perceptual). Working with HSV or RGB directly is very difficult in comparison.