ColorPicker component · Kition Tessera

Playground

Props

disabled

What is shown

import { ColorPicker } from '@kition/tessera-ui'
import { useState } from 'react'

const [color, setColor] = useState([86,69,212])

<ColorPicker value={color} onChange={setColor} />

Keyboard

Keys	What they do
`Arrows (on the square)`	Change saturation (Left, Right) and brightness (Up, Down); with Shift, in larger steps.
`Up, Down (on the hue strip)`	Raise or lower the hue; with Shift, in larger steps.
`Enter, Escape (in the hex field)`	Commit the typed colour, or put the old one back.

Examples

Pick a colour

#5645d4

color-picker.tsx

import { useState } from 'react'
import { ColorPicker, rgbToHex, type RGB } from '@kition/tessera-ui'

export default function Demo() {
  const [rgb, setRgb] = useState<RGB>([86, 69, 212])
  return (
    <div className="demo-row" style={{ alignItems: 'flex-start' }}>
      <div style={{ width: 240 }}>
        <ColorPicker value={rgb} onChange={(value) => setRgb(value)} />
      </div>
      <div className="demo-swatch" style={{ background: rgbToHex(rgb) }}>{rgbToHex(rgb)}</div>
    </div>
  )
}

Props

ColorPicker

Prop	Type	Default	Description
`value`required	`RGB`	—
`onChange`required	`(rgb: RGB, final: boolean) => void`	—	Called on every pointer move and arrow key (`final: false` mid-drag, one `final: true` on release or key).
`disabled`	`boolean`	—
`testId`	`string`	`'color-picker'`
`uiId`	`string`	—	A Kit UI id when the picker is a declared element.

Used in

3 of Kition's 16 kits use this component.

Cube
Film
Photo