I recently stumbled upon the work of Alexey Ardov, and I have to say, the color bug has hit him pretty hard. One of the projects that caught my eye was his color playground.
It’s incredibly cool to see color palettes presented within a UI framework like that. Sometimes, it’s challenging to imagine how colors might come together when viewed abstractly. Even though there isn’t an export tool, a plethora of CSS custom properties are generated and can be utilized by inserting them into a style
attribute within the <body>
element.
As I explored further, I noticed Alexey’s proficiency in using HSL, and I wondered about incorporating HDR color formats. It’s a great opportunity to introduce P3 colors along with non-P3 color fallbacks. It’s evident that Alexey is well aware of this, considering the multitude of color experiments they have developed. For instance, take a look at this visualizer to explore color models, which has now evolved into a more advanced tool for visualizing various models and gamuts.
These projects serve as a reminder of the intricacies of color spaces and how deep the rabbit hole of design can go. It’s fascinating to witness the development of sophisticated accessible color palette generation tools.
After exploring these unique single-purpose websites, I’m inspired to share more hidden gems I’ve discovered recently.
CSS-Pattern
Temani Afif’s pattern site showcases intricate backgrounds created solely with CSS background techniques. This project reminds me of Lea Verou’s work from years ago, continuing the tradition of CSS wizardry.
SpaceBadgers
Explore the world of GitHub repos through unique badge graphics created with a clean URL format.
These SVG graphics look fantastic in a compact size but can also be scaled up as large as you need due to their scalability.
Theme Toggles
Looking for an animated toggle switch for Light Mode / Dark Mode? This site offers a variety of options to choose from.
There wasn’t much effort needed to transfer one to a CodePen, in case you need a reference. While there has been some controversy regarding their use as a <div>
element, remember that they can serve as visual enhancements alongside interactive elements, such as buttons.
Tree
While it’s challenging to explain, there are times when text representation needs additional special characters to better depict a file tree structure.
Custom Shape Dividers
In the world of web design, where rectangles dominate, sometimes you need something unconventional.
The site offers SVG, HTML, and CSS snippets for you to experiment with, and transferring them to CodePen for further customization is a breeze. CodePen proves to be an invaluable resource, so why not consider upgrading to CodePen PRO for enhanced features?