← home ← blog

Hello Speculo - easy colour palette visualisation

24 July 2016


Speculo is an easy way to visualise colour palettes. Every time you change a palette colour, it updates a set of commonly used website layouts. This allows you to visualise your colour palette in a variety of design scenarios.


Thinking behind Speculo

I tend to lean more over to the developer end of the spectrum and attempt to do my own designs at any given opportunity (mostly on side projects). However, I feel like this leads me to feel more comfortable designing in the browser, as this gives me a sense of a more realistic environment (ie. it’s going to be viewed in a browser, so lets design it in one).


CSS isn’t the most visual tool, so I wanted to create something that would use real HTML and CSS, but would alleviate my responsibility to tediously write lines and lines of CSS to achieve relatively simple layouts, etc…

So I made Speculo.

I created, what I think (amongst others), are 6 of the more common website layouts I see whilst browsing around the web. Ranging from more popular layouts, to less so. I then wanted to be able to change colours in a preset palette and see the effect of those changes immediately in a layout that I would potentially use in my end designs.

No silver bullet

Having low confidence in my own design ability as it is, I’m also going right ahead and picking faults with Speculo as I’m launching it…

👍 Ben.

Speculo’s drawbacks:

I would say that Jon Gold’s Rene was a big inspiration for creating this kind of design tool in the browser. His supports more of an immutable flow, whereas mine…does not. But his concept of seeing results immediately and in the browser and with very minimal layouts, was hugely conducive to pushing me towards what I wanted from Speculo.

The actual inspiration for Speculo was entirely selfish; I needed to create a colour palette for another side-project and I just didn’t want to open up Sketch.

Make Speculo Great Again™

Speculo’s source is fully open on GitHub so feel free to browse through. Contributing in any way, or suggesting ways to make Speculo better, would be greatly appreciated.

Best case, you open a Pull Request/Issue and we make Speculo better, or worst case, you learn something from the React/Redux structure.

Thanks for reading. Hit me up on Twitter with any comments, feedback, etc…

I'm available for hire

Hire me