ColorPicker

<ColorPicker>TailwindCSS Modules

Untitled UI–style solid color pickers (spectrum, minimal, swatches, brand/gray, palette) plus a separate GradientPicker for multi-stop linear/radial gradients, and standalone hue/alpha sliders.

InstallationColoxo CLI

npx coloxo add color-picker --style coloxo-css

ES Module ImportPlayground / npm package

import { ColorPicker, GradientPicker, ColorHueSlider, ColorAlphaSlider } from '@coloxo/ui';

Design Tokens:

--cx-brand-600: #2348FF--cx-bg-primary: #FFFFFF--cx-border-primary--cx-radius-xl: 12px

1. Variant Matrix

ColorPicker variants for solid colors; GradientPicker is a separate component type.

Solid	Gradient	Swatches	Brand	Minimal	Palette
Inline	Hex	Angle Stop % Hex `linear-gradient(90deg, #2348ff 0%, #db2777 100%)`	Hex	Hex	Hex	brand gray red orange amber yellow lime green teal cyan blue indigo violet purple fuchsia pink rose Hex

2. Control heights (Sizes)

Trigger field heights match other Coloxo form controls (sm / md / lg).

Sizes

size="sm"

Height: 36px (2.25rem)

Dense toolbars, table cells

size="md"DEFAULT

Height: 40px (2.5rem)

Standard forms & settings

size="lg"

Height: 44px (2.75rem)

Hero brand / theme panels

3. Features

Standalone GradientPicker, hue/alpha sliders, saved swatch sizes, format switching, and eye dropper.

GradientPicker (separate type)

Hero wash

linear-gradient(90deg, #2348ff 0%, #db2777 100%)

Hue slider

Transparency slider

Saved swatches — small

Hex

Saved swatches — medium

Hex

Popover trigger (field)

Brand color

Opens the solid spectrum picker.

4. Interactive Props Configurator

Type

Size

Format

Show alpha

Eye dropper

Inline panel

Visual Render CanvasTYPE: SOLID | SIZE: MD

Brand color

Hex

Selected: #2348ff

tsx

1<ColorPicker2  value="#2348ff"3  onChange={setColor}4  inline5  label="Brand color"6/>

5. Dark theme

Panel surfaces, borders, and inputs follow `[data-cx-theme]` tokens.

Hex

6. Enterprise layout compositions

Typical product placements — theme settings and tag / category colors.

Workspace theme

Brand accent used across the console

Accent color

Label color

Pick from saved swatches

Tag color

Accessibility

React Aria primitives

Color area, sliders, and swatch grid use React Aria keyboard and pointer interactions with proper ARIA roles.

Focus rings

Thumbs, swatches, and format fields show Coloxo brand focus rings for keyboard users.

Eye dropper

Chromium EyeDropper API when available; the control is omitted in unsupported browsers.

Props

Name	Type	Default	Description
value / defaultValue	string	#2348ff	CSS / hex color string.
onChange	(hex: string, color: Color) => void	—	Color change handler.
variant	"solid" \| "minimal" \| "swatches" \| "brand" \| "gray" \| "palette"	solid	Solid ColorPicker panel layout. Use GradientPicker for gradients.
size	"sm" \| "md" \| "lg"	md	Trigger field height.
swatches	string[]	—	Custom swatch list for swatches/brand/gray.
swatchSize	"sm" \| "md"	md	Saved swatch cell size.
showAlpha	boolean	true	Show transparency slider.
showEyeDropper	boolean	true	Chromium EyeDropper button.
format / defaultFormat	"hex" \| "rgb" \| "hsl" \| "hsb"	hex	Value input model.
inline	boolean	false	Render panel without popover.
hideTrigger	boolean	false	Panel only (use with inline).
label / description / error	ReactNode	—	FormField chrome.