Playground

Customize the Color Picker properties to see different variations.

Installation

Overview

Color Picker is a versatile color picker component built upon the lightweight library react-colorful. It allows users to select colors visually or by entering values in HEX, RGB, or HSL formats. It supports alpha channel selection, preset color palettes, and customizable input formats. Built as a popover for easy integration.

Basic Usage

Examples

Controlled Component

Manage the color state outside the component.

Uncontrolled Component with Default Color

Set an initial color without controlling its state externally.

Alpha Channel

Enable the alpha channel for transparency selection.

When withAlpha is true, HEX values will include the alpha component (e.g., #RRGGBBAA). RGB and HSL inputs will also show an "Alpha" field.

Customizing Input Formats (showFormat)

Control which color model input fields (HEX, RGB, HSL) are available.

If only one format is enabled (e.g., showFormat={{ hex: true }}), the toggle group for format selection will be hidden. If showFormat results in no formats being explicitly enabled, "HEX" will be shown as a fallback.

Preset Colors (presetColors)

Provide an array of HEX strings for quick color selection.

Custom Trigger

Replace the default button trigger with a custom element.

"Add New Color" Action (onAddColor)

Utilize the onAddColor callback for custom actions.

The "Add New Color" button appears at the bottom of the popover if onAddColor is provided.

Form Integration

Color Utilities

Alongside the ColorPicker component, several utility functions for color conversion are also exported. These can be useful for manual color manipulations elsewhere in your application.

rgbaToHex()

Converts RGBA (Red, Green, Blue, Alpha) color values to a HEX string.

Signature:

Parameters:

• r: number The red color component (0-255).
• g: number The green color component (0-255).
• b: number The blue color component (0-255).
• a?: number (optional) The alpha (opacity) component (0-1). Defaults to 1 (fully opaque).

Returns:

• (string): An uppercase HEX color string with a leading #.
• If alpha is 1 or undefined, a 6-digit HEX string is returned (e.g.,"#RRGGBB").
• If alpha is less than 1, an 8-digit HEX string is returned (e.g.,"#RRGGBBAA").

Example:

hexToRgba()

Converts a HEX color string to an RGBA object.

Signature:

Parameters:

• hex: string | null | undefined The HEX color string. It can be 3-digit (#RGB), 4-digit (#RGBA), 6-digit (#RRGGBB), or 8-digit (#RRGGBBAA). The leading # is optional. The function is case-insensitive.

Returns:

• (RgbaColor | null): An object representing the RGBA color, ornull if the input HEX string is invalid. The RgbaColor object has the following structure:
  interface RgbaColor { r: number; // 0-255 g: number; // 0-255 b: number; // 0-255 a: number; // 0-1 }

Example:

hexToHsla()

Converts a HEX color string to an HSLA (Hue, Saturation, Lightness, Alpha) object.

Signature:

Parameters:

• hex: string | null | undefined The HEX color string. It can be 3, 4, 6, or 8 digits, with or without a leading #. Case-insensitive.

Returns:

• (HslaColor | null): An object representing the HSLA color, or nullif the input HEX string is invalid. The HslaColor object has the following structure:
  interface HslaColor { h: number; // 0-360 (degrees) s: number; // 0-100 (percentage) l: number; // 0-100 (percentage) a: number; // 0-1 (alpha) }

Example:

hslaToHex()

Converts HSLA (Hue, Saturation, Lightness, Alpha) color values to a HEX string.

Signature:

Parameters:

• h: number The hue component (0-360 degrees).
• s: number The saturation component (0-100, as a percentage).
• l: number The lightness component (0-100, as a percentage).
• a?: number (optional) The alpha (opacity) component (0-1). Defaults to 1 (fully opaque).

Returns:

• (string): An uppercase HEX color string with a leading #.
• If alpha is 1 or undefined, a 6-digit HEX string is returned (e.g.,"#RRGGBB").
• If alpha is less than 1, an 8-digit HEX string is returned (e.g.,"#RRGGBBAA").

Example:

Accessibility

• Label Association: Use the id prop in conjunction with a <Label htmlFor={id}> to ensure proper accessibility for screen readers and keyboard navigation in forms.
• Keyboard Navigation:
  • The PopoverTrigger (default button or custom trigger) is focusable and can be activated using Space or Enter.
  • Once the popover is open, focus is managed within it. Navigation between the color selection canvas, input fields, toggle group, and buttons follows standard keyboard patterns, largely inherited from the underlying components (Popover, Input, Button,ToggleGroup).
  • Color swatches from defaultColors are implemented as buttonelements, making them focusable and activatable with Enter orSpace.
• ARIA Attributes: Default ARIA attributes are applied by the underlying components to enhance accessibility. Thearia-label on format toggle buttons and defaultColor swatch buttons provide descriptive names for assistive technologies.

ColorPicker Props