π¨ Lightweight <ColorPicker /> component for React.
- π Lightweight.
- π¨ No dependencies.
- π‘οΈ Strict.
npm install react-color-palette
yarn add react-color-palette
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 />;
};
Library |
Minified |
Gzipped |
Dependencies |
Tree Shaking |
Type Declarations |
react-color-palette |
![](https://camo.githubusercontent.com/57b135689aee652be8f730845a49ea82a4466d4c4a7078790ef3953302c618e7/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e2f72656163742d636f6c6f722d70616c65747465406c61746573743f636f6c6f723d677265656e266c6162656c3d) |
![](https://camo.githubusercontent.com/397a8b80f664f08eb67ca0dfa5b32153eb656322b375b57add201d748db2cf88/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e7a69702f72656163742d636f6c6f722d70616c65747465406c61746573743f636f6c6f723d677265656e266c6162656c3d) |
![](https://camo.githubusercontent.com/82363b87465e26c3e1301acdcbcdf8d3345a2ab6fd67d224f6a178d50651f36a/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f646570656e64656e63792d636f756e742f72656163742d636f6c6f722d70616c65747465406c61746573743f636f6c6f723d677265656e266c6162656c3d) |
![](https://camo.githubusercontent.com/9150fec1f75a370e7c9d9f514a9daf4e1ee8fd66f27df0c6ccd48f250780f3e9/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f747265652d7368616b696e672f72656163742d636f6c6f722d70616c65747465406c61746573743f6c6162656c3d) |
![](https://camo.githubusercontent.com/18749e15a9d886052aa75a14f7392fa8a916ecc937adbb9f37ae8004453db1bd/68747470733a2f2f62616467656e2e6e65742f6e706d2f74797065732f72656163742d636f6c6f722d70616c657474653f636f6c6f723d677265656e266c6162656c3d) |
react-colorful |
![](https://camo.githubusercontent.com/d7795eb10fd6ca05900bcab702b88f10abd00b91fddbd2495ae1668ca7b65c17/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e2f72656163742d636f6c6f7266756c406c61746573743f636f6c6f723d6f72616e6765266c6162656c3d) |
![](https://camo.githubusercontent.com/3bf5845d914e3266ca65ba29a006c49e1686917b53d0659d5e71c412e0e6b2c7/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e7a69702f72656163742d636f6c6f7266756c406c61746573743f636f6c6f723d677265656e266c6162656c3d) |
![](https://camo.githubusercontent.com/7d741f57d327b05f0d8879207e997320ccf15347d391b79f45bf32223da6e729/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f646570656e64656e63792d636f756e742f72656163742d636f6c6f7266756c406c61746573743f636f6c6f723d677265656e266c6162656c3d) |
![](https://camo.githubusercontent.com/239bed0590305b94ea8618c6a63e3fea48bb08e44cc1713b325c4a617a2e4c43/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f747265652d7368616b696e672f72656163742d636f6c6f7266756c406c61746573743f6c6162656c3d) |
![](https://camo.githubusercontent.com/3619636e3a6bf1f243586195076a9bf872b1a2a094e97b69b0d2069a7cff0879/68747470733a2f2f62616467656e2e6e65742f6e706d2f74797065732f72656163742d636f6c6f7266756c3f636f6c6f723d677265656e266c6162656c3d) |
react-input-color |
![](https://camo.githubusercontent.com/f4eb77eb7e7fe7f0ac65b098bde202e817a0f1d459401b7626cd231f28b03da9/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e2f72656163742d696e7075742d636f6c6f72406c61746573743f636f6c6f723d726564266c6162656c3d) |
![](https://camo.githubusercontent.com/b28b41f167b9c6c4d6ff43ba7f2218a90e3822189ee26dcce98d9af1f94f4373/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e7a69702f72656163742d696e7075742d636f6c6f72406c61746573743f636f6c6f723d6f72616e6765266c6162656c3d) |
![](https://camo.githubusercontent.com/35cdae6c3a82d0cbd889b2b1dbc9a3430b504dfccfd5b62f63a63c0c260a5142/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f646570656e64656e63792d636f756e742f72656163742d696e7075742d636f6c6f72406c61746573743f636f6c6f723d726564266c6162656c3d) |
![](https://camo.githubusercontent.com/3a9c2b4bc581bda6681771e3eff3333f29812a1e443c8a392386996debf503f9/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f747265652d7368616b696e672f72656163742d696e7075742d636f6c6f72406c61746573743f6c6162656c3d) |
![](https://camo.githubusercontent.com/466610c56cf0964baffc1677c65290c8624b6c1ea9dbde2c1adcaf84f7d24943/68747470733a2f2f62616467656e2e6e65742f6e706d2f74797065732f72656163742d696e7075742d636f6c6f723f636f6c6f723d677265656e266c6162656c3d) |
rc-color-picker |
![](https://camo.githubusercontent.com/26585f92214a19c5e66b02c358e381c1b5eb7b53115f5bc211a19d6b181f7302/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e2f72632d636f6c6f722d7069636b6572406c61746573743f636f6c6f723d726564266c6162656c3d) |
![](https://camo.githubusercontent.com/2c6c33bb3c24bc0eb584dd9d2469cf279fac4fa477237589b292124cd827c7e2/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e7a69702f72632d636f6c6f722d7069636b6572406c61746573743f636f6c6f723d726564266c6162656c3d) |
![](https://camo.githubusercontent.com/77d12238d4a5a61b20cebb48ed868d0e1e659838b1f6b8696d87b399683ba4ef/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f646570656e64656e63792d636f756e742f72632d636f6c6f722d7069636b6572406c61746573743f636f6c6f723d726564266c6162656c3d) |
![](https://camo.githubusercontent.com/4b19ed1fb08e27cef2c313b9d7a84329a6d7e6a84eba5da3516fbb428195d91c/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f747265652d7368616b696e672f72632d636f6c6f722d7069636b6572406c61746573743f6c6162656c3d) |
![](https://camo.githubusercontent.com/74394501b06e5c917eeeec3bf0443bdb0a3ddf3d367649b9de09e4c3491d2603/68747470733a2f2f62616467656e2e6e65742f6e706d2f74797065732f72632d636f6c6f722d7069636b65723f636f6c6f723d726564266c6162656c3d) |
react-color |
![](https://camo.githubusercontent.com/83cd9cf259a1aa8d1d82d7a16281af74bee9d8491b51722d595590101dc8bff6/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e2f72656163742d636f6c6f72406c61746573743f636f6c6f723d726564266c6162656c3d) |
![](https://camo.githubusercontent.com/2d6fa858ea58e091326722d74a3dfc962b2b88bf884756a84ca5b1be2c5da2f4/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f6d696e7a69702f72656163742d636f6c6f72406c61746573743f636f6c6f723d726564266c6162656c3d) |
![](https://camo.githubusercontent.com/7b04d23f74f2c2f0aa6dcab75ca45fd4cad31560718481dbdb6f0057a1aa0889/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f646570656e64656e63792d636f756e742f72656163742d636f6c6f72406c61746573743f636f6c6f723d726564266c6162656c3d) |
![](https://camo.githubusercontent.com/36885eb1805679bc4fbb737999d4fc7be58e82b78d677765137857f374b54584/68747470733a2f2f62616467656e2e6e65742f62756e646c6570686f6269612f747265652d7368616b696e672f72656163742d636f6c6f72406c61746573743f6c6162656c3d) |
![](https://camo.githubusercontent.com/55cd234711f702b2bcb56a284c3506dd471998ff9347a36f3601512cf4fca691/68747470733a2f2f62616467656e2e6e65742f6e706d2f74797065732f72656163742d636f6c6f723f636f6c6f723d6f72616e6765266c6162656c3d) |
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;
}
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 . |
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. |
Name |
Type |
Default |
Description |
model |
"hex" | "rgb" | "hsv" |
|
The color model. |
initColor |
string | ColorRGB | ColorHSV |
|
The initial color in the selected color model. |
Name |
Type |
Default |
Description |
model |
"hex" | "rgb" | "hsv" |
|
The color model. |
color |
string | ColorRGB | ColorHSV |
|
The color in the selected color model. |
Field |
Type |
hex |
string |
rgb |
ColorRGB |
hsv |
ColorHSV |
Field |
Type |
r |
number |
g |
number |
b |
number |
a |
number | undefined |
Field |
Type |
h |
number |
s |
number |
v |
number |
a |
number | undefined |
Code released under the MIT license.