Special thanks to:

SubList
SubList - Bill Reminder & Renewal Alerts

Using my app is also a way to support me:
Zipora: Zip/RAR/7Z Unarchiver Scap: Screenshot & Markup Edit Screen Test Deskmark Keyzer Vidwall Hub VidCrop Vidwall Mousio Hint Mousio Musicer Audioer FileSentinel FocusCursor Videoer KeyClicker DayBar Iconed Menuist Quick RSS Quick RSS Web Serve Copybook Generator DevTutor for SwiftUI RegexMate Time Passage Iconize Folder Textsound Saver Create Custom Symbols DevHub Resume Revise Palette Genius Symbol Scribe



@uiw/react-color



React Color

Buy me a coffee Follow On X Build & Deploy Coverage Status Open in unpkg npm version
react-color is a tiny color picker widget component for React apps. These components can be installed and used separately.


@uiw/react-color



## Getting Started ```bash npm i @uiw/react-color ``` [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-color-example-rev1n?fontsize=14&hidenavigation=1&theme=dark) [![Open in Github gh-pages](https://img.shields.io/badge/Open%20In-Github%20gh--pages-blue?logo=github)](https://uiwjs.github.io/react-color/) ```jsx import { Slider, Sketch, Material, Colorful, Compact, Circle, Swatch, Wheel, Block, Github, Chrome } from '@uiw/react-color'; import { Alpha, Hue, ShadeSlider, Saturation, Interactive, hsvaToHslaString } from '@uiw/react-color'; import { EditableInput, EditableInputRGBA, EditableInputHSLA } from '@uiw/react-color'; function Demo() { const [hex, setHex] = useState("#fff"); return ( { setHex(color.hex); }} /> ); } ``` ## Support dark/night Theme ```css [data-color-mode*='dark'] .w-color-sketch { --sketch-background: #323232 !important; } [data-color-mode*='dark'] .w-color-swatch { --sketch-swatch-border-top: 1px solid #525252 !important; } [data-color-mode*='dark'] .w-color-block { --block-background-color: #323232 !important; --block-box-shadow: rgb(0 0 0 / 10%) 0 1px !important; } [data-color-mode*='dark'] .w-color-editable-input { --editable-input-label-color: #757575 !important; --editable-input-box-shadow: #616161 0px 0px 0px 1px inset !important; --editable-input-color: #bbb !important; } [data-color-mode*='dark'] .w-color-github { --github-border: 1px solid rgba(0, 0, 0, 0.2) !important; --github-background-color: #323232 !important; --github-box-shadow: rgb(0 0 0 / 15%) 0px 3px 12px !important; --github-arrow-border-color: rgba(0, 0, 0, 0.15) !important; } [data-color-mode*='dark'] .w-color-compact { --compact-background-color: #323232 !important; } [data-color-mode*='dark'] .w-color-material { --material-background-color: #323232 !important; --material-border-bottom-color: #707070 !important; } [data-color-mode*='dark'] .w-color-alpha { --alpha-pointer-background-color: #6a6a6a !important; --alpha-pointer-box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px !important; } ``` ## Documentation You can find the react-color documentation [on the website](https://uiwjs.github.io/react-color/). ## Packages Package | Downloads | Version / unpkg ----- | ---- | ---- [`@uiw/react-color`](https://uiwjs.github.io/react-color/) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color.svg)](https://www.npmjs.com/package/@uiw/react-color) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color/file/README.md) [`@uiw/react-color-sketch`](https://uiwjs.github.io/react-color/#/sketch) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-sketch?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-sketch) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-sketch.svg)](https://www.npmjs.com/package/@uiw/react-color-sketch) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-sketch/file/README.md) [`@uiw/react-color-slider`](https://uiwjs.github.io/react-color/#/slider) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-slider?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-slider) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-slider.svg)](https://www.npmjs.com/package/@uiw/react-color-slider) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-slider/file/README.md) [`@uiw/react-color-compact`](https://uiwjs.github.io/react-color/#/compact) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-compact?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-compact) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-compact.svg)](https://www.npmjs.com/package/@uiw/react-color-compact) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-compact/file/README.md) [`@uiw/react-color-material`](https://uiwjs.github.io/react-color/#/material) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-material?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-material) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-material.svg)](https://www.npmjs.com/package/@uiw/react-color-material) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-material/file/README.md) [`@uiw/react-color-colorful`](https://uiwjs.github.io/react-color/#/colorful) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-colorful?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-colorful) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-colorful.svg)](https://www.npmjs.com/package/@uiw/react-color-colorful) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-colorful/file/README.md) [`@uiw/react-color-wheel`](https://uiwjs.github.io/react-color/#/wheel) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-wheel?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-wheel) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-wheel.svg)](https://www.npmjs.com/package/@uiw/react-color-wheel) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-wheel/file/README.md) [`@uiw/react-color-circle`](https://uiwjs.github.io/react-color/#/circle) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-circle?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-circle) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-circle.svg)](https://www.npmjs.com/package/@uiw/react-color-circle) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-circle/file/README.md) [`@uiw/react-color-block`](https://uiwjs.github.io/react-color/#/block) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-block?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-block) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-block.svg)](https://www.npmjs.com/package/@uiw/react-color-block) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-block/file/README.md) [`@uiw/react-color-chrome`](https://uiwjs.github.io/react-color/#/chrome) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-chrome?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-chrome) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-chrome.svg)](https://www.npmjs.com/package/@uiw/react-color-chrome) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-chrome/file/README.md) [`@uiw/react-color-github`](https://uiwjs.github.io/react-color/#/github) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-github?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-github) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-github.svg)](https://www.npmjs.com/package/@uiw/react-color-github) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-github/file/README.md) #### `Base Components` Package | Downloads | Version / unpkg ----- | ----- | ---- [`@uiw/react-color-saturation`](https://uiwjs.github.io/react-color/#/saturation) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-saturation?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-saturation) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-saturation.svg)](https://www.npmjs.com/package/@uiw/react-color-saturation) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-saturation/file/README.md) [`@uiw/react-color-hue`](https://uiwjs.github.io/react-color/#/hue) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-hue?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-hue) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-hue.svg)](https://www.npmjs.com/package/@uiw/react-color-hue) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-hue/file/README.md) [`@uiw/react-color-alpha`](https://uiwjs.github.io/react-color/#/alpha) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-alpha?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-alpha) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-alpha.svg)](https://www.npmjs.com/package/@uiw/react-color-alpha) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-alpha/file/README.md) [`@uiw/react-color-swatch`](https://uiwjs.github.io/react-color/#/swatch) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-swatch?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-swatch) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-swatch.svg)](https://www.npmjs.com/package/@uiw/react-color-swatch) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-swatch/file/README.md) [`@uiw/react-color-shade-slider`](https://uiwjs.github.io/react-color/#/shade-slider) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-shade-slider?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-shade-slider) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-shade-slider.svg)](https://www.npmjs.com/package/@uiw/react-color-shade-slider) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-shade-slider/file/README.md) [`@uiw/react-color-editable-input`](https://uiwjs.github.io/react-color/#/editable-input) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-editable-input?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-editable-input) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-editable-input.svg)](https://www.npmjs.com/package/@uiw/react-color-editable-input) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-editable-input/file/README.md) [`@uiw/react-color-editable-input-rgba`](https://uiwjs.github.io/react-color/#/editable-input-rgba) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-editable-input-rgba?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-editable-input-rgba) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-editable-input-rgba.svg)](https://www.npmjs.com/package/@uiw/react-color-editable-input-rgba) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-editable-input-rgba/file/README.md) [`@uiw/react-color-editable-input-hsla`](https://uiwjs.github.io/react-color/#/editable-input-hsla) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-editable-input-hsla?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-editable-input-hsla) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-editable-input-hsla.svg)](https://www.npmjs.com/package/@uiw/react-color-editable-input-hsla) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-editable-input-hsla/file/README.md) [`@uiw/react-drag-event-interactive`](https://uiwjs.github.io/react-color/#/drag-event-interactive) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-drag-event-interactive?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-drag-event-interactive) | [![npm version](https://img.shields.io/npm/v/@uiw/react-drag-event-interactive.svg)](https://www.npmjs.com/package/@uiw/react-drag-event-interactive) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-drag-event-interactive/file/README.md) [`@uiw/color-convert`](https://uiwjs.github.io/react-color/#/convert) | [![npm downloads](https://badgen.net/npm/dm/@uiw/color-convert?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/color-convert) | [![npm version](https://img.shields.io/npm/v/@uiw/color-convert.svg)](https://www.npmjs.com/package/@uiw/color-convert) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/color-convert/file/README.md) [`@uiw/react-color-name`](https://uiwjs.github.io/react-color/#/name) | [![npm downloads](https://badgen.net/npm/dm/@uiw/react-color-name?label=npm&color=dd4e4c)](https://www.npmjs.com/package/@uiw/react-color-name) | [![npm version](https://img.shields.io/npm/v/@uiw/react-color-name.svg)](https://www.npmjs.com/package/@uiw/react-color-name) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-name/file/README.md) ## Development ```bash npm install # Installation dependencies npm run build # Compile all package ``` ```bash cd packages/color-block # listen to the component compile and output the .js file # listen for compilation output type .d.ts file npm run watch # Monitor the compiled package `@uiw/react-block` ``` ```bash npm run start # development mode, listen to compile preview website instance ``` ## Contributors As always, thanks to our amazing contributors! Made with [contributors](https://github.com/jaywcjlove/github-action-contributors). ## License Licensed under the MIT License.