In this article learn how to grab the dominant colors from an image using react-palette.

When building an app, sometimes you’ll want to grab the dominant colors from an image to give your UIs some pizzazz. Using a nifty ReactJS component called react-palette let’s you do this easily!

import Palette from 'react-palette' <Palette image={IMAGE_URL}> {(palette) => ( <div style={{color: palette.vibrant}}> Text with vibrant color </div> )} </Palette> 

🐊 Alligator.io recommends ⤵

Fullstack Advanced React & GraphQL by Wes Bos

The color with the most luminance (see note below) can be accessed with palette.vibrant. In this case, it’s the yellow color in the Alligator logo. In addition to vibrant, react-palette gives you a few more color swatches:

"Luminance" is the perceived brightness of a color. Some colors will reflect more light back to the human eye, and other colors will soak up the light more. For example, blue is generally considered to have the lowest luminance, while yellow has the highest luminance (workwithcolor.com)

Using react-palette gives you interesting colors to give your UIs some personality. Add a subtle background-color, or include some colored text to complement a photo. There’s a lot of interesting things you can do with react-palette!

📦 You can download react-palette on npm!