Shadcn Color Picker: Area, Sliders, OKLCH Fields and Swatches

Browse 15 shadcn color picker components with a saturation area, hue, opacity and channel sliders, a hue wheel, HEX to OKLCH fields, preset swatches and an eye dropper.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Brand, accent and theme token settings kept as a hex, rgb or oklch string
Label, text and highlight colors chosen from a fixed palette of named presets
Design and drawing tools: fill and stroke inspectors, brush pickers, contrast checks and shade scales

When not to use

A whole settings, profile or data entry screen with many fields and a save bar: use the Form blocks
A full document writing surface with a formatting toolbar, lists and links: use the Rich Text Editor blocks

Agent notes

ColorPicker renders no wrapper element, so its children lay out in the parent; className on it styles only the trigger it draws when given no children
A value passed in any syntax parseColor reads is accepted, but the next change comes back written in the root format
Without alpha, opacity in a passed value is ignored on screen and every value the picker emits is opaque

Markdownhttps://reui.io/components/color-picker.md

MCPget_component("color-picker")

Installnpx shadcn@latest add @reui/color-picker

Full index for agents:llms.txtReUI MCP setup

Shadcn Color Picker: Pick, Type and Convert a Color

ReUI Color Picker is a custom shadcn component for choosing a color from a saturation area and gradient sliders, typing one in, or picking a preset. It is not part of the base shadcn/ui library. It is built on the shadcn Button, Input Group, Popover and Dropdown Menu, and does its own color math with no color library.

The value is a CSS string in the format you choose: hex by default, or rgb(), hsl(), hsb() or oklch(), with alpha when you allow it. The picker keeps the channels a color was edited in, so the hue of a gray survives and a Tailwind v4 OKLCH color outside sRGB round-trips unchanged.

The examples cover the places a color picker actually lands: a brand color field, label colors from a fixed palette, a --primary theme token tuned in OKLCH, text and highlight colors in an editor toolbar, and a design inspector. Others check WCAG contrast, generate a 50 to 950 brand scale and validate a required form field.

What is Shadcn Color Picker?

A color picker turns a color into a value you can store without asking people to know hex codes. Shadcn Color Picker is 17 composable parts and a useColorPicker hook. With no children the root renders an outline trigger and a popover holding a saturation area, an eye dropper, a hue slider and format fields, ColorPickerPanel gives an always-open picker, and ColorPickerInput gives a field people can type any CSS color into.

Every part reads the same value, so a layout is a choice of parts: swatches alone for a fixed palette, OKLCH lightness, chroma and hue sliders for a theme editor, vertical tracks beside the area for a compact inspector, or a hue ring around the area.

Formats, alpha and OKLCH

format sets how the value is written, and the fields can show any of the 5 formats with a menu that previews each one, without changing what your code receives. alpha adds an opacity slider and field; without it the value is always opaque.

OKLCH sliders follow perceived lightness, so a theme scale built from them stays even. A color outside sRGB keeps its channels in oklch() output and is shown as the closest sRGB color, found by lowering chroma at the same lightness and hue, and isColorInSrgb tells you when that happens.

Shadcn Color Picker Features

Area, sliders and wheel. A saturation and brightness area, horizontal or vertical sliders for any channel in HSB, HSL, RGB or OKLCH, and a hue ring that holds the area inside it.
5 formats. HEX, RGB, HSL, HSB and OKLCH for the value and for the joined channel fields, with an opacity field when alpha is on.
Typable input. ColorPickerInput reads hex with or without #, rgb(), hsl(), oklch(), and any CSS color the browser knows, named colors and lab() included.
Swatches. Preset colors as a keyboard listbox in square or round chips, with the selected one checked in black or white, whichever contrasts more.
Commit after a drag. onValueChange follows every move, and onValueCommit fires once when a drag ends, a key is pressed or a swatch is picked, so saves and history stay quiet.
Eye dropper and copy. Sample a color from anywhere on screen where the browser has an EyeDropper, and copy the value in any format.
Native form field. Give the root a name and the value submits with a plain form or a server action, with required and a form reset that restores the default.
Every shadcn style. Thumbs, tracks and swatches follow the shadcn slider and checkbox shapes in all 8 styles, from round in nova to square in lyra.

Accessibility and keyboard

The area, the sliders and the wheel are sliders to assistive tech. The area's value text names both channels and the color, Saturation 72%, Brightness 85%, vibrant blue, because a 2D control has no ARIA role of its own, and arrow keys move it, with Shift for steps of 10.

Swatches are a listbox with one tab stop: arrow keys move across and between rows in the order they appear, and each swatch is announced by its label or a color name rather than a hex code. A mouse click never paints the keyboard focus ring.

Wrap the picker in Shadcn Field for a label, a description and an error, and pass the label's id as aria-labelledby so the trigger reads both the label and the value. ColorPickerInput and the channel fields are built on Shadcn Input Group, and the picker opens in Shadcn Popover.

The format menu is a Shadcn Dropdown Menu with a preview of the color in each format. For a label or a tag, a Shadcn Badge colored with getContrastRatio picking black or white text stays readable on any swatch.

The Settings blocks are the assembled version of the screens a brand color lives on, 16 Pro layouts for workspace, appearance and account preferences. The Color Picker docs list every part, prop and helper.

Settings Blocks in ReUI Pro

The free examples above pair with 16 production ready settings blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Settings (16 blocks)Settings and preferences pages with grouped options, toggles, and configuration panels.

Browse all Application blocks

Frequently Asked Questions

How is this different from a native input type=color?

The native control's popup is drawn by the browser, so it looks different in each one, cannot be styled, and writes only 6-digit hex. Color Picker renders your shadcn theme everywhere, adds alpha, OKLCH, swatches and typed input, and its default value is the same lowercase hex, so swapping one for the other does not change what your server receives.

Does it work with Tailwind v4 and shadcn OKLCH themes?

Yes. Set format to oklch and the value is written as oklch(62.3% 0.214 259.815), the form Tailwind v4 palettes use. OKLCH sliders edit lightness, chroma and hue directly, and a color outside sRGB keeps its exact channels, as the theme token example shows.

How do I save only when someone stops dragging?

Use onValueCommit. onValueChange fires on every pointer move so the preview stays live, while onValueCommit fires once per interaction: on release, on each key press, and when a field, a swatch or the eye dropper changes the color.

Can I limit people to a fixed palette?

Yes. Render ColorPickerSwatches on its own with your colors and no area, as the preset swatches example does for label colors, and add a trigger that opens the full picker only if custom colors are allowed.

How do I send the color to my server?

For a plain form or a server action, give ColorPicker a name and read that field from FormData; an empty picker submits an empty string, so required works. With a form library, bind value and onValueChange, which receives the new value or null when cleared.

Which browsers have the eye dropper?

ColorPickerEyeDropper uses the browser's EyeDropper API, which Chromium browsers support. Where it is missing, Firefox and Safari among them, the button renders nothing, so the panel never shows a control that cannot work.

Is it safe to server render in Next.js?

Yes. The value is a plain string, nothing reads the clock or the window while rendering, and the eye dropper's support check renders nothing on the server and the first client pass, so both produce the same markup.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.