Visualize Your Color Palettes Online with Speculo

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.

Speculo palette homepageSpeculo palette homepage

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.

Speculo save linkSpeculo save 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.

Using High Colour Contrast For More Accessible Design

.no-js #ref-block-post-24804 .ref-block__thumbnail { background-image: url(“×160/high-contrast-color-design.jpg”); }

Using High Colour Contrast For More Accessible Design

A high bounce rate is frequently caused by the poor visual accessibility of a website. When fonts are…Read more



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s