Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Platform TypeScript NPM Badge 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 and UIImageColors on iOS.


$ 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 either a) Creating a blank dummy swift file using Xcode or b) Following steps 1,2,3 here.


Start by importing the module

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

🎨 Fetch colors

const colors = await ImageColors.getColors(URI, config)


Can be a URL or a local asset.


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"
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 only) Highest implies no downscaling and very good colors, but it is very slow. See UIImageColors 'lowest'
No "low"

Result (android)

On android, you will get an object with the following color properties, plus a platform key to help you figure out that this is the android result type.

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

Result (iOS)

On iOS, you get the following color properties object, plus the respective platform key.

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


const coolImage = require("./cool.jpg")

const colors = await ImageColors.getColors(coolImage, {
  fallback: "#228B22",

if (colors.platform === "android") {
  // Access android properties
  // e.g.
  const averageColor = colors.average
} else {
  // Access iOS properties
  // e.g.
  const backgroundColor = colors.background


  • There is an example react-native project.
You can’t perform that action at this time.