Chris’ Nook: Little Helpful Web sites

Chris’ Nook: Little Helpful Web sites
Chris’ Nook: Little Helpful Web sites


I got here throughout Alexey Ardov’s paintings the opposite day. Looks as if the colour malicious program hit him lovely laborious. I first noticed this playground:

It’s awfully cool. I love seeing colour palettes introduced within the context of UI like that. Every so often it’s laborious to image the way it all may come in combination if colours are checked out too abstractly. It doesn’t precisely have an export instrument, however a host of CSS customized homes are barfed out right into a taste characteristic at the <frame> when you have been so prone to make use of them for one thing.

In fact I believed: HSL is effectively used right here, however what in regards to the HDR colour codecs?! Turns out like a excellent alternative to arrange P3 colours and non-P3 colour fallbacks. I don’t assume this reality is misplaced on Alexey, as they’ve so much extra colour experiments they’ve constructed. As an example, this visualizer for having a look at colour fashions, which then it seems like were given an improve to visualise extra fashions (and gamuts).

I love having a look at the ones issues as they’re a reminder of simply how designed those colour areas are and the way deep the rabbit hollow can cross. Ahead of you realize it, you’re designing extraordinarily refined obtainable colour palette era gear.

Taking a look at those one-off single-purpose web sites all the time places me within the temper to percentage extra. Aren’t you fortunate that I save hyperlinks to new ones that I see only for occasions like this.


Temani Afif’s trend web site has some lovely refined backgrounds which are finished simply with CSS backgrounds. Strikes a chord in my memory of Lea’s take in this from years in the past. A grand custom of CSS wizards.

Really easy to paste on right into a Pen.


The ones little badge graphics which are tremendous not unusual on the best of GitHub repos, created with a perfect blank URL layout.

Oh and good day they appear nice small however you’ll cause them to as giant as you need and since they’re SVG they scale up effectively.

Theme Toggles

Want a neat little animated toggle for Mild Mode / Darkish Mode? This web site has an entire bunch of them:

Wasn’t a lot to pluck one over to a Pen, in case you wish to have a reference there. I noticed a bit of controversy in this as one of the vital utilization choices is as a <div>, which after all isn’t an interactive component. I’m now not positive that’s truthful, as you may use this as a visible adornment subsequent to an interactive button, as an example. And the React exports use <button> effectively.


I’m sorry I will’t give an explanation for it, however every now and then it’s important to replace meant textual content to have a host of additional particular ASCII characters that higher constitute a document tree.

Customized Form Dividers

Within the oblong international of internet design, every now and then simply what you wish to have is one thing… now not oblong.

The web site supplies SVG, HTML, and CSS so that you can replica out, which, I’m positive you’re conscious, plunking over to CodePen to play with is a snap. Gosh, isn’t CodePen helpful? You must cross PRO.


0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments
Back To Top
Would love your thoughts, please comment.x