Adaptive UIs with react-image-palette

9 October 2017

Formidable Icon

Brandon Dail

When you have an application driven by rich media, like images, it can be hard to develop a cohesive, universal color scheme. A lot of the time, applications end up defaulting to shades of black and white to avoid clashing with the rich colors in their content. If you have only a few static images, you can work around this by just manually picking the best colors, but when the images are dynamic, it’s almost impossible to know which colors look the best. You can process the image on a server and store the palette in your database, but that means more data to process, store, and send to the client.

That’s why we’re excited to announce react-image-palette, an easy way to dynamically parse vibrant and accessible color palettes directly in your React application. react-image-palette will process an image using the Canvas API and then generate a color palette based on the most dominant colors, right in the client. No server processing, no data to store, just provide a URL to the image and react-image-palette will take care of the parsing. The colors in the palette are also guaranteed to meet the WCAG contrast standards so you never have to worry about readability. Check out the demo application to see what it can do.

Related Posts


We're very excited about what we learned at React Conf and we wanted to share our take on React Hooks, a new React API that gives React functional com ...

Jani Eväkallio

Jani Eväkallio

Matt HinkMatt Hink

Victory is Turning 30

Victory is making the change to major versions with the release of victory@30.0.0! This is an unusual version bump, and a major milestone for the proj ...

Screenshot Testing with Chromatic

Is this bubble chart correct? Answering this question with unit tests requires breaking it down into several smaller questions: Is the method responsi ...