Features

• 🚀 Lightweight.
• 💨 No dependencies.
• 🛡️ Strict.

Installation

npm

npm install react-color-palette

yarn

yarn add react-color-palette

Usage

import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/lib/css/styles.css";

export const App = () => {
  const [color, setColor] = useColor("hex", "#121212");

  return <ColorPicker width={456} height={228} color={color} onChange={setColor} hideHSV dark />;
};

Benchmarks

| Library | Minified | Gzipped | Dependencies | Tree Shaking | Type Declarations | | :-----: | :------: | :-----: | :----------: | :----------: | :---------------: | | react-color-palette | | | | | | | react-colorful | | | | | | | react-input-color | | | | | | | rc-color-picker | | | | | | | react-color | | | | | |

Overriding styles

If the default colors don't fit your project, you can always change them.

.rcp-light {
  --rcp-background: #ffffff;
  --rcp-input-text: #111111;
  --rcp-input-border: rgba(0, 0, 0, 0.1);
  --rcp-input-label: #717171;
}

.rcp-dark {
  --rcp-background: #181818;
  --rcp-input-text: #f3f3f3;
  --rcp-input-border: rgba(255, 255, 255, 0.1);
  --rcp-input-label: #999999;
}

API

ColorPicker Props

| Name | Type | Default | Description | | ---------------- | ------------ | --------- | -------------------------------------------------------------------------------- | | width | number | | The width of the color picker. | | height | number | width | The height of the color picker. | | color | Color | | The current Color. | | onChange | Function | | A function to update Color. | | onChangeComplete | Function | undefined | A callback is called every time the user stops changing a color (mouseup event). | | hideHEX | bool | false | Hide HEX input. | | hideRGB | bool | false | Hide RGB input. | | hideHSV | bool | false | Hide HSV input. | | alpha | bool | false | Enable alpha channel. | | dark | bool | false | Color theme. |

useColor Arguments

| Name | Type | Default | Description | | ------------ | ------------------------------------ | ------- | ----------------------------------------------- | | model | "hex" | "rgb" | "hsv" | | The color model. | | initColor | string | ColorRGB | ColorHSV | | The initial color in the selected color model. |

toColor Arguments

| Name | Type | Default | Description | | ------ | ------------------------------------ | ------- | --------------------------------------- | | model | "hex" | "rgb" | "hsv" | | The color model. | | color | string | ColorRGB | ColorHSV | | The color in the selected color model. |

Color

| Field | Type | | ----- | ---------- | | hex | string | | rgb | ColorRGB | | hsv | ColorHSV |

ColorRGB

| Field | Type | | ----- | ----------------------- | | r | number | | g | number | | b | number | | a | number | undefined |

ColorHSV

| Field | Type | | ----- | ----------------------- | | h | number | | s | number | | v | number | | a | number | undefined |

License

Code released under the MIT license.