Forms

Color Picker

Designer-grade color picker. Saturation × value pad, hue slider, alpha track with checkerboard, format tabs for hex, rgb, and hsl, one-click pills for currentColor, transparent, and inherit, recent-colors strip, and live WCAG contrast badges. Controlled. Emits a CSS color string: #rrggbb, #rrggbbaa, or one of the special keywords.

Source

Preview

GitHub

import { ColorPicker } from '@brika/clay/components/color-picker';
import { useState } from 'react';

/** Default picker, full chrome, controlled. */
export default function ColorPickerDefaultDemo() {
  const [color, setColor] = useState('#3b82f6');
  return <ColorPicker value={color} onChange={setColor} />;
}

01 Installation

Install

Pull Color Picker from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { ColorPicker } from "@brika/clay";

tsxGranular1 line

import { ColorPicker } from "@brika/clay/components/color-picker";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxColor Picker.tsx8 lines

import { ColorPicker } from '@brika/clay/components/color-picker';
import { useState } from 'react';

/** Default picker, full chrome, controlled. */
export default function ColorPickerDefaultDemo() {
  const [color, setColor] = useState('#3b82f6');
  return <ColorPicker value={color} onChange={setColor} />;
}

03 Examples

Color Picker, every way

currentColor

`currentColor` keyword, the trigger swatch picks up the surrounding text color.

GitHub

import { Button } from '@brika/clay/components/button';
import {
  ColorPicker,
  ColorPickerSwatch,
} from '@brika/clay/components/color-picker';
import { useState } from 'react';

/**
 * `currentColor` keyword, the trigger swatch picks up the surrounding text color.
 * @title currentColor
 */
export default function ColorPickerCurrentColorDemo() {
  const [color, setColor] = useState('currentColor');
  return (
    <div className="flex items-start gap-4 text-blue-600 dark:text-blue-400">
      <Button variant="outline" className="gap-2 font-mono">
        <ColorPickerSwatch value={color} />
        {color}
      </Button>
      <ColorPicker value={color} onChange={setColor} />
    </div>
  );
}

In a field

Inside a `<Field>` with a label, the form-pattern usage.

GitHub

import { Button } from '@brika/clay/components/button';
import {
  ColorPicker,
  ColorPickerSwatch,
} from '@brika/clay/components/color-picker';
import { Field, FieldLabel } from '@brika/clay/components/field';
import { Popover, PopoverContent, PopoverTrigger } from '@brika/clay/components/popover';
import { useState } from 'react';

/**
 * Inside a `<Field>` with a label, the form-pattern usage.
 * @title In a field
 */
export default function ColorPickerInFieldDemo() {
  const [color, setColor] = useState('#f59e0b');
  return (
    <Field>
      <FieldLabel>Brand color</FieldLabel>
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline" className="w-full justify-start gap-2 font-mono">
            <ColorPickerSwatch value={color} />
            {color}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" sideOffset={6}>
          <ColorPicker
            value={color}
            onChange={setColor}
            specialKeywords={[]}
            showContrast={false}
          />
        </PopoverContent>
      </Popover>
    </Field>
  );
}

Inside a popover, with a `<Button>` trigger that previews the value.

GitHub

import { Button } from '@brika/clay/components/button';
import {
  ColorPicker,
  ColorPickerSwatch,
} from '@brika/clay/components/color-picker';
import { Popover, PopoverContent, PopoverTrigger } from '@brika/clay/components/popover';
import { useState } from 'react';

/**
 * Inside a popover, with a `<Button>` trigger that previews the value.
 * @title In a popover
 */
export default function ColorPickerInPopoverDemo() {
  const [color, setColor] = useState('#10b981');
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" className="gap-2 font-mono">
          <ColorPickerSwatch value={color} />
          {color}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" sideOffset={6}>
        <ColorPicker value={color} onChange={setColor} />
      </PopoverContent>
    </Popover>
  );
}

No alpha

Opaque picker, alpha controls and the alpha column are hidden.

GitHub

import { ColorPicker } from '@brika/clay/components/color-picker';
import { useState } from 'react';

/**
 * Opaque picker, alpha controls and the alpha column are hidden.
 * @title No alpha
 */
export default function ColorPickerNoAlphaDemo() {
  const [color, setColor] = useState('#ef4444');
  return <ColorPicker value={color} onChange={setColor} showAlpha={false} />;
}

No special pills

Without the special-keyword pills, useful when the slot must be a real color.

GitHub

import { ColorPicker } from '@brika/clay/components/color-picker';
import { useState } from 'react';

/**
 * Without the special-keyword pills, useful when the slot must be a real color.
 * @title No special pills
 */
export default function ColorPickerNoSpecialDemo() {
  const [color, setColor] = useState('#a855f7');
  return <ColorPicker value={color} onChange={setColor} specialKeywords={[]} />;
}

Recent colors

Recent-colors strip with a tiny in-memory store, plus a "Save" button.

GitHub

import { Button } from '@brika/clay/components/button';
import { ColorPicker } from '@brika/clay/components/color-picker';
import { useState } from 'react';

/**
 * Recent-colors strip with a tiny in-memory store, plus a "Save" button.
 * @title Recent colors
 */
export default function ColorPickerRecentDemo() {
  const [color, setColor] = useState('#f97316');
  const [recent, setRecent] = useState<string[]>(['#0ea5e9', '#22c55e', '#facc15']);
  const save = () =>
    setRecent((prev) =>
      [color, ...prev.filter((v) => v.toLowerCase() !== color.toLowerCase())].slice(0, 12)
    );
  return (
    <div className="flex flex-col gap-3">
      <ColorPicker
        value={color}
        onChange={setColor}
        recentColors={recent}
        onAddRecent={(c) =>
          setRecent((prev) =>
            [c, ...prev.filter((v) => v.toLowerCase() !== c.toLowerCase())].slice(0, 12)
          )
        }
      />
      <div className="flex justify-end">
        <Button size="sm" onClick={save}>
          Save to recents
        </Button>
      </div>
    </div>
  );
}

04 Accessibility

Accessibility

The saturation/value pad and hue slider expose role="slider" with aria-valuetext so screen readers announce the current position; both also accept arrow-key navigation.
Each numeric input field is labelled (R / G / B / A or H / S / L / A) and reflects the current value; editing one commits to the same color and updates the others.
Eyedropper is hidden when window.EyeDropper is unavailable; consumers should not assume it is always present.

05 Tokens 13 theme-overridable

Theme tokens

Every CSS variable Color Picker reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Color Picker without touching component code.

Color Picker tokens

13 tokens

ColorFill, border, and text colors.5

--color-picker-surface-containercolorvar(--popover)
components.colorPicker.surfaceContainer
Background of the picker panel.
--color-picker-surface-labelcolorvar(--popover-foreground)
components.colorPicker.surfaceLabel
Default foreground inside the picker panel.
--color-picker-bordercolorvar(--border)
components.colorPicker.border
Color of the panel and inner control borders.
--color-picker-markercolor#ffffff
components.colorPicker.marker
Ring color around the sat/val pad cursor and slider thumbs. Defaults to white so the marker is visible over both light and dark colors.
--color-picker-checkercolorvar(--muted)
components.colorPicker.checker
Color of the dark cells in the alpha-track checkerboard. The light cells are white.

GeometrySizes, lengths, and corner radii.3

--color-picker-pad-radiusradius0.5rem
components.colorPicker.padRadius
Corner radius of the saturation/value pad. Set to `0` for square / brutalist looks.
--color-picker-track-radiusradius9999px
components.colorPicker.trackRadius
Corner radius of the hue and alpha slider tracks and their markers. Defaults to a full pill; set lower for square / brutalist looks.
--color-picker-radiusradiusvar(--radius-surface)
components.colorPicker.radius
ColorPicker panel corner radius.

BorderBorder width and style.2

--color-picker-border-widthborder-width1px
components.colorPicker.borderWidth
Border width on the color-picker. Set non-zero for outline-style variants.
--color-picker-border-styleborder-stylesolid
components.colorPicker.borderStyle
Border style on the color-picker (`solid`, `dashed`, `double`, `none`).

ElevationDrop shadow and depth.1

--color-picker-shadowshadowvar(--shadow-overlay)
components.colorPicker.shadow
ColorPicker panel elevation.

MotionAnimation duration and easing.2

--color-picker-durationdurationvar(--motion-standard-duration)
components.colorPicker.duration
Transition duration for color-picker state changes.
--color-picker-easingeasingvar(--motion-standard-easing)
components.colorPicker.easing
Transition easing for color-picker state changes.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.colorPicker, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "colorPicker": {
      "radius": "var(--radius-surface)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-color-picker-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Color Picker. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<ColorPicker />

10 props

onChange*
(next: string) => void
No description.
value*
string
No description.
className
string
No description.
onAddRecent
(value: string) => void
Called when the user clicks the swatch to save its value to recents.
onClose
() => void
Render an "✕" close button on the right edge of the header.
recentColorsdefault []
readonly string[]
Recently-picked colors shown beneath the inputs.
showAlphadefault true
boolean
Defaults to true. Set false for opaque-only pickers.
showContrastdefault true
boolean
Defaults to true.
showEyedropperdefault true
boolean
Defaults to true. Auto-hidden when window.EyeDropper is unavailable.
specialKeywordsdefault SPECIAL_KEYWORDS
readonly SpecialKeyword[]
Defaults to the full set; pass [] to hide the special pills.

<RecentStrip />

2 props

colors*
readonly string[]
No description.
onPick*
(value: string) => void
No description.

<SpecialPills />

3 props

activeSpecial*
Lowercase<SpecialKeyword> | null
No description.
keywords*
readonly SpecialKeyword[]
No description.
onToggle*
(keyword: SpecialKeyword) => void
No description.