Color pickers

React v2

Package-backed controlled ColorPicker for solid colors. GradientPicker and ImagePicker remain local legacy evidence and are blocked from promotion pending provenance and product requirements.

Demo

hero

Saved

Component
Picker
Value format
Swatch size
import { ColorPicker } from "@parentsquare/squarekit-react-v2/color-pickers"; <ColorPicker.Provider defaultValue="#2563EB"> <ColorPicker.Dialog> <ColorPicker /> <ColorPicker.SavedColors colors={SAVED_COLORS} /> </ColorPicker.Dialog> </ColorPicker.Provider>

In context

in-context
View in a page

Family

family
ColorPicker.Dialog
ColorPicker.Area
ColorPicker.HueSlider
ColorPicker.AlphaSlider
ColorPicker.ColorFormatSelect
ColorPicker.ColorValueInput

Saved

ColorPicker.SavedColors
ColorPicker.SwatchItem
InputCell
GradientPicker.Area
GradientPicker.Slider
GradientPicker.TypeSelect
GradientPicker.Reverse
ImagePicker.FillModeSelect
Exposure
Contrast
Saturation
Temperature
Tint
Highlights
Shadows
ImagePicker.AdjustmentSliders

Types

cells

The three pickers

Solid: ColorPicker

Stops

Gradient: GradientPicker

or drag and drop

Exposure
Contrast
Saturation
Temperature
Tint
Highlights
Shadows
Image: ImagePicker

Value formats

defaultColorFormat hex
defaultColorFormat rgb
defaultColorFormat css
defaultColorFormat hsl
defaultColorFormat hsb

Stops

GradientPicker.StopList: the sixth input, a stop row

Sizes

cells

The sheet’s seven card widths, smallest first, on one Dialog.

The cards

w-52, saved swatches, size sm
#2563EB
w-55, color swatch
w-62, saved swatches, size md
BrandTailwind CSS v4.2
Docs
w-69, brand palette
w-78, minimal picker

Saved

w-80, the solid picker, the default
Opacity

Saved

w-95, palette picker

The swatches

Saved

SavedColors size sm

Saved

SavedColors size md

Compositions

cells

The sheet’s other cards, and its six triggers over a real popover.

Cards

Saved

tabbed picker: Solid, Gradient, Image behind Tabs
GrayTailwind CSS v4.2
Docs
gray palette, with Docs and Reset
221°
hue slider card
100%
transparency slider card

Triggers and the modal

trigger: swatch sm
trigger: swatch md
trigger: swatch button
trigger: swatch button link
trigger: hex input
Color
trigger: select
modal: the palette card over a scrim

Content

cells

The saved row

Saved

onAdd: the Add button, appending the current color

Saved

no onAdd: no Add button

Saved gradients

gradients: plain buttons, inert without onSelect

Saved

sixteen swatches, wrapping to a second row

Loading

cells
Loading saved colours
saved colours row, Saved label and Add button real
Loading saved gradients
saved gradients row, no Add button
Loading saved colours
the sm row, size sm swatches
Loading image
image picker, preview loading, controls real

States

cells

Saved

swatch selected from the provider; tab for focus
input cell focus within, live: the ring turns brand
thumb: grab it, or tab to it and arrow

Stops

Remove disabled while two stops are left