JSI Color

React native library that provides functions for colors, such as distance using the CIEDE2000 algorithm and getting the color of a pixel in an image.

Installation

yarn add react-native-jsi-color
npx pod-install

Example

An example app using the library and showing its usage can be found in the example folder.

Usage

Everything is implemented in TypeScript and extensive documentation can be found in the comments.

Getting the color of a pixel

If you need to get the color of a pixel in an image, you can use the getPixelColor function. It takes the filepath to the image as the first parameter and the coordinates of the pixel as the second parameter and third paramter. It returns the color in "rgb(r, g, b)" format.

Make sure that the image is does not contain file:// before its path. If it does, the function will not be able to find the image, leading to unpredictable behavior.

Also, if you are trying to implement functionality that if a user taps on an image (with gesture handler) and it shows the pixel color, you need to watch out for the resizeMode, since the image might be cropped.

Optionally, you can pass the image view dimensions and the actual image dimensions. Then, the function will return the color of the pixel in the image, taking these into account.

import { getPixelColor } from 'react-native-jsi-color';

const color = getPixelColor('/path/to/image', x, y);
console.log(color);

Getting the distance between two colors

This functionality is implemented by the computeColorDistance function. It takes two colors as parameters and returns the distance between them. The colors are required to be in the format "rgb(r, g, b)". The distance is returned as a number. The CIEDE2000 algorithm is used to compute the distance.

import { computeColorDistance } from 'react-native-jsi-color';

const distance = computeColorDistance('rgb(255, 0, 0)', 'rgb(0, 0, 255)');
console.log(distance);

Getting the color name of an rgb

If you need to get the color name of an rgb, you can use the getClosestColorName function. It takes the color in "rgb(r, g, b)" format and returns the color name of the closest color (formally, the color with the smallest distance, using computeColorDistance, to the given color).

By default, the function will look through all named HTML colors and return the closest color. However, you are also able to pass a list of your own colors as an optional parameter. This is useful if you have predefined colors that you want to use. These should be passed as an array of objects containing the name and the color in "rgb(r, g, b)" format.

Optionally, you can also set the onlyClosest option to false, which will make the function return a list of all colors, sorted by their distance to the given color.

import { getClosestColorName } from 'react-native-jsi-color';

const colorName = getClosestColorName('rgb(255, 0, 0)', {
  onlyClosest: false,
  colors: [
    {
      name: 'red',
      color: 'rgb(255, 0, 0)',
    },
    {
      name: 'green',
      color: 'rgb(0, 255, 0)',
    },
    {
      name: 'blue',
      color: 'rgb(0, 0, 255)',
    },
  ],
});
console.log(colorName);

License

MIT