Uniform gradient tools

Summary

While creating Paylocity's new UI color system, I learned that generating gradients has very different results depending on which color space you use for interpolation. Wanting to explore this further, I built a couple of tools that let me visually explore gradient generation across various color spaces.

The result is a Next.js web app powered by chroma-js for color transformations. After completing the web version, I created a companion Figma plugin so designers could access these same tools directly within their design environment.

The concept

At their core, both the web app and Figma plugin are just intuitive interfaces for chroma-js's color manipulation capabilities. Users can interpolate between multiple color stops across various color spaces, extract specific colors from the resulting gradient, and fine-tune the output with controls for lightness balancing, gamma shifting, and gradient trimming.

I prioritized real-time feedback, making sure the gradient preview updates instantly as users add, remove, or reorder colors.

Bonus features

I had a lot of fun implementing features that aren't core but add usability and fun to the experience.

Drag and drop to reorder

Implementing drag-and-drop with dnd-kit was tricky, but the effort was worthwhile because it improves the usability and honestly just feels really slick.

Preset color library

Starting with a blank slate can be hard, so I added colors from Sanzo Wada's Dictionary of Colour Combinations. Curated colors give users a good starting point when they're not sure where to start.

Fun color names

I hooked up the color-names API to give each color a unique, sometimes silly name. It adds an element of surprise and makes the colors more memorable. This was also my first time working with an external API, so I had to learn how to properly space out requests to avoid overloading it.

Exporting the results

I wanted to make sure people could easily use their gradients elsewhere, so I added ways to export as SVG or JSON. This makes it simple to use the gradients in code or paste them right into Figma. In the Figma pluging, of course you can insert your gradients or color stops right into the canvas.

Magnet feature to extract colors from the Figma canvas

For the Figma plugin, I made a "magnet" button that grabs colors from anything you've selected on your canvas. You can quickly turn your existing design colors into a gradient and put it back into your work.

Conclusion

Building these tools taught me a lot about color theory while sharpening my React and TypeScript skills. Looking ahead, I might add more color spaces and improve how the tool shows the color blending process. This project has been both a great learning experience and a handy addition to my design toolkit.