Design system

ColorPicker

Pick a color by eye or by value, with OKLCH and swatches.

import { ColorPicker } from "@flinbu/seed";

In a field, and inline

Brand color

Pluto builds the ramp from it.

HEX

oklch(54.6% 0.215 262.9)

brand-500

import { ColorPicker, ColorSwatch, Field } from "@flinbu/seed";

const [color, setColor] = React.useState("#2563eb");

<div className="flex w-full max-w-xl flex-col gap-lg">
  <Field label="Brand color" hint="Pluto builds the ramp from it."><ColorPicker value={color} onValueChange={setColor} swatches={["#2563eb", "#7c3aed", "#db2777", "#ea580c", "#16a34a", "#0891b2"]} /></Field>
  <div className="flex flex-wrap items-start gap-lg">
    <ColorPicker inline value={color} onValueChange={setColor} aria-label="Brand color, inline" />
    <ColorSwatch color={color} name="brand-500" />
  </div>
</div>

Use it for

A brand color.
Any color a token points to.

Use something else for

Picking from existing tokens: use TokenInput.

Props

Prop	Type	Default	Description
`value / onValueChange`	`string`	`'#2563eb'`	Hex.
`swatches`	`(string{ color, name })[]`	–	Suggestions.
`inline`	`boolean`	`false`	Panel without the trigger.
`size / invalid / disabled`	`…`	–	Works in Field.

Accessibility

The area handle is a slider: arrows change saturation and brightness, Shift for bigger steps.
Hue is a slider; hex takes typing and pasting.