Wensity

Color Picker

Saturation and value canvas with hue and alpha rails, a screen eyedropper, and HEX, RGB, or HSL fields in one 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} />;
}

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.