react ~11 KB 0 deps v0.2.1 ↗ GitHub ↗ Updated May 5, 2026

@mshafiqyajid/react-color

Tiny, modern color picker for React. Zero dependencies, ~11 KB (vs 37 KB). Drop-in replacement for the abandoned react-color package. HexColorPicker, RgbaColorPicker, HslaColorPicker — plus a headless hook and full color-math utilities.

Playground #

#6366F1rgb(99,102,242)

Props

showAlpha

showHexInput

showPresets

TSX

import { HexColorPicker } from "@mshafiqyajid/react-color/styled";
import "@mshafiqyajid/react-color/styles.css";

<HexColorPicker
  value={color}
  onChange={setColor}
/>

Install #

npm install @mshafiqyajid/react-color

Quick start #

import { HexColorPicker } from "@mshafiqyajid/react-color/styled";
import "@mshafiqyajid/react-color/styles.css";

const [color, setColor] = useState("#6366f1");

<HexColorPicker value={color} onChange={setColor} />

Recipes #

RGBA picker with alpha

import { RgbaColorPicker } from "@mshafiqyajid/react-color/styled";

<RgbaColorPicker
  value={{ r: 99, g: 102, b: 241, a: 0.8 }}
  onChange={setRgba}
  showAlpha
/>

Custom width via CSS variable

<HexColorPicker
  value={color}
  onChange={setColor}
  style={{ "--rcp-width": "320px" } as React.CSSProperties}
/>

Color math utilities

import { parseHex, hsvaToHex, toHsva } from "@mshafiqyajid/react-color";

const rgba = parseHex("#6366f1cc");
// => { r: 99, g: 102, b: 241, a: 0.8 }

const hex = hsvaToHex({ h: 239, s: 84, v: 67, a: 1 });
// => "#6366f1"

Headless #

import { useColorPicker } from "@mshafiqyajid/react-color";
import { hsvaToHex } from "@mshafiqyajid/react-color";

const {
  hsva,
  saturationFieldProps,
  sbPosition,
  hueSliderProps,
  alphaSliderProps,
} = useColorPicker({ defaultValue: "#6366f1" });

return (
  <div className="my-picker">
    <div {...saturationFieldProps} className="sat">
      <span style={{ left: `${sbPosition.left}%`, top: `${sbPosition.top}%` }} />
    </div>
    <div {...hueSliderProps} className="hue" />
    <div {...alphaSliderProps} className="alpha" />
    <p>{hsvaToHex(hsva)}</p>
  </div>
);

API #

Picker components

Component	Output type	Example value
HexColorPicker	string	"#6366f1"
RgbaColorPicker	{ r, g, b, a }	{ r:99, g:102, b:241, a:1 }
HslaColorPicker	{ h, s, l, a }	{ h:239, s:84, l:67, a:1 }

Shared props (all pickers)

Prop	Type	Default	Description
value	format-specific	—	Controlled color value.
defaultValue	format-specific	white	Uncontrolled initial.
onChange	(color) => void	—	Fires on every pointer move.
showAlpha	boolean	false	Add alpha slider.
showHexInput	boolean	true	Show hex text input.
presets	string[]	—	Optional swatch row rendered below the picker. Click a swatch to apply.
disabled	boolean	false	Block all pointer interaction (saturation field, sliders, hex input, presets).

Edit this page on GitHub