react-color-palette

🎨 Lightweight <ColorPicker /> component for React.

Live Demo →

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.

Example for the Light theme

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

Example for the Dark theme

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

Changelog

6.2.0 (2021-11-11)

Features

• onChangeComplete callback. (bd83997), closes #18

Bug Fixes

• Infinite useColor re-renders (#26) (3dcc66b)
• Sliders width (#24) (6c8fa99)