Fetch prominent colors from an image.


33701.5.0a month ago2 years agoMinified + gzip package size for react-native-image-colors in KB



Platform NPM Badge Publish size PRs Welcome

Fetch prominent colors from an image.

Example 1 Demo 1 Android Demo 1 iOS Demo 2 Android Demo 2 iOS

This module is a wrapper around the Palette class on Android, UIImageColors on iOS and node-vibrant for the web.


npm install react-native-image-colors
yarn add react-native-image-colors


Rebuild the app.


Install the pod, then rebuild the app.

npx pod-install

RN < 0.62: if you face a compilation error while building, your Xcode project likely does not support Swift which this package requires. You can fix this by creating a blank dummy swift file using Xcode.


This package works with Expo managed workflow apps. Set up expo-dev-client so you can use this package. The example project demonstrates this.


You're good to go!


import ImageColors from 'react-native-image-colors'

const uri = require('./cool.jpg')

const result = await ImageColors.getColors(uri, {
  fallback: '#228B22',
  cache: true,
  key: 'unique_key',

switch (result.platform) {
  case 'android':
    // android result properties
    const vibrantColor = result.vibrant
  case 'web':
    // web result properties
    const lightVibrantColor = result.lightVibrant
  case 'ios':
    // iOS result properties
    const primaryColor = result.primary
    throw new Error('Unexpected platform key')


ImageColors.getColors(uri: string, config?: Config): Promise<ImageColorsResult>


A string which can be:

  • URL:

  • Local file:

    const catImg = require('./images/cat.jpg')
  • Base64:

    const catImgBase64 = 'data:image/jpeg;base64,/9j/4Ri...'

    The mime type prefix for base64 is required (e.g. data:image/png;base64).


Property Description Type Required Default
fallback If a color property couldn't be retrieved, it will default to this hex color string (note: do not use shorthand hex. e.g. #fff). string No "#000000"
cache Enables in-memory caching of the result - skip downloading the same image next time. boolean No false
key Unique key to use for the cache entry. The image URI is used as the unique key by default. You should explicitly pass a key if you enable caching and you're using a base64 string as the URI. string No undefined
headers HTTP headers to be sent along with the GET request to download the image Record<string, string> No undefined
pixelSpacing (Android only) How many pixels to skip when iterating over image pixels. Higher means better performance (note: value cannot be lower than 1). number No 5
quality (iOS and web) Highest implies no downscaling and very good colors. 'lowest'
No "low"


Every result object contains a respective platform key to help narrow down the type.


Property Type
dominant string?
average string?
vibrant string?
darkVibrant string?
lightVibrant string?
darkMuted string?
lightMuted string?
muted string?
platform "android"


Property Type
dominant string?
vibrant string?
darkVibrant string?
lightVibrant string?
darkMuted string?
lightMuted string?
muted string?
platform "web"


Property Type
background string
primary string
secondary string
detail string
platform "ios"


  • There is an example react-native project.
  • Since the implementation of each platform is different you can get different color results for each.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from