github.com/Wondermarin/react-color-palette @v7.3.1

<img alt="react-color-palette" src="https://github.com/Wondermarin/react-color-palette/raw/main/public/logo.png" width="128px" height="128px" />

🎨 Lightweight <ColorPicker /> component for React.

<a href="https://www.npmjs.com/package/react-color-palette">
  <img alt="npm" src="https://badgen.net/npm/v/react-color-palette?color=561ecb" />
</a>
<a href="https://www.npmjs.com/package/react-color-palette">
  <img alt="downloads" src="https://badgen.net/npm/dw/react-color-palette?color=561ecb" />
</a>
<a href="https://bundlephobia.com/result?p=react-color-palette">
  <img alt="size" src="https://badgen.net/bundlephobia/minzip/react-color-palette@latest?color=561ecb" />
</a>






<img src="https://github.com/Wondermarin/react-color-palette/raw/main/public/demo.apng" />

Installation

yarn

yarn add react-color-palette

npm

npm install react-color-palette

Usage

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

export function App() {
  const [color, setColor] = useColor("#561ecb");

  return <ColorPicker color={color} onChange={setColor} />;
}

Examples

Usage rgb() in useColor()

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

export function App() {
  const [color, setColor] = useColor("rgb(86 30 203)");

  return <ColorPicker color={color} onChange={setColor} />;
}

Usage <named-color> in useColor()

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

export function App() {
  const [color, setColor] = useColor("cyan");

  return <ColorPicker color={color} onChange={setColor} />;
}

Custom Layout

import { Saturation, Hue, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("hsl(120 100% 50% / .5)");

  return (



      <Saturation height={300} color={color} onChange={setColor} />
      <Hue color={color} onChange={setColor} />



  );
}

HEX input only

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

export function App() {
  const [color, setColor] = useColor("#123123");

  return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} />
}

onChangeComplete optional callback

import { ColorPicker, useColor, type IColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#123123");

  const onChangeComplete = (color: IColor) => localStorage.setItem("color", color.hex);

  return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} onChangeComplete={onChangeComplete} />
}

API

<ColorPicker />

The main component, which includes: <Saturation />, <Hue />, <Alpha /> and <Fields /> components for instant use.

If you need a custom layout, then you can use <Saturation />, <Hue /> and <Alpha /> components separately, which are also exported from the library.

<Saturation />

<Hue />

<Alpha />

useColor()

TColor

Value can be specified using one of the methods listed below:

• <named-color>
• <hex-color>
• sRGB color space: hsl(), hwb() or rgb()

IColor

IColorRgb

IColorHsv

License

Code released under the MIT license.