When defining a standard two-colour gradient, browsers
RGB, which can go through kind of greyish
Lab interpolation produces better, more
Other interpolation modes (
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.