Generate a WCAG compliant color theme from any image.



A React adpater for image-palette-core


npm install --save react-image-palette


The main export of the package is the ImagePalette component, which uses a render callback to provide the color palette after the image is parsed.

import ImagePalette from 'react-image-palette'

const SomeComponent = ({ image }) => (
  <ImagePalette image={image}>
    {({ backgroundColor, color, alternativeColor }) => (
      <div style={{ backgroundColor, color }}>
        This div has been themed based on
        <span style={{ color: alternativeColor }}>{image}</span>



See the image-palette-core documentation


imageString!The URL for the image to parse.
crossOriginBooleanSets the crossOrigin property on the Image instance that loads the source image 1
renderPalette => ReactElementIf you prefer to use a render prop over a function child, go for it! react-image-palette supports both.
defaultsPaletteA default palette to render if a palette cannot be parsed. This would typically occur when the source image fails to load

1 ⚠️ Keep in mind that the image will be loaded into a canvas and parsed as data, so you should only use images from trusted origins.

Work With Us

We partner with our clients to build all manner of digital products. Wherever you are in your product lifecycle, from concept to launch, our team of design and engineering experts will ensure you meet your web or mobile app's goals.