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.
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.