Color picker

Import

import { ColorPicker, ColorPickerPopover, ColorSwatch } from "@booleanpress/ui/color-picker"

Usage

import { ColorPicker, ColorPickerPopover } from "@booleanpress/ui/color-picker"

export function ButtonColour() {
  return (
    <>
      <ColorPicker defaultValue="#276def" aria-label="Button colour" />
      <ColorPickerPopover defaultValue="#276def" aria-label="Link colour" />
    </>
  )
}

Examples

import { ColorPicker } from "@booleanpress/ui/color-picker"

export default function ColorPickerBasic() {
  return <ColorPicker defaultValue="#276def" aria-label="Button colour" />
}

import { ColorPickerPopover } from "@booleanpress/ui/color-picker"

export default function ColorPickerInPopover() {
  return (
    <div className="flex items-center gap-3">
      <ColorPickerPopover defaultValue="#ff0000" aria-label="Accent colour" />
      <span className="text-sm/normal text-foreground">Accent colour</span>
    </div>
  )
}

import { ColorPicker } from "@booleanpress/ui/color-picker"

export default function ColorPickerVertical() {
  return <ColorPicker orientation="vertical" alpha defaultValue="#ff0000" aria-label="Header colour" className="max-w-sm" />
}

import { useState } from "react"
import { ColorPicker } from "@booleanpress/ui/color-picker"

export default function ColorPickerControlled() {
  const [colour, setColour] = useState("#0f766e")
  const [saved, setSaved] = useState("#0f766e")

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <p className="text-center font-mono text-sm/normal text-muted-foreground">
        onValueChange: {colour}
        <br />
        onValueCommit: {saved}
      </p>
      <ColorPicker value={colour} onValueChange={setColour} onValueCommit={setSaved} aria-label="Email header colour" />
    </div>
  )
}

import { ColorPicker } from "@booleanpress/ui/color-picker"

const BRAND = [
  { value: "#020617", label: "Ink" },
  { value: "#2563eb", label: "Mailer blue" },
  { value: "#0f766e", label: "Teal" },
  { value: "#16a34a", label: "Delivered green" },
  { value: "#ca8a04", label: "Queued amber" },
  { value: "#dc2626", label: "Bounce red" },
  { value: "#9333ea", label: "Violet" },
]

export default function ColorPickerSwatches() {
  return <ColorPicker defaultValue="#2563eb" swatches={BRAND} aria-label="Brand colour" />
}

import { ColorPicker } from "@booleanpress/ui/color-picker"

export default function ColorPickerAlpha() {
  return <ColorPicker alpha defaultValue="#2563eb99" aria-label="Overlay colour" />
}

import { ColorPicker } from "@booleanpress/ui/color-picker"

export default function ColorPickerDisabled() {
  return <ColorPicker disabled defaultValue="#64748b" aria-label="Locked theme colour" />
}

Accessibility

Semantics

The picker is a role="group". The area follows React Aria's ColorArea: its thumb holds two visually hidden range inputs, saturation (across) and brightness (up), so each is a slider with its own name and value text. The hue and alpha sliders are range inputs too, so touch screen readers can swipe them. The hex field is a text input; the swatches are a radio group.

Labels

Name the picker with aria-label or aria-labelledby ("Colour picker" by default). The sliders are named "Saturation", "Brightness", "Hue" and "Alpha", the field "Hex colour" and the swatches "Preset colours" (the provider strings saturation, brightness, hue, alpha, hexColor and colorSwatches); values are read as percentages and degrees in the provider's locale. A swatch reads its label, else its hex.

Focus

Tab moves through the area (one stop: the input used last, saturation at first), the hue slider, the alpha slider, the hex field and the swatches (one stop). A thumb shows the 1px --ring outline 2px outside while it has keyboard focus. In a popover, focus moves into the picker on open and back to the swatch button on close.

Known limits

• Colour is chosen by sight. The hex field and the swatches' names are the ways to choose an exact colour without it.
• There is no eyedropper and no other format than hex (RGB, HSL); convert the hex value yourself.
• In right-to-left pages the area and the horizontal sliders run from right to left, and the arrow keys follow them.

Keyboard

API

Theming

The tokens its classes read. Change their values in your theme, and it follows.