color-loader

color-loader

A webpack loader that extracts the color palette for an image

Installation

color-loader has a peer dependency on file-loader.

npm install --save file-loader color-loader

Usage

Get a color palette comprised of the most dominant colors in your image:

import image, {color, colors} from 'color-loader!./path/to/image.jpg';

• image is the image path generated by the file loader
• color is the most dominant color in the image
• colors is an array of the dominant colors in the image

You can use it in your webpack configuration, too! This means that all images that you import or require will always return the colors extracted from the image.

{
  // ...your awesome webpack config options
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: 'color-loader'
      }
    ]
  }
}

Example

This image:

Will result in these colors:

• #3a4f25
• #b37a5d
• #78993b
• #839795
• #8c472f

You could use it in a React component like this:

import image, {color} from './example.png';

const Component = () => (
 <div style={{
   backgroundColor: color,
   backgroundImage: image
 }}>
   <h1>Hello world!</h1>
 </div>
);