Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

Color Picker

A React color picker with a saturation canvas, hue and alpha sliders, HEX, RGB, and HSL inputs, swatches, and a screen eyedropper in a popover.

color pickercolorhsvhexrgbhsleyedropperswatchesalphaform
Loading preview

Examples

Practical examples and common states for the same installable component.

Popover

Swatch trigger that opens the panel.

examples/color-picker-trigger.tsx
"use client";


import * as React from "react";
import { ColorPicker } from "@/components/wensity/color-picker";


export function PopoverColorPicker() {
  const [color, setColor] = React.useState("#8b5cf6");


  return <ColorPicker value={color} onChange={setColor} />;
}

Alpha

Adds the opacity rail and 8 digit hex.

examples/color-picker-alpha.tsx
"use client";


import * as React from "react";
import { ColorPickerPanel } from "@/components/wensity/color-picker";


export function AlphaColorPicker() {
  const [color, setColor] = React.useState("#f97316cc");


  return <ColorPickerPanel alpha value={color} onChange={setColor} />;
}

Swatches

Preset palette rendered under the fields.

examples/color-picker-swatches.tsx
"use client";


import * as React from "react";
import { ColorPickerPanel } from "@/components/wensity/color-picker";


const BRAND = ["#0f172a", "#dc2626", "#ea580c", "#eab308", "#16a34a", "#0ea5e9", "#4f46e5", "#db2777"];


export function SwatchColorPicker() {
  const [color, setColor] = React.useState("#0ea5e9");


  return <ColorPickerPanel value={color} onChange={setColor} swatches={BRAND} />;
}

Overview

Color Picker is a React and Tailwind CSS color picker, in Next.js or any React app, with a saturation and brightness canvas, hue and opacity rails, and HEX, RGB, or HSL fields behind one format button. ColorPicker opens it in a Base UI popover from a swatch trigger, and ColorPickerPanel renders it inline. In Chromium browsers an eyedropper button samples any pixel on screen through the EyeDropper API, and swatches add one click presets. The canvas and rails work as keyboard sliders, with Shift for bigger steps. onChange returns a hex string, eight digits long once opacity drops below full.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add color-picker

Usage

Import ColorPicker from @/components/wensity/color-picker and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";


import * as React from "react";
import { ColorPicker } from "@/components/wensity/color-picker";


export function ColorPickerDemo() {
  const [color, setColor] = React.useState("#1d6fe8");


  return <ColorPicker value={color} onChange={setColor} />;
}

Props

PropTypeDefaultDescription
valuestring-Controlled color as a hex string, 6 or 8 digits.
defaultValuestring"#3b82f6"Initial color when uncontrolled.
onChange(hex: string) => void-Fires on every committed change with a hex string.
format"hex" | "rgb" | "hsl""hex"Format the fields row starts in. The toggle cycles all three.
alphabooleanfalseAdds the opacity rail and emits 8 digit hex below full opacity.
eyedropperbooleantrueShows the screen eyedropper where the browser supports it.
swatchesstring[]-Preset hex colors rendered as a palette under the fields.
disabledboolean-Disables every control in the picker.
showValuebooleantrueRenders the hex value beside the swatch in the trigger.
side"top" | "right" | "bottom" | "left""bottom"Side the popover panel opens on.
align"start" | "center" | "end""start"Alignment of the panel against the trigger.
openboolean-Controlled open state of the popover.
defaultOpenboolean-Initial open state when uncontrolled.
onOpenChange(open: boolean) => void-Called when the popover opens or closes.

Related primitives

Related components

  • Text Spectrum component preview

    Text Spectrum

    An animated multi-stop color wash that drifts endlessly through headlines.

  • Aurora Background component preview

    Aurora Background

    Aurora background of blurred light on Framer Motion, with grain that kills banding.

  • Gradient Stripes component preview

    Gradient Stripes

    A brand gradient sliced into glowing stripes that rise toward the pointer.

  • Color Archive Scroll component preview

    Color Archive Scroll

    An endless project list that repaints the whole stage in the active row's color, with a preview card you can drag.