Color Picker

ColorPicker chooses a colour from swatches, from three sliders, or by typing its hex. Try all three:

Chosen: #3b82f6

ColorPickerDemo.tsx

import { Paragraph, View } from '@hozo/core'
import { ColorPicker } from '@hozo/ui'
import { useState } from 'react'

export function ColorPickerDemo() {
  const [color, setColor] = useState('#3b82f6')
  return (
    <View className="w-full max-w-xs gap-3">
      <ColorPicker
        accessibilityLabel="Theme colour"
        value={color}
        onChange={setColor}
        presets={['#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#a855f7']}
      />
      <Paragraph className="text-sm text-hozo-text-body">{`Chosen: ${color}`}</Paragraph>
    </View>
  )
}

• value and onChange hold a hex string, #rrggbb. With alpha it is #rrggbbaa and there is an opacity slider.
• Three sliders, not a square. There is no accessible way to move one control in two directions at once, so hue, saturation and lightness are three ordinary sliders. Each says its value in words: “Hue, 217 degrees, blue”.
• A colour is read with a name and its hex, such as “blue, #3b82f6”, so the hex is not six digits of nothing.
• presets are swatches: a radio group that is one tab stop, moved through with the arrow keys.
• showEyeDropper adds a button that picks a colour from the screen, in browsers that have the EyeDropper API.