Visualize Your Color Palettes Online with Speculo

By Jake Rocheleau. in Toolkit. Updated on June 7, 2017.

The typical mockup design process can feel like a chore. You have to flip between Photoshop (or Sketch) to change colors, typefaces, styles, and compare them all to see what you like best.

If you go with a tool like Speculo you’ll be able to study & compare color palettes dynamically, right in your browser.

This app is totally free and runs in all major browsers from Chrome to Edge. It demos six different types of landing pages, designed as wireframes.

By default, they use simple color schemes that mimic Bootstrap’s style. You can change any of these colors with ease and they’ll automatically update on the page.

You can also change the typefaces to see how they look in each design. It’d be cool if you could add your own but the site only supports 7 different fonts:

Arvo
Lato
Open Sans
Roboto
Montserrat
Helvetica Neue
BLOKKNeue

The landing page wireframes aren’t very detailed, so this app may not help during later stages in the design process.

However, designers who just want to capture quick ideas will immediately fall in love with this web app. It lets you change any colors with HEX codes you can even export with a custom sharing link.

If you hover any of the wireframes you can click to zoom in and get a closer look. It’ll automatically zoom for a fullscreen view, so you can see the fonts & colors up close.

Again, I really don’t think these templates are detailed enough to help with projects in the later stages of development. But, if you’re strapped for ideas and just looking to play with colors Speculo is an incredible tool.

You can browse through the source code on GitHub to see how it’s made. If you have ideas or suggestions for Speculo feel free to share with the site’s creator, Ben Howdle.