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.