Skip to content
Reanimated Color Picker

colorKit is a collection of color tools that are utilized internally within the ColorPicker.

Supported Colors

RGB

  • "rgb(255, 0, 255)"
  • "rgb(255 0 255)"
  • "rgba(255, 0, 255, 1.0)"
  • "rgb(255, 0, 255, 1.0)"
  • "rgba(255 0 255 / 1.0)"
  • "rgb(255 0 255 / 1.0)"
  • {r: number, g: number, b: number, a: number}
  • {r: number, g: number, b: number}

HEX

  • "#f0f" (#rgb)
  • "#ff00ff" (#rrggbb)
  • "#f0ff" (#rgba)
  • "#ff00ff00" (#rrggbbaa)

HSL

  • "hsl(360, 100%, 100%)"
  • "hsl(360deg, 100%, 100%)"
  • "hsl(360 100% 100%)"
  • "hsl(360deg 100% 100%)"
  • "hsla(360, 100%, 100%, 1.0)"
  • "hsl(360, 100%, 100%, 1.0)"
  • "hsla(360deg, 100%, 100%, 1.0)"
  • "hsl(360deg, 100%, 100%, 1.0)"
  • "hsla(360 100% 100% / 1.0)"
  • "hsl(360 100% 100% / 1.0)"
  • "hsla(360deg 100% 100% / 1.0)"
  • "hsl(360deg 100% 100% / 1.0)"
  • {h: number, s: number, l: number}
  • {h: number, s: number, l: number, a: number}

HSV

  • "hsv(360, 100%, 100%)"
  • "hsv(360deg, 100%, 100%)"
  • "hsv(360 100% 100%)"
  • "hsv(360deg 100% 100%)"
  • "hsva(360, 100%, 100%, 1.0)"
  • "hsv(360, 100%, 100%, 1.0)"
  • "hsva(360deg, 100%, 100%, 1.0)"
  • "hsv(360deg, 100%, 100%, 1.0)"
  • "hsva(360 100% 100% / 1.0)"
  • "hsv(360 100% 100% / 1.0)"
  • "hsva(360deg 100% 100% / 1.0)"
  • "hsv(360deg 100% 100% / 1.0)"
  • {h: number, s: number, v: number}
  • {h: number, s: number, v: number, a: number}

HWB

  • "hwb(360, 100%, 100%)"
  • "hwb(360deg, 100%, 100%)"
  • "hwb(360 100% 100%)"
  • "hwb(360deg 100% 100%)"
  • "hwba(360, 100%, 100%, 1.0)"
  • "hwb(360, 100%, 100%, 1.0)"
  • "hwba(360deg, 100%, 100%, 1.0)"
  • "hwb(360deg, 100%, 100%, 1.0)"
  • "hwba(360 100% 100% / 1.0)"
  • "hwb(360 100% 100% / 1.0)"
  • "hwba(360deg 100% 100% / 1.0)"
  • "hwb(360deg 100% 100% / 1.0)"
  • {h: number, w: number, b: number}
  • {h: number, w: number, b: number, a: number}

Color ints

  • 0xff00ffff (0xrrggbbaa)

Color keywords

Named colors implementation follows the CSS3/SVG specification.

  • aliceblue (#f0f8ff)
  • antiquewhite (#faebd7)
  • aqua (#00ffff)
  • aquamarine (#7fffd4)
  • azure (#f0ffff)
  • and more …
HOW TO RUN ON THE UI THREAD

To execute any of the colorKit methods, you can use runOnUI. For example:

function workletFunction() {
  "worklet";
  const rgb = colorKit.runOnUI().RGB("#f0ff").object();
}

Color Conversion

RGB

Convert any of the supported color formats into the RGB format.

Syntax

colorKit.RGB(color: SupportedColorFormats).string(forceRGBA = false): string;
colorKit.RGB(color: SupportedColorFormats).array(roundValues = true): number[];
colorKit.RGB(color: SupportedColorFormats).object(roundValues = true): { r: number; g: number; b: number; a: number };

Example

import { colorKit } from "reanimated-color-picker";


colorKit.RGB("hsl(360, 100%, 100%)").string(); // rgb(255, 255, 255)
colorKit.RGB("hsl(360, 100%, 100%)").string(true); // rgba(255, 255, 255, 1) force rbga
colorKit.RGB("#f0ff").object(); // { r: 255, g: 0, b: 255, a: 1 }
colorKit.RGB({ h: 360, s: 100, v: 50 }).array(); // [128, 0, 0, 1]

HEX

Convert any of the supported color formats into the HEX format.

Syntax

colorKit.HEX(color: SupportedColorFormats, forceAlpha?: boolean): string;

Example

import { colorKit } from "reanimated-color-picker";


colorKit.HEX("red"); //  #ff0000
colorKit.HEX("hsv(360, 10%, 100%)"); // #ffe6e6
colorKit.HEX("rgba(25, 255, 255, 1)"); // #19ffff
colorKit.HEX({ h: 360, s: 100, l: 50 }); // #ff0000

HSL

Convert any of the supported color formats into the HSL format.

Syntax

colorKit.HSL(color: SupportedColorFormats).string(forceHSLA = false): string;
colorKit.HSL(color: SupportedColorFormats).array(roundValues = true): number[];
colorKit.HSL(color: SupportedColorFormats).object(roundValues = true): { h: number; s: number; l: number; a: number };

Example

import { colorKit } from "reanimated-color-picker";


colorKit.HSL("orange").string(); // hsl(39, 100%, 50%)
colorKit.HSL("#503e7a").string(true); // hsla(258, 33%, 36%, 1)
colorKit.HSL("rgb(114, 99, 29)").object(); // { h: 49, s: 59, l: 28, a: 1 }
colorKit.HSL({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 28, 22, 1]

HSV

Convert any of the supported color formats into the HSV format.

Syntax

colorKit.HSV(color: SupportedColorFormats).string(forceHSVA = false): string;
colorKit.HSV(color: SupportedColorFormats).array(roundValues = true): number[];
colorKit.HSV(color: SupportedColorFormats).object(roundValues = true): { h: number; s: number; v: number; a: number };

Example

import { colorKit } from "reanimated-color-picker";


colorKit.HSV("orange").string(true); // hsva(258, 49%, 48%, 1)
colorKit.HSV("#503e7a").string(); // hsv(258, 49%, 48%)
colorKit.HSV("rgb(114, 99, 29)").object(); // { h: 49, s: 75, l: 45, a: 1 }
colorKit.HSV({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 44, 28, 1]

HWB

Convert any of the supported color formats into the HWB format.

Syntax

colorKit.HWB(color: SupportedColorFormats).string(forceHWBA = false): string;
colorKit.HWB(color: SupportedColorFormats).array(roundValues = true): number[];
colorKit.HWB(color: SupportedColorFormats).object(roundValues = true): { h: number; w: number; b: number; a: number };

Example

import { colorKit } from "reanimated-color-picker";


colorKit.HWB("orange").string(); // hwb(39, 0%, 0%)
colorKit.HWB("#503e7a").string(true); // hwba(258, 24%, 52%, 1)
colorKit.HWB("rgb(114, 99, 29)").object(); // { h: 49, w: 12, l: 55, a: 1 }
colorKit.HWB({ a: 1, h: 336, s: 44, v: 28 }).array(); // [336, 16, 72, 1]

Color Information

getFormat

Identify the color format of a given string or object, and return null for invalid colors.

colorKit.getFormat("orange"); // named


colorKit.getFormat("rgb(211, 168, 151)"); // rgb
colorKit.getFormat("rgba(211, 168, 151, 1)"); // rgba
colorKit.getFormat({ r: 211, g: 168, b: 151 }); // rgb
colorKit.getFormat({ r: 211, g: 168, b: 151, a: 1 }); // rgba


colorKit.getFormat("hsl(224, 77%, 28%)"); // hsl
colorKit.getFormat("hsla(224, 77%, 28%, 1)"); // hsla
colorKit.getFormat({ h: 224, s: 77, l: 28 }); // hsl
colorKit.getFormat({ h: 224, s: 77, l: 28, a: 1 }); // hsla


colorKit.getFormat("hsva(289, 99%, 40%, 1)"); // hsv
colorKit.getFormat("hsv(289, 99%, 40%)"); // hsva
colorKit.getFormat({ h: 289, s: 99, v: 40 }); // hsv
colorKit.getFormat({ h: 289, s: 99, v: 40, a: 1 }); // hsva


colorKit.getFormat("hwba(289, 99%, 40%, 1)"); // hwb
colorKit.getFormat("hwb(289, 99%, 40%)"); // hwba
colorKit.getFormat({ h: 289, w: 99, b: 40 }); // hwb
colorKit.getFormat({ h: 289, w: 99, b: 40, a: 1 }); // hwba


colorKit.getFormat("#fff"); // hex3
colorKit.getFormat("#ffff"); // hex4
colorKit.getFormat("#ffffffff"); // hex8


colorKit.getFormat("rgb(211, 168, 151, 1)"); // null (should be "rgba(211, 168, 151, 1)")

getRed

Get the red channel value of a given color.

colorKit.getRed("red"); // 255

getGreen

Get the green channel value of a given color.

colorKit.getGreen("rgb(0, 200, 0)"); // 200

getBlue

Get the blue channel value of a given color.

colorKit.getBlue("hsl(200, 60%, 50%)"); // 204

getHue

Get the hue channel value of a given color.

colorKit.getHue("#87c270"); // 103

getLuminance

Get color’s HSL luminosity channel value.

If you want the overall luminosity of a color use getLuminanceWCAG method.

colorKit.getLuminance({ r: 67, g: 59, b: 79, a: 1 }); // 27

getBrightness

Get the HSV’s value (brightness) channel value of a given color.

colorKit.getBrightness({ h: 127, s: 36, l: 8, a: 1 }); // 11

getAlpha

Get the alpha channel value of a given color.

colorKit.getAlpha("#d2c765c7"); // 0.78

getLuminanceWCAG

Returns the perceived luminance of the given color, from 0-1 as defined by Web Content Accessibility Guidelines (Version 2.0).

colorKit.getLuminanceWCAG("rgba(176, 7, 120, 1)"); // 0.10738130030129947

areColorsEqual

Check if two colors are similar within a specified tolerance.

const tolerance = 0;
const isEqual = colorKit.areColorsEqual("#F00", "red", tolerance); // true

contrastRatio

Calculates the contrast ratio between two colors, useful for ensuring accessibility and readability.

colorKit.contrastRatio("yellow", "rgba(40, 38, 43, 1)"); // 13.95

isDark

Returns a boolean indicating whether the color is considered “dark” or not.

colorKit.isDark("hsla(224, 77%, 28%, 1)"); // true

isLight

Returns a boolean indicating whether the color is considered “light” or not.

colorKit.isLight("hsla(224, 77%, 28%, 1)"); // false

Color Manipulation

setRed

Set the red value of a color to a specific amount.

colorKit.setRed("#a5a2a1", 150).hex(); // #c8a2a1
colorKit.setRed("#a5a2a1", 200).rgb().string(); // rgb(200, 162, 161)
colorKit.setRed("#a5a2a1", 200).rgb().object(); // { r: 200, g: 162, b: 161, a: 1 }
colorKit.setRed("#a5a2a1", 200).rgb().array(); // [200, 162, 161, 1]
colorKit.setRed("#a5a2a1", 200).hsl().string(); // hsl(2, 26%, 71%)
colorKit.setRed("#a5a2a1", 200).hsl().object(); // { h: 2, s: 26, l: 71, a: 1 }
colorKit.setRed("#a5a2a1", 200).hsl().array(); // [2, 26, 71, 1]
colorKit.setRed("#a5a2a1", 200).hsv().string(); // hsv(2, 20%, 78%)
colorKit.setRed("#a5a2a1", 200).hsv().object(); // { h: 2, s: 20, l: 78, a: 1 }
colorKit.setRed("#a5a2a1", 200).hsv().array(); // [2, 20, 78, 1]

increaseRed

Increase the red value of a color by the given percentage/amount.

colorKit.increaseRed("#bb661b", 50).hex(); // #ed661b
colorKit.increaseRed("#bb661b", "50%").hex(); // #ff661b

decreaseRed

Decrease the red value of a color by the given percentage/amount.

colorKit.decreaseRed("#bb661b", 50).hex(); // #89661b
colorKit.decreaseRed("#bb661b", "50%").hex(); // #5e661b

setGreen

Set the green value of a color to a specific amount.

colorKit.setGreen("#d7e2d0", 50).hex(); // #d732d0

increaseGreen

Increase the green value of a color by the given percentage/amount.

colorKit.increaseGreen("#d7e2d0", 50).hex(); // #d7ffd0
colorKit.increaseGreen("#d7e2d0", "10%").hex(); // #d7f9d0

decreaseGreen

Decrease the green value of a color by the given percentage/amount.

colorKit.decreaseGreen("#d7e2d0", 50).hex(); // #d7b0d0
colorKit.decreaseGreen("#d7e2d0", "10%").hex(); // #d7cbd0

setBlue

Set the blue value of a color to a specific amount.

colorKit.setBlue("#5d8e92", 50).hex(); // #5d3292

increaseBlue

Increase the blue value of a color by the given percentage/amount.

colorKit.increaseBlue("#5d8e92", 50).hex(); // #5d8ec4
colorKit.increaseBlue("#5d8e92", "50%").hex(); // #5d8edb

decreaseBlue

Decrease the blue value of a color by the given percentage/amount.

colorKit.decreaseBlue("#5d8e92", 50).hex(); // #5d8e60
colorKit.decreaseBlue("#5d8e92", "50%").hex(); // #5d8e49

setHue

Set the hue value of a color to a specific amount.

colorKit.setHue("#2c1a51", 50).hex(); // #51481a

increaseHue

Increase the Hue value of a color by the given percentage/amount.

colorKit.increaseHue("#2c1a51", 50).hex(); // #511a48
colorKit.increaseHue("#2c1a51", "50%").hex(); // #511a1a

decreaseHue

Decrease the Hue value of a color by the given percentage/amount.

colorKit.decreaseHue("#2c1a51", 50).hex(); // #1a3651
colorKit.decreaseHue("#2c1a51", "50%").hex(); // #1a5123

spin

Spin the hue channel by a certain percentage/amount.

colorKit.spin("#2c1a51", 350).hex(); // #231a51
colorKit.spin("#2c1a51", "350%").hex(); // #40511a

setSaturation

Set the saturation value of a color to a specific amount.

colorKit.setSaturation("#482e45", 100).hex(); // #750068

saturate

Increase the saturation value of a color by the given percentage/amount.

colorKit.saturate("#482e45", 50).hex(); // #65105b
colorKit.saturate("#482e45", "50%").hex(); // #4e2749

desaturate

Decrease the saturation value of a color by the given percentage/amount.

colorKit.desaturate("#482e45", 50).hex(); // #3b3b3b
colorKit.desaturate("#482e45", "50%").hex(); // #413440

setLuminance

Set HSL’s luminosity channel for a given color to a specific amount.

colorKit.setLuminance("#dadafc", 50).hex(); // #1313ec

brighten

Increase the brightness of the given color by a certain percentage/amount.

colorKit.brighten("#dadafc", 50).hex(); // #ffffff
colorKit.brighten("#dadafc", "5%").hex(); // #f1f1fe

darken

Decrease the brightness of the given color by a certain percentage/amount.

colorKit.darken("#dadafc", 50).hex(); // #1010c6
colorKit.darken("#dadafc", "50%").hex(); // #1212d9

setBrightness

Set HSV’s value (brightness) channel for a given color to a specific amount.

colorKit.setBrightness("#dadafc", 50).hex(); // #6f6f80

increaseBrightness

Increase HSV’s value (brightness) channel value of a color by the given percentage/amount

colorKit.increaseBrightness("#dadafc", 50).hex(); // #dedeff
colorKit.increaseBrightness("#dadafc", "5%").hex(); // #dedeff

decreaseBrightness

Decrease HSV’s value (brightness) channel value of a color by the given percentage/amount

colorKit.decreaseBrightness("#dadafc", 50).hex(); // #6d6d7d
colorKit.decreaseBrightness("#dadafc", "50%").hex(); // #6f6f80

setAlpha

Set the alpha value of a color to a specific amount.

increaseAlpha

Increase the alpha value of a color by the given percentage/amount.

decreaseAlpha

Decrease the alpha value of a color by the given percentage/amount.

Color Utilities

parse

Parse any supported color format into a typed { format, value } object. Returns undefined if the input is invalid.

colorKit.parse("#ff0000");
// → { format: 'hex6', value: { r: 255, g: 0, b: 0 } }


colorKit.parse("hsl(120, 100%, 50%)");
// → { format: 'hsl', value: { h: 120, s: 100, l: 50 } }


colorKit.parse({ r: 255, g: 0, b: 0, a: 0.5 });
// → { format: 'rgba', value: { r: 255, g: 0, b: 0, a: 0.5 } }


colorKit.parse("not-a-color");
// → undefined

blend

Blends two colors by a certain amount.

colorKit.blend("red", "yellow", 50).hex(); // #ff8000

invert

Invert (negate) a color, black becomes white, white becomes black, blue becomes orange and so on.

colorKit.invert("#000").hex(); // #ffffff

grayscale

Completely desaturates a color into greyscale.

colorKit.grayscale("#172140").hex(); // #212121

adjustContrast

Returns the first color (text color) with the desired contrast ratio against the second color (background color).

colorKit.adjustContrast("rgb(50, 50, 50)", "#fff", 4.5).hex(); // #777777

randomHslColor

Generate a random color from HSL values.

You can provide a range between two values for each channel.

colorKit.randomHslColor({ h: [0, 360], s: [0, 100], l: [0, 100], a: [1, 1] }).hex(); // #b07345
colorKit.randomHslColor().hex(); // #d0bfd6

randomHsvColor

Generate a random color from HSV values.

You can provide a range between two values for each channel.

colorKit.randomHsvColor({ h: [0, 360], s: [0, 100], v: [0, 100], a: [1, 1] }).hex(); // #59078c
colorKit.randomHsvColor().hex(); // #2b553f

randomRgbColor

Generate a random color from rgb values.

You can provide a range between two values for each channel.

colorKit.randomRgbColor({ r: [0, 360], g: [0, 100], b: [0, 100], a: [1, 1] }).hex(); // #ff0f0b
colorKit.randomRgbColor().hex(); // #b07345

randomHwbColor

Generate a random color from hwb values.

You can provide a range between two values for each channel.

colorKit.randomHwbColor({ h: [0, 360], w: [0, 100], b: [0, 100], a: [1, 1] }).hex(); // #ff0f0b
colorKit.randomHwbColor().hex(); // #b07345