It’s awfully cool. I like seeing color palettes presented in the context of UI like that. Sometimes it’s hard to picture how it all might come together if colors are looked at too abstractly. It doesn’t exactly have an export tool, but a bunch of CSS custom properties are barfed out into a
style attribute on the
<body> if you were so inclined to use them for something.
Of course I thought: HSL is nicely used here, but what about the HDR color formats?! Seems like a good opportunity to set up P3 colors and non-P3 color fallbacks. I don’t think this fact is lost on Alexey, as they have lots more color experiments they have built. For example, this visualizer for looking at color models, which then it looks like got an upgrade to visualize more models (and gamuts).
I like looking at those things as they are a reminder of just how designed these color spaces are and how deep the rabbit hole can go. Before you know it, you’re designing extremely sophisticated accessible color palette generation tools.
Looking at these one-off single-purpose websites always puts me in the mood to share more. Aren’t you lucky that I save links to new ones that I see just for times like this.
Those little badge graphics that are super common at the top of GitHub repos, created with a super clean URL format.
Oh and hey they look great small but you can make them as big as you want and because they are SVG they scale up nicely.
Need a neat little animated toggle for Light Mode / Dark Mode? This site has a whole bunch of them:
Wasn’t much to pluck one over to a Pen, in case you need a reference there. I saw a little controversy on this as one of the usage options is as a
<div>, which of course is not an interactive element. I’m not sure that’s fair, as you might use this as a visual adornment next to an interactive button, for example. And the React exports use
I’m sorry I can’t explain it, but sometimes you have to update intended text to have a bunch of extra special ASCII characters that better represent a file tree.
In the rectangular world of web design, sometimes just what you need is something… not rectangular.
The site provides SVG, HTML, and CSS for you to copy out, which, I’m sure you’re aware, plunking over to CodePen to play with is a snap. Gosh, isn’t CodePen useful? You should go PRO.