Sass Colour Function Calculator

Designing in the browser has come a long way in recent years - many of our more process-driven recent projects have gone straight from wireframes to building a front-end.

However, we still find in many projects that high-fidelity mockups from an application like Photoshop still have a very valuable part to play. In fact, we’ve been seeing a resurgence of them recently as we’ve taken on jobs for several Creative Agencies to help bring technical firepower to their biggest ideas.

One common problem we come across when creating a front-end from a high-fidelity, highly specific mockup is that, when we’re establishing colour variables in Sass we’re often declaring colours exactly as they appear in the mockup, where in reality many colours are shades or derivations of a base colour.

We’ve found tools like Sass Me to be really useful in these instances but we couldn’t find a tool that would take two colours and give you back a SASS colour transform telling you how to get from one to the other. So we decided to build one.

Introducing the Sass Colour Transform Calculator.

Please feel free to share this tool—and we’d love to know what you think, too.