Colorbook.me: A peek behind the scenes

The trendiest color palettes from Dribbble. An idea that turned into a successful platform launched on Product Hunt.

In this article, I’ll be telling the story of my recently released platform, The Colorbook, from concept to release. The basic concept of The Colorbook is to detect and collect daily color palettes from the most popular shots from Dribbble and curate them into an endless timeline.

The Idea

The idea sparked when I was ready to start a new side project and build the branding for it, so I turned to Dribbble for inspiration. After scrolling for hours and opening each individual shot to explore the color scheme, I was asking myself, ‘Why is this so time-consuming and tedious?’.

Definitely knew at that point that the design community needed some easier, simpler way to find color inspiration. Shortly after, The Colorbook was born.


The Challenge

Several challenges lied beneath my idea. There are already tonnes of color palette sites out there, how could I make it unique as possible? This thing needs to scale, there are hundreds of thousands of popular shots that were curated by Dribbble over the past few years, should I store all that data? It needs to be fast, designers hate waiting for things to load, especially when looking for inspiration (guess that goes for anyone).

Being unique

From my brief research, The Colorbook was the only platform that curated color palettes from Dribbble, that was surely a good start. Other than that, the design needed to stand out and be visually appealing; a minimal, neutral dark theme allowed all the bright palettes to stand out on the page.

Tech Stack

Technically speaking, The Colorbook runs on an Express server that provides data to the client, built with React. When a user visits the timeline, the server queries the Dribbble API for the popular shots of the specific day, picks out the top 5 prominent colors, and stores that data using lowdb. Same goes for the trending shots on the homepage of The Colorbook, except these shots are updated hourly. As a result, the Dribbble API rate limit can be respected by not querying it constantly, but consequently providing instant data when needed.

Curating colors

Since Dribbble likes to keep shot color palettes for themselves, and crawling their homepage isn’t really legal, an alternative was needed. As of today, the package get-image-colors is being used to detect colors for each shot. Whilst fairly quick, and compatible with most image types, its detection may suggest unexpected and inaccurate color results; most likely will be replaced with a custom implementation in the near future.


The Release

Once I was happy with how the platform looked and felt, I turned to Product Hunt for the release. Powered by an amazing community, the post received an insane amount of feedback, up-votes & traffic followed by a wild storm on Twitter which gave it that extra bump.

Since then, The Colorbook still has great exposure on Twitter and Product Hunt and has also been featured on the Invision blog and email. Overall, over 25,000+ unique users have been reached; way more than I ever expected!


Roadmap

What’s next for The Colorbook? Well, so far color copying has been released, enabling users to click & copy their favorite color straight to their clipboard. Adding to that, the interface has had a slight refresh, removing the white color border from individual colors to see how the palette feels as a group (a suggestion by a Colorbook user).

A new feature is in the works, that will allow users to download a single color group as an Adobe palette, making it importable for Photoshop. If all goes as expected, this should be implemented by the end of the month.

Thanks for reading!

I hope you enjoyed this article and hope you’ll find some joy in using The Colorbook. Hit me up with a follow on Twitter to stay tuned for updates and make sure you smash that 👏 button if you enjoyed this article!

Interested in contributing to The Colorbook development? It’s open-source! https://github.com/animify/colorbook