Polychroma

When defining a standard two-colour gradient, browsers interpolate using RGB, which can go through kind of greyish colours. Lab interpolation produces better, more even results.

Other interpolation modes (HSL and Lch for now, working on adding more) are included as options for experimentation — the results can be overly-saturated.

The idea for Polychroma started after discovering Bugsnag’s chromatic-sass project. I loved the idea of a more natural-looking gradient, but I wanted a way to visualise the results without needing to update my dev stack.

I looked into the library that powered it — the amazing chroma.js — and after tumbling down a rabbit hole of colour science and data visualisation, ended up with this simple little tool. Use it to grab a quick CSS snippet, or plug the resulting colour values into Figma, Sketch, or your image editor of choice to use in mockups.

Polychroma is built with Nuxt.js — a Vue.js framework — and chroma.js by Gregor Aisch.

It uses Tailwind CSS for most of the styling, with a few tweaks and custom styles.

The text is set in Inter, specifically the 400, 600, and 700 weights.

Comments & suggestions are very welcome! You can leave a message on Twitter or file an issue on GitHub.