---

React Color

Getting Started

1npm i @uiw/react-color

1import { Slider, Sketch, Material, Colorful, Compact, Circle, Wheel, Block, Github, Chrome } from '@uiw/react-color';
2import { Alpha, Hue, ShadeSlider, Saturation, Interactive, hsvaToHslaString } from '@uiw/react-color';
3import { EditableInput, EditableInputRGBA, EditableInputHSLA } from '@uiw/react-color';
4
5function Demo() {
6  const [hex, setHex] = useState("#fff");
7  return (
8    <Sketch
9      style={{ marginLeft: 20 }}
10      color={hex}
11      onChange={(color) => {
12        setHex(color.hex);
13      }}
14    />
15  );
16}

Support dark/night Theme

1[data-color-mode*='dark'] .w-color-sketch {
2  --sketch-background: #323232 !important;
3}
4
5[data-color-mode*='dark'] .w-color-swatch {
6  --sketch-swatch-border-top: 1px solid #525252 !important;
7}
8
9[data-color-mode*='dark'] .w-color-block {
10  --block-background-color: #323232 !important;
11  --block-box-shadow: rgb(0 0 0 / 10%) 0 1px !important;
12}
13
14[data-color-mode*='dark'] .w-color-editable-input {
15  --editable-input-label-color: #757575 !important;
16  --editable-input-box-shadow: #616161 0px 0px 0px 1px inset !important;
17  --editable-input-color: #bbb !important;
18}
19
20[data-color-mode*='dark'] .w-color-github {
21  --github-border: 1px solid rgba(0, 0, 0, 0.2) !important;
22  --github-background-color: #323232 !important;
23  --github-box-shadow: rgb(0 0 0 / 15%) 0px 3px 12px !important;
24  --github-arrow-border-color: rgba(0, 0, 0, 0.15) !important;
25}
26
27[data-color-mode*='dark'] .w-color-compact {
28  --compact-background-color: #323232 !important;
29}
30
31[data-color-mode*='dark'] .w-color-material {
32  --material-background-color: #323232 !important;
33  --material-border-bottom-color: #707070 !important;
34}
35
36[data-color-mode*='dark'] .w-color-alpha {
37  --alpha-pointer-background-color: #6a6a6a !important;
38  --alpha-pointer-box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px !important;
39}

Documentation

You can find the react-color documentation on the website.

Packages

Package	Bundle size(gzip)	Downloads	Version / unpkg
@uiw/react-color
@uiw/react-color-sketch
@uiw/react-color-slider
@uiw/react-color-compact
@uiw/react-color-material
@uiw/react-color-colorful
@uiw/react-color-wheel
@uiw/react-color-circle
@uiw/react-color-block
@uiw/react-color-chrome
@uiw/react-color-github

Base Components

Package	Bundle size(gzip)	Downloads	Version / unpkg
@uiw/react-color-saturation
@uiw/react-color-hue
@uiw/react-color-alpha
@uiw/react-color-swatch
@uiw/react-color-shade-slider
@uiw/react-color-editable-input
@uiw/react-color-editable-input-rgba
@uiw/react-color-editable-input-hsla
@uiw/react-drag-event-interactive
@uiw/color-convert
@uiw/react-color-name

Development

1npm install       # Installation dependencies
2npm run build     # Compile all package

1cd packages/color-block
2# listen to the component compile and output the .js file
3# listen for compilation output type .d.ts file
4npm run watch # Monitor the compiled package `@uiw/react-block`

1npm run start     # development mode, listen to compile preview website instance

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.