Components
Color Picker
Pick a colour by eye or by hex: a saturation and brightness area, hue and opacity, and your own swatches. With hexToOklch to give a colour to the theme engine.
Import
import { ColorPicker, ColorPanel, hexToOklch, oklchToHex } from '@rinzai/zen';Examples
Swatches
With alpha, an opacity slider, and values like "#7c5cff99". Swatches are yours, such as your brand's colours.
Inline
ColorPanel is the picker's panel on its own, for a sidebar or an inspector. onValueCommit fires once a change is made, the moment to save.
Saved: #ef5a7a
Accent
hexToOklch gives a picked colour's hue to the theme engine, which keeps it readable in dark and light.
API reference
<ColorPicker>
A field showing a colour and its hex that opens a ColorPanel: drag or use the arrow keys in the area, slide the hue (and opacity, with alpha), type a hex or pick a swatch. Works in a Field like any input.
| Prop | Type | Default |
|---|---|---|
onChangeRequiredEvery change, while dragging too. | (value: string) => void | — |
valueRequired"#rrggbb", or "#rrggbbaa" with | string | — |
alphaOffer opacity; values may then be "#rrggbbaa". | boolean | — |
onValueCommitOnce a change is made: let go of the area or a slider, a key, a hex entered, a swatch picked. | ((value: string) => void) | — |
swatchesColours to pick in one press, such as your theme's. | ColorSwatch[] | — |
<ColorPanel>
Everything ColorPicker opens: a saturation and brightness area, hue and alpha sliders, the hex, and your swatches. Use it inline, or in a popup of your own. Values are hex: "#rrggbb", or "#rrggbbaa" with alpha.
| Prop | Type | Default |
|---|---|---|
onChangeRequiredEvery change, while dragging too. | (value: string) => void | — |
valueRequired"#rrggbb", or "#rrggbbaa" with | string | — |
alphaOffer opacity; values may then be "#rrggbbaa". | boolean | false |
onValueCommitOnce a change is made: let go of the area or a slider, a key, a hex entered, a swatch picked. | ((value: string) => void) | — |
swatchesColours to pick in one press, such as your theme's. | ColorSwatch[] | — |