### Install reanimated-color-picker using npm

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/installation.md

Run this command in your project root to install the library. Ensure you have the specified prerequisites installed first.

```bash
npm install reanimated-color-picker
```

--------------------------------

### Basic Color Picker Integration with Modal

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/usage.md

This example demonstrates how to integrate the ColorPicker component within a modal. It includes basic setup for selecting a color and closing the modal. Note that 'onCompleteJS' and 'onChangeJS' should be used for non-worklet functions.

```jsx
import React, { useState } from "react";
import { Button, Modal, StyleSheet, View } from "react-native";
import ColorPicker, { Panel1, Swatches, Preview, OpacitySlider, HueSlider } from "reanimated-color-picker";

export default function App() {
  const [showModal, setShowModal] = useState(false);

  // Note: use `onCompleteJS` and `onChangeJS` for non-worklet functions
  const onSelectColor = ({ hex }) => {
    "worklet";
    // do something with the selected color.
    console.log(hex);
  };

  return (
    <View style={styles.container}>
      <Button title="Color Picker" onPress={() => setShowModal(true)} />

      <Modal visible={showModal} animationType="slide">
        <ColorPicker style={{ width: "70%" }} value="red" onComplete={onSelectColor}>
          <Preview />
          <Panel1 />
          <HueSlider />
          <OpacitySlider />
          <Swatches />
        </ColorPicker>

        <Button title="Ok" onPress={() => setShowModal(false)} />
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
});
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/ExampleExpoLatest/README.md

Run this command in your project directory to install all necessary dependencies defined in package.json.

```bash
npm install
```

--------------------------------

### Install CocoaPods Dependencies

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/ExampleLatest/README.md

Before running the iOS app, install CocoaPods dependencies. Run 'bundle install' once to install CocoaPods itself, then 'bundle exec pod install' after updating native dependencies.

```sh
bundle install
```

```sh
bundle exec pod install
```

--------------------------------

### Start Metro Bundler

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/ExampleLatest/README.md

Run this command to start the Metro JavaScript bundler for React Native development. Ensure you are in the project's root directory.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Install Reanimated Color Picker

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/README.md

Install the reanimated-color-picker package using npm. Ensure react-native-gesture-handler and react-native-reanimated are installed with compatible versions.

```bash
npm i reanimated-color-picker
```

--------------------------------

### Start Expo Development Server

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/ExampleExpoLatest/README.md

Initiates the Expo development server, providing options to run the app on various platforms and simulators.

```bash
npx expo start
```

--------------------------------

### Build and Run iOS App

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/ExampleLatest/README.md

Execute this command to build and run your React Native application on an iOS simulator or device. Requires Metro bundler to be running and CocoaPods dependencies installed.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### getHue

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Gets the hue channel value of a given color.

```APIDOC
## getHue

### Description
Get the `hue` channel value of a given color.

### Method
`colorKit.getHue(color)`

### Parameters
#### Path Parameters
- **color** (string | object) - Required - The color value.

### Request Example
```js
colorKit.getHue("#87c270"); // 103
```
```

--------------------------------

### Get HSV Brightness (Value)

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Retrieve the HSV `value` (brightness) channel from a color representation.

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

--------------------------------

### HWB Conversion

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Convert any supported color format into the HWB format. You can get the output as a string (optionally force HWBA), an array of numbers, or an object with h, w, b, and a properties.

```APIDOC
## colorKit.HWB

### Description
Converts a color to its HWB representation.

### Syntax
```ts
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 };
```

### Parameters
* `color` (SupportedColorFormats) - The input color to convert.
* `forceHWBA` (boolean, optional) - If true, forces the output string to be in `hwba()` format.
* `roundValues` (boolean, optional) - If true, rounds the numerical values in the array or object output.

### Request Example
```js
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]
```
```

--------------------------------

### getBrightness

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Gets the HSV's value (brightness) channel value of a given color.

```APIDOC
## getBrightness

### Description
Get the HSV's `value` (brightness) channel value of a given color.

### Method
`colorKit.getBrightness(color)`

### Parameters
#### Path Parameters
- **color** (string | object) - Required - The color value.

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

--------------------------------

### Adjust Text Color for Contrast

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Adjusts the first color (text) to achieve a specified contrast ratio against the second color (background). Example finds a suitable text color for a dark gray background.

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

--------------------------------

### RGB Conversion

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Convert any supported color format into the RGB format. You can get the output as a string (optionally force RGBA), an array of numbers, or an object with r, g, b, and a properties.

```APIDOC
## colorKit.RGB

### Description
Converts a color to its RGB representation.

### Syntax
```ts
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 };
```

### Parameters
* `color` (SupportedColorFormats) - The input color to convert.
* `forceRGBA` (boolean, optional) - If true, forces the output string to be in `rgba()` format.
* `roundValues` (boolean, optional) - If true, rounds the numerical values in the array or object output.

### Request Example
```js
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]
```
```

--------------------------------

### HSV Conversion

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Convert any supported color format into the HSV format. You can get the output as a string (optionally force HSVA), an array of numbers, or an object with h, s, v, and a properties.

```APIDOC
## colorKit.HSV

### Description
Converts a color to its HSV representation.

### Syntax
```ts
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 };
```

### Parameters
* `color` (SupportedColorFormats) - The input color to convert.
* `forceHSVA` (boolean, optional) - If true, forces the output string to be in `hsva()` format.
* `roundValues` (boolean, optional) - If true, rounds the numerical values in the array or object output.

### Request Example
```js
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]
```
```

--------------------------------

### Convert Color to Grayscale

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Completely desaturates a color, converting it to its grayscale equivalent. Example converts a dark blue to a dark gray.

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

--------------------------------

### HSL Conversion

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Convert any supported color format into the HSL format. You can get the output as a string (optionally force HSLA), an array of numbers, or an object with h, s, l, and a properties.

```APIDOC
## colorKit.HSL

### Description
Converts a color to its HSL representation.

### Syntax
```ts
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 };
```

### Parameters
* `color` (SupportedColorFormats) - The input color to convert.
* `forceHSLA` (boolean, optional) - If true, forces the output string to be in `hsla()` format.
* `roundValues` (boolean, optional) - If true, rounds the numerical values in the array or object output.

### Request Example
```js
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]
```
```

--------------------------------

### Reset Project to Starter Code

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/ExampleExpoLatest/README.md

Use this command to revert your project to the initial starter code, moving existing work to the app-example directory.

```bash
npm run reset-project
```

--------------------------------

### Get HSL Luminance

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Get the HSL `luminosity` channel value of a color. For overall luminosity, use `getLuminanceWCAG`.

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

--------------------------------

### getAlpha

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Gets the alpha channel value of a given color.

```APIDOC
## getAlpha

### Description
Get the `alpha` channel value of a given color.

### Method
`colorKit.getAlpha(color)`

### Parameters
#### Path Parameters
- **color** (string | object) - Required - The color value.

### Request Example
```js
colorKit.getAlpha("#d2c765c7"); // 0.78
```
```

--------------------------------

### Run ColorKit on UI Thread

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Demonstrates how to execute colorKit methods on the UI thread using `runOnUI`. This is necessary for any colorKit operations within a worklet.

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

--------------------------------

### Lazy-load Pagefind UI and Stylesheet

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/sources/parts/pagefind/pagefind.part.html

This snippet demonstrates how to lazily load the Pagefind UI and its stylesheet. It checks if the stylesheet is already downloaded and applies the 'stylesheet' relation, or adds an event listener for the 'load' event. It also resolves the Pagefind bundle path relative to the current module.

```javascript
// @ts-check
(async () => {
  // ::: Lazy-load the Pagefind UI. :::
  /** @type {HTMLLinkElement | null} */
  const pagefindStyleSheet = document.querySelector(".pagefind-stylesheet");
  if (!pagefindStyleSheet) {
    console.error("Could not find pagefind stylesheet element");
    return;
  }

  const onLoad = async () => {
    pagefindStyleSheet.rel = "stylesheet";
    const { getInstanceManager } = await import("@pagefind/component-ui");

    // Resolve Pagefind using a relative path so the site works correctly on any subpath.
    const bundlePath = new URL("~/pagefind/", import.meta.url).pathname;
    getInstanceManager().instances.get("default").options.bundlePath = bundlePath;
  };

  const isDownloaded = performance.getEntriesByName(pagefindStyleSheet.href).length > 0;
  if (isDownloaded) {
    await onLoad();
  } else {
    pagefindStyleSheet.addEventListener("load", onLoad, { once: true });
  }

  // ::: Open the Pagefind modal when the search button is clicked. :::
  /** @type {(HTMLElement & { openModal(): void }) | null} */
  const pagefindModalTrigger = document.querySelector("pagefind-modal-trigger");
  if (!pagefindModalTrigger) {
    console.error("Could not find pagefind modal trigger element");
    return;
  }

  /** @type {HTMLButtonElement | null} */
  const triggerModalIconButton = document.querySelector(".pagefind-modal-trigger-button");
  if (!triggerModalIconButton) {
    console.error("Could not find pagefind modal trigger button element");
    return;
  }

  triggerModalIconButton.addEventListener("click", () => {
    pagefindModalTrigger.openModal();
  });
})();
```

--------------------------------

### getBlue

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Gets the blue channel value of a given color.

```APIDOC
## getBlue

### Description
Get the `blue` channel value of a given color.

### Method
`colorKit.getBlue(color)`

### Parameters
#### Path Parameters
- **color** (string | object) - Required - The color value.

### Request Example
```js
colorKit.getBlue("hsl(200, 60%, 50%)"); // 204
```
```

--------------------------------

### Basic ColorPicker Usage

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/color-picker-wrapper.md

Demonstrates how to wrap built-in components within the ColorPicker. All components must be nested inside ColorPicker to function correctly.

```jsx
<ColorPicker>
  <Preview />

  <View>
    <Panel1 />
    <HueSlider vertical />
  </View>

  <View>
    <Text>Opacity</Text>
    <OpacitySlider />
  </View>

  <Swatches />
</ColorPicker>
```

--------------------------------

### ColorPicker Component Usage

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/color-picker-wrapper.md

Demonstrates how to use the ColorPicker component and nest other color picker elements within it.

```APIDOC
## `<ColorPicker />`

The `ColorPicker` component is responsible for managing all built-in components.

> [!caution] All built-in components must be wrapped within `ColorPicker` component.

You can nest components freely to achieve any layout:

```jsx
<ColorPicker>
  <Preview />

  <View>
    <Panel1 />
    <HueSlider vertical />
  </View>

  <View>
    <Text>Opacity</Text>
    <OpacitySlider />
  </View>

  <Swatches />
</ColorPicker>
```
```

--------------------------------

### getGreen

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Gets the green channel value of a given color.

```APIDOC
## getGreen

### Description
Get the `green` channel value of a given color.

### Method
`colorKit.getGreen(color)`

### Parameters
#### Path Parameters
- **color** (string | object) - Required - The color value.

### Request Example
```js
colorKit.getGreen("rgb(0, 200, 0)"); // 200
```
```

--------------------------------

### getRed

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Gets the red channel value of a given color.

```APIDOC
## getRed

### Description
Get the `red` channel value of a given color.

### Method
`colorKit.getRed(color)`

### Parameters
#### Path Parameters
- **color** (string | object) - Required - The color value.

### Request Example
```js
colorKit.getRed("red"); // 255
```
```

--------------------------------

### Preview Component Props

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/preview/preview.md

The `<Preview />` component accepts the following props to customize its appearance and behavior.

```APIDOC
## `<Preview />` Component Props

### `colorFormat`

The color format displayed in the preview.

`type: ColorFormat` · `default: "hex"`

```ts
type ColorFormat = "hex" | "rgb" | "rgba" | "hsl" | "hsla" | "hsv" | "hsva" | "hwb" | "hwba";
```

---

### `hideInitialColor`

Hides the initial color section of the preview.

`type: boolean` · `default: false`

---

### `hideText`

Hides the preview text.

`type: boolean` · `default: false`

---

### `disableOpacityTexture`

Hides the background texture that appears when the color has an opacity less than 1.

`type: boolean` · `default: false`

---

### `style`

The preview container style.

`type: ViewStyle`[^style-override]

---

### `textStyle`

The preview text style.

`type: TextStyle`[^style-override]

[^style-override]: Certain style properties will be overridden.
```

--------------------------------

### Get Hue Channel Value

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Retrieve the hue channel value from a color representation.

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

--------------------------------

### Build and Run Android App

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/ExampleLatest/README.md

Execute this command to build and run your React Native application on an Android device or emulator. Requires Metro bundler to be running.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Get Blue Channel Value

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Retrieve the blue channel value from a color representation.

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

--------------------------------

### Using ExtraThumb in Panel3

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/preview/extra-thumb.md

Demonstrates how to add multiple ExtraThumb components to a Panel3. Each thumb can be configured with hueTransform or colorTransform to display different colors.

```jsx
<Panel3 style={styles.panelStyle} adaptSpectrum>
  <ExtraThumb thumbShape="circle" hueTransform={120} />
  <ExtraThumb thumbShape="circle" hueTransform={140} />
  <ExtraThumb thumbShape="circle" hueTransform={160} />
  {/* using colorTransform to transform the hue channel */}
  <ExtraThumb
    thumbShape="circle"
    colorTransform={color => {
      "worklet";
      return colorKit.runOnUI().spin(color, 180).hsv().object();
    }}
  />
  <ExtraThumb thumbShape="circle" hueTransform={200} />
  <ExtraThumb thumbShape="circle" hueTransform={220} />
  <ExtraThumb thumbShape="circle" hueTransform={240} />
</Panel3>
```

--------------------------------

### Get Green Channel Value

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Retrieve the green channel value from a color representation.

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

--------------------------------

### accessibilityHint

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/sources/parts/markdown/slider-props.md

Sets the slider's hint for accessibility purposes.

```APIDOC
## accessibilityHint

### Description
Slider's hint for accessibility.

### Type
`string`
```

--------------------------------

### Get Red Channel Value

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Retrieve the red channel value from a color representation.

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

--------------------------------

### ColorPicker Props

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/color-picker-wrapper.md

Detailed documentation for the props available on the ColorPicker component.

```APIDOC
## Props

### `value`

The initial color displayed when the picker loads. If updated, the picker reflects the new color automatically.

Accepts `hex`, `rgb`, `rgba`, `hsl`, `hsla`, `hsv`, `hsva`, `hwb`, `hwba`, and named colors.

`type: string` · `default: "#fff"`

---

### `adaptSpectrum`

A global property that allows slider background color spectrums to adapt to changes in brightness and saturation across all descendant slider components.

`type: boolean` · `default: false`

---

### `boundedThumb`

![boundedThumb](@assets/images/boundedThumb.png)

A global property for all descendant sliders and panels. Determines whether the thumb is constrained within the boundaries of the slider. When `false`, half of the thumb extend beyond the slider edges.

`type: boolean` · `default: false`

---

### `sliderThickness`

A global property for the thickness of all descendant sliders. Refers to `width` for vertical sliders and `height` for horizontal ones.

`type: number` · `default: 25`

---

### `thumbAnimationDuration`

A global property for the duration of the thumb animation when the `value` prop changes.

`type: number` · `default: 200`

---

### `thumbSize`

A global property for the thumb size of all descendant slider components.

`type: number` · `default: 35`

---

### `thumbColor`

A global property for the thumb color of all descendant slider components.

`type: string` · `default: undefined`

---

### `thumbShape`

A global property for the thumb shape and appearance of all descendant slider components.

`type: ThumbShapeType` · `default: "ring"`

<div>
  <markdown src="@parts/markdown/thumb-shape-type.md"></markdown>
</div>

---

### `thumbStyle`

A global property for the thumb's `View` style across all descendant slider components.

`type: ViewStyle`[^style-override]

---

### `thumbInnerStyle`

A global property for the thumb's inner `View` style across all descendant slider components.

`type: ViewStyle`[^style-override]

---

### `thumbScaleAnimationValue`

A global property for the scale value of the thumb animation when active.

`type: number` · `default: 1.2`

---

### `thumbScaleAnimationDuration`

A global property for the duration of the thumb scale animation when active.

`type: number` · `default: 100`

---

<div>
  <markdown src="@parts/markdown/render-thumb.md"></markdown>
</div>

---

### `style`

The container style of the `ColorPicker`.

`type: ViewStyle`[^style-override]

---

### `enableColorAnnouncements`

Enables accessibility announcements when the color changes.

When enabled, color updates are announced using the format defined by [`colorAnnouncementFormat`](#colorannouncementformat).

`type: boolean` · `default: true`

---

### `colorAnnouncementFormat`

Defines the format used when announcing color values for accessibility.

Accepts `hex`, `rgb`, `rgba`, `hsl`, `hsla`, `hsv`, `hsva`, `hwb` and `hwba`.

`type: keyof ColorFormatsObject` · `default: "rgb"`

---
```

--------------------------------

### getLuminance

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Gets the HSL luminosity channel value of a color. For overall luminosity, use `getLuminanceWCAG`.

```APIDOC
## getLuminance

### Description
Get color's HSL `luminosity` channel value.
If you want the overall `luminosity` of a color use [`getLuminanceWCAG`](#getluminancewcag) method.

### Method
`colorKit.getLuminance(color)`

### Parameters
#### Path Parameters
- **color** (string | object) - Required - The color value.

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

--------------------------------

### <Panel5 /> Component

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/panels/panel5.md

The Panel5 component renders a grid of 120 colors. It supports customization through props like gestures, styles, and accessibility properties.

```APIDOC
## <Panel5 /> Component

### Description
A grid of 120 colors arranged in 12 columns and 10 rows. This panel is limited to a fixed range of colors and cannot display all colors.

### Props

#### `gestures`

An array of gestures or composed gestures from `react-native-gesture-handler` that run simultaneously with the color picker's gestures.

- **Type**: `Gesture[]`
- **Default**: `[]`

#### `style`

The panel's container style.

- **Type**: `ViewStyle`

#### `selectionStyle`

The style of the square that indicates the selected color.

- **Type**: `ViewStyle`

#### `accessibilityLabel`

Panel's label for accessibility.

- **Type**: `string`

#### `accessibilityHint`

Panel's hint for accessibility.

- **Type**: `string`
```

--------------------------------

### Convert to HWB String, Array, or Object

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Use colorKit.HWB to convert various color formats to HWB. Supports output as a string (optionally HWBA), an array of numbers, or an object with h, w, b, and a properties. Values can be rounded.

```javascript
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]
```

--------------------------------

### Get Alpha Channel Value

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Retrieve the alpha channel value from a color representation. The value is normalized between 0 and 1.

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

--------------------------------

### onComplete Event

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/color-picker-wrapper.md

Fires when the user releases the slider handle or taps a swatch. Accepts worklet functions only.

```APIDOC
## onComplete

### Description
Fires when the user releases the slider handle or taps a swatch. Accepts `worklet` functions only — use [`onCompleteJS`](#oncompletejs) for regular functions.

### Type
`(color: ColorFormatsObject) => void`

### Default
`undefined`
```

--------------------------------

### Invert Color

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Inverts a given color, effectively swapping light and dark components. Example inverts black to white.

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

--------------------------------

### Color Scheme Switcher Logic

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/sources/parts/color-scheme-switch/color-scheme-switch.part.html

This snippet handles the logic for switching color schemes, including setting the scheme in local storage, updating the document's color scheme, and managing button states. It also includes a fallback for browsers that do not support View Transitions.

```javascript
// @ts-check (() => {
  const STORAGE_KEY = "color-scheme";
  const PREFERS_DARK = window.matchMedia("(prefers-color-scheme: dark)");
  let currentScheme = PREFERS_DARK.matches ? "dark" : "light";

  // Override with stored value
  const stored = window.localStorage.getItem(STORAGE_KEY);
  if (stored === "dark" || stored === "light") {
    currentScheme = stored;
    document.documentElement.style.colorScheme = stored;
  }

  /**
   * @param {"light" | "dark"} scheme
   * @param {NodeListOf<HTMLButtonElement>} buttons
   */
  const applyScheme = (scheme, buttons) => {
    const isDark = scheme === "dark";
    for (const button of buttons) {
      document.documentElement.style.colorScheme = scheme;
      window.localStorage.setItem(STORAGE_KEY, scheme);
      button.classList.remove("no-animation");
      button.setAttribute("aria-pressed", String(isDark));
    }
    document.dispatchEvent(new CustomEvent("color-scheme-changed", { detail: scheme }));
  };

  const onReady = () => {
    /** @type {NodeListOf<HTMLButtonElement>} */
    const colorSchemeButtons = document.querySelectorAll(".color-scheme-switch");
    const isDark = currentScheme === "dark";

    for (const colorSchemeButton of colorSchemeButtons) {
      // Set initial state without side-effects
      colorSchemeButton.classList.add("no-animation");
      colorSchemeButton.setAttribute("aria-pressed", String(isDark));

      // Add event listener
      colorSchemeButton.addEventListener("click", event => {
        const nextScheme = colorSchemeButton.getAttribute("aria-pressed") === "true" ? "light" : "dark";
        viewTransition(() => applyScheme(nextScheme, colorSchemeButtons), event.clientX, event.clientY);
      });
    }
  };

  document.addEventListener("DOMContentLoaded", onReady, { once: true, passive: true });

  /**
   * @param {() => void} update
   * @param {number} x
   * @param {number} y
   */
  async function viewTransition(update, x, y) {
    if (!document.startViewTransition || matchMedia("(prefers-reduced-motion: reduce)").matches) {
      update();
      return;
    }

    const transition = document.startViewTransition({
      update,
      types: ["circular-reveal"]
    });

    await transition.ready;

    const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`
        ]
      },
      {
        duration: 400,
        easing: "cubic-bezier(0.64, 0, 0.78, 0)",
        pseudoElement: "::view-transition-new(root)"
      }
    );
  }
})();
```

--------------------------------

### Blend Two Colors

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Blends two specified colors by a given percentage. Example shows blending red and yellow.

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

--------------------------------

### Get WCAG Luminance

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Calculate the perceived luminance of a color according to WCAG 2.0 standards, returning a value between 0 and 1.

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

--------------------------------

### ExtraThumb Component Usage

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/preview/extra-thumb.md

Demonstrates how to use the ExtraThumb component within a Panel3 component, showcasing various transformation props.

```APIDOC
## `<ExtraThumb />`

Adds an extra thumb to the `Panel3` component. Used exclusively as a color indicator — it does not respond to gestures.

> [!note]
> This component only works inside `Panel3`.

### Usage

```jsx
<Panel3 style={styles.panelStyle} adaptSpectrum>
  <ExtraThumb thumbShape="circle" hueTransform={120} />
  <ExtraThumb thumbShape="circle" hueTransform={140} />
  <ExtraThumb thumbShape="circle" hueTransform={160} />
  {/* using colorTransform to transform the hue channel */}
  <ExtraThumb
    thumbShape="circle"
    colorTransform={color => {
      "worklet";
      return colorKit.runOnUI().spin(color, 180).hsv().object();
    }}
  />
  <ExtraThumb thumbShape="circle" hueTransform={200} />
  <ExtraThumb thumbShape="circle" hueTransform={220} />
  <ExtraThumb thumbShape="circle" hueTransform={240} />
</Panel3>
```

### Props

#### `colorTransform`

A worklet function that transforms the color in HSV space. Receives an HSVA object and returns a new HSVA object that determines the thumb's position inside the panel.

`type: (color: HSVObject) => HSVObject`

--- 

#### `hueTransform`

An alternative to `colorTransform` for transforming the hue channel. Accepts negative values and percentage strings (e.g. `'50%'` or `50`).

`type: string | number`

--- 

#### `saturationTransform`

An alternative to `colorTransform` for transforming the saturation channel. Accepts negative values and percentage strings (e.g. `'50%'` or `50`).

`type: string | number`

--- 

#### `brightnessTransform`

An alternative to `colorTransform` for transforming the brightness channel. Accepts negative values and percentage strings (e.g. `'50%'` or `50`).

`type: string | number`

--- 

#### `onChange`

Fires every time the user modifies the color, providing the transformed color via a worklet callback. Accepts `worklet` functions only — use `onChangeJS` for regular functions. The color object exposes: `hex`, `rgb`, `rgba`, `hsv`, `hsva`, `hwb`, `hwba`, `hsl`, and `hsla`.

`type: (color: object) => void` · `default: undefined`

--- 

#### `onChangeJS`

Fires every time the user modifies the color, providing the transformed color via a regular callback. Accepts regular functions only — use `onChange` for `worklet` functions. The color object exposes: `hex`, `rgb`, `rgba`, `hsv`, `hsva`, `hwb`, `hwba`, `hsl`, and `hsla`.

`type: (color: object) => void` · `default: undefined`

> [!tip]
> Avoid using `setState` inside `onChange` to prevent performance issues. Instead, use `useSharedValue` from `react-native-reanimated`.

--- 

#### `thumbSize`

The thumb's height and width.

`type: number` · `default: inherit from Panel3`

--- 

#### `thumbColor`

The thumb's color.

`type: string` · `default: inherit from Panel3`

--- 

#### `thumbShape`

The thumb's shape and appearance.

`type: ThumbShapeType` · `default: inherit from Panel3`

--- 

#### `thumbStyle`

The thumb's containing `View` style.

`type: ViewStyle`[^style-override] · `default: inherit from Panel3`

--- 

#### `thumbInnerStyle`

The thumb's inner `View` style.

`type: ViewStyle`[^style-override] · `default: inherit from Panel3`

--- 

#### `renderCenterLine`

Controls whether a line is rendered from the center of the panel to the thumb.

`type: boolean` · `default: inherit from Panel3`

--- 

[^style-override]: Certain style properties will be overridden.
```

--------------------------------

### Convert to HSV String, Array, or Object

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Use colorKit.HSV to convert various color formats to HSV. Supports output as a string (optionally HSVA), an array of numbers, or an object with h, s, v, and a properties. Values can be rounded.

```javascript
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]
```

--------------------------------

### Setting Color with setColor Method

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/color-picker-wrapper.md

Demonstrates how to use the `setColor` method to programmatically change the color of the picker. This method does not trigger `onChange` or `onComplete` events.

```tsx
import ColorPicker from "reanimated-color-picker";

import type { ColorPickerRef } from "reanimated-color-picker";

function MyComponent() {
  const pickerRef = useRef<ColorPickerRef>(null);

  const setNewColorHandle = () => {
    if (pickerRef.current) {
      pickerRef.current.setColor("orange");
    }
  };

  return <ColorPicker ref={pickerRef}>{/* ... */}</ColorPicker>;
}
```

--------------------------------

### PreviewText Component Props

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/preview/preview-text.md

The PreviewText component accepts the following props: `colorFormat` and `style`.

```APIDOC
## `<PreviewText />`

A React Native `<Text>` component that displays the current color as text.

### Props

#### `colorFormat`

The color format displayed in the preview text.

`type: ColorFormat`

```ts
type ColorFormat = "hex" | "rgb" | "rgba" | "hsl" | "hsla" | "hsv" | "hsva" | "hwb" | "hwba";
```

#### `style`

The preview text style.

`type: TextStyle`[^style-override]

[^style-override]: Certain style properties will be overridden.
```

--------------------------------

### Custom Thumb Component with Reanimated

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/sources/parts/markdown/render-thumb.md

Implement a custom thumb component by defining a function that accepts `RenderThumbProps`. Use `useAnimatedStyle` to apply dynamic styles based on color values. Ensure `positionStyle` is included in the component's style to correctly position the thumb.

```tsx
import Animated, { useAnimatedStyle } from "react-native-reanimated";

import type { RenderThumbProps } from "reanimated-color-picker";

function MyCustomThumb({ width, height, positionStyle, adaptiveColor, currentColor, initialColor }: RenderThumbProps) {
  const animatedStyle = useAnimatedStyle(() => ({
    borderColor: adaptiveColor.value,
    backgroundColor: currentColor.value,
  }));

  return (
    <Animated.View
      style={[{ width, height, borderWidth: 1, borderRadius: width / 2, overflow: "hidden" }, animatedStyle, positionStyle]}
    >
      <View style={{ backgroundColor: initialColor, width: "50%", height, alignSelf: "flex-end" }} />
    </Animated.View>
  );
}
```

--------------------------------

### InputWidget Component Props

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/preview/input-widget.md

This section details the available props for the InputWidget component, allowing for customization of its behavior and appearance.

```APIDOC
## Props

### `defaultFormat`

The initial color format shown when the component loads.

`type: 'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'`

---

### `formats`

The color formats included in the cycle and the order they appear.

`type: Array<'HEX' | 'RGB' | 'HSL' | 'HWB' | 'HSV'>`

---

### `disableAlphaChannel`

Disables the alpha channel input, preventing users from setting the color's opacity.

`type: boolean` · `default: false`

---

### `inputStyle`

The style of the text input fields.

`type: TextStyle`[^style-override]

---

### `inputProps`

Additional props passed to the `TextInput` components.

`type: InputProps`

---

### `inputTitleStyle`

The style of the title displayed below the input fields indicating the current color format.

`type: TextStyle`[^style-override]

---

### `containerStyle`

The style of the container wrapping the input fields and cycle button.

`type: ViewStyle`[^style-override]

---

### `iconColor`

The color of the cycle button icon.

`type: string`

---

### `iconStyle`

The style of the cycle button icon.

`type: ImageStyle`[^style-override]

---

### `cycleButtonAccessibilityLabel`

Accessibility label for the cycle button. Used by screen readers to identify the button.

`type: string`

---

### `cycleButtonAccessibilityHint`

Accessibility hint for the cycle button. Describes what happens when the user activates it.

`type: string`

[^style-override]: Certain style properties will be overridden.
```

--------------------------------

### contrastRatio

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

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

```APIDOC
## contrastRatio

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

### Method
`colorKit.contrastRatio(color1, color2)`

### Parameters
#### Path Parameters
- **color1** (string | object) - Required - The first color value.
- **color2** (string | object) - Required - The second color value.

### Request Example
```js
colorKit.contrastRatio("yellow", "rgba(40, 38, 43, 1)"); // 13.95
```
```

--------------------------------

### onChange Event

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/api/color-picker-wrapper.md

Fires every time the user modifies the color. Accepts worklet functions only.

```APIDOC
## onChange

### Description
Fires every time the user modifies the color. Accepts `worklet` functions only — use [`onChangeJS`](#onchangejs) for regular functions.

### Type
`(color: ColorFormatsObject) => void`

### Default
`undefined`
```

--------------------------------

### Identify Color Format

Source: https://github.com/alabsi91/reanimated-color-picker/blob/main/docs/pages/colorkit.md

Use `getFormat` to determine the color format from strings or objects. It returns `null` for invalid color inputs.

```javascript
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)")
```