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 (
    <div className="custom-layout">
      <Saturation height={300} color={color} onChange={setColor} />
      <Hue color={color} onChange={setColor} />
    </div>
  );
}

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 />

<Saturation />

<Hue />

<Alpha />

useColor()

TColor

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

IColor

IColorRgb

IColorHsv

License