Color Picker

A button-triggered color picker with OKLCH color space support, multiple format inputs, and precise color manipulation controls. The component renders as a color button that opens a popover with the full color picker interface.

Primary Color

Choose your primary theme color

Brand Color

Main brand color

Accent Color

Accent color for highlights

Installation

CLI

bash

npx fivui add color-picker

Manual

The component uses the Button, Input, Label, Popover, Slider, and Tabs components.

Make sure you have the color utility functions in your project for OKLCH color space conversions.

Usage

Basic Usage

tsx

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

export function BasicColorPicker() {
  const [color, setColor] = React.useState("oklch(0.5 0.2 180)")

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium">Choose Color</label>
        <ColorPicker
          value={color}
          onChange={setColor}
        />
      </div>
      <p className="text-xs text-muted-foreground">Select your preferred color</p>
    </div>
  )
}

Advanced Configuration

tsx

export function AdvancedColorPicker() {
  const [color, setColor] = React.useState("oklch(0.7 0.15 280)")

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium">Brand Color</label>
        <ColorPicker
          value={color}
          onChange={setColor}
          
          // Format configuration
          formats={['oklch', 'hex', 'rgb']}
          defaultFormat="oklch"
          
          // UI configuration
          showSliders={true}
          showPreview={true}
          
          // Custom styling
          className="w-full"
        />
      </div>
      <p className="text-xs text-muted-foreground">Choose your brand color</p>
    </div>
  )
}

Examples

Full Featured Color Picker

Complete color picker with all features enabled - OKLCH sliders, multiple formats, and preview.

Theme Color

Full-featured color picker with all controls

tsx

<div className="space-y-2">
  <div className="flex items-center justify-between">
    <label className="text-sm font-medium">Theme Color</label>
    <ColorPicker
      value={color}
      onChange={setColor}
      formats={['oklch', 'hex', 'rgb']}
      defaultFormat="oklch"
      showSliders={true}
      showPreview={true}
    />
  </div>
  <p className="text-xs text-muted-foreground">Full-featured color picker with all controls</p>
</div>

Minimal Color Picker

Simplified color picker with limited formats and no sliders for quick color selection.

Quick Color

Simple color selection

tsx

<div className="space-y-2">
  <div className="flex items-center justify-between">
    <label className="text-sm font-medium">Quick Color</label>
    <ColorPicker
      value={color}
      onChange={setColor}
      formats={['hex']}
      defaultFormat="hex"
      showSliders={false}
      showPreview={true}
    />
  </div>
  <p className="text-xs text-muted-foreground">Simple color selection</p>
</div>

Theme Color System

Multiple color pickers for building a complete theme system.

Light Background

Light theme background

Dark Background

Dark theme background

tsx

const [backgroundColors, setBackgroundColors] = React.useState({
  light: "oklch(1 0 0)",
  dark: "oklch(0.145 0 0)"
})

return (
  <div className="grid gap-4 md:grid-cols-2">
    <ColorPicker
      label="Light Background"
      value={backgroundColors.light}
      onChange={(value) => setBackgroundColors(prev => ({ ...prev, light: value }))}
      description="Light theme background"
      formats={['oklch', 'hex']}
      showSliders={true}
      showPreview={true}
    />
    <ColorPicker
      label="Dark Background"
      value={backgroundColors.dark}
      onChange={(value) => setBackgroundColors(prev => ({ ...prev, dark: value }))}
      description="Dark theme background"
      formats={['oklch', 'hex']}
      showSliders={true}
      showPreview={true}
    />
  </div>
)

Format-Specific Pickers

Color pickers configured for specific color formats.

tsx

// OKLCH Only
<ColorPicker
  formats={['oklch']}
  defaultFormat="oklch"
  showSliders={true}
/>

// HEX Only  
<ColorPicker
  formats={['hex']}
  defaultFormat="hex"
  showSliders={false}
/>

// RGB Only
<ColorPicker
  formats={['rgb']}
  defaultFormat="rgb"
  showSliders={false}
/>

Features

OKLCH Color Space

Advanced color manipulation using OKLCH color space with separate controls for Lightness, Chroma, and Hue.

Multiple Formats

Support for OKLCH, HEX, and RGB color formats with seamless conversion between them.

Live Preview

Real-time color preview with visual feedback as you adjust color values.

Precise Control

Fine-grained control over color properties with smooth sliders and gradient previews.

Configurable UI

Customizable interface - show/hide sliders, preview, and format tabs based on your needs.

Accessibility

Built with accessibility in mind, including proper ARIA labels and keyboard navigation.

API Reference

ColorPicker

Prop	Type	Default	Description
`value`	`string`	-	Current color value (OKLCH format)
`onChange`	`(value: string) => void`	-	Callback when color value changes
`className`	`string`	-	Additional CSS classes for the button
`formats`	`Array<'hex' \| 'rgb' \| 'oklch'>`	['oklch', 'hex', 'rgb']	Available color format tabs
`defaultFormat`	`'hex' \| 'rgb' \| 'oklch'`	'oklch'	Default format tab to show
`showSliders`	`boolean`	true	Show/hide OKLCH sliders
`showPreview`	`boolean`	true	Show/hide color preview
`size`	`'sm' \| 'default' \| 'lg'`	'default'	Size of the color picker button
`disabled`	`boolean`	false	Whether the button is disabled

External Documentation

OKLCH Color Space MDN OKLCH Documentation