Color picker components

Powerful and customizable React color picker components built for modern applications and websites. These color pickers are built using React Aria and styled with Tailwind CSS.

Color picker example

Get the code

Saved

Installation

You can add this color picker component using our CLI or manually:

npx untitledui@latest add color-picker

Color picker examples

Below are examples and variations of this color picker component:

Color picker

Get the code

Saved

Color swatch picker

The color swatch picker provides a grid-based color selection experience with a preview area and a hex input field. This is useful when you want users to quickly pick from a predefined set of colors.

Brand swatches

Brand color swatches provide a curated palette of your brand colors based on Tailwind CSS v4.3 color variables. This is useful for design systems where users need to pick from a consistent set of brand colors.

Brand swatches

Get the code

Brand

Tailwind CSS v4.3

Gray swatches

Get the code

Gray

Tailwind CSS v4.3

Minimal picker

The minimal picker provides a compact color selection experience with just the eye dropper, hue slider, alpha slider, and color format input. This is ideal for space-constrained UIs where you need basic color picking functionality.

Hue slider

The standalone hue slider allows users to select a hue value across the full color spectrum. It displays a swatch preview of the selected color alongside the slider.

Hue slider

Get the code
259°

Transparency slider

The standalone transparency (alpha) slider allows users to control the opacity of a selected color. It displays a checkered background to visualize the transparency level.

Palette picker

The palette picker displays the full Tailwind CSS color palette in a grid layout, allowing users to select from a comprehensive range of colors. It also includes an opacity slider for fine-tuning the selected color.

Palette picker

Get the code

Opacity

Saved

API reference

Import the parts and assemble them:

import { ColorPicker } from "@/components/application/color-picker/color-picker";
 
<ColorPicker.Dialog>
    <ColorPicker.Provider>
        <ColorPicker.Area />
        <ColorPicker.EyeDropper />
        <ColorPicker.HueSlider />
        <ColorPicker.AlphaSlider />
        <ColorPicker.ColorFormatSelect />
        <ColorPicker.ColorValueInput />
        <ColorPicker.SavedColors />
    </ColorPicker.Provider>
</ColorPicker.Dialog>

ColorPicker

Compound export.

Renders a <div> element.

ColorPicker.AlphaSlider

Renders React Aria’s ColorSlider — all of its props are supported.

ColorPicker.AlphaSlider props
PropTypeDefaultDescription
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
colorSpace
"rgb""hsl""hsb"
—The color space that the slider operates in. The channel must be in this color space. If not provided, this defaults to the color space of the color or defaultColor value.
defaultValuestring | Color—The default value (uncontrolled).
idstring—The element's unique identifier.
isDisabledboolean—Whether the whole Slider is disabled.
onChange((value: Color) => void)—Handler that is called when the value changes, as the user drags.
onChangeEnd((value: Color) => void)—Handler that is called when the user stops dragging.
orientation
"horizontal""vertical"
"horizontal"The orientation of the Slider.
valuestring | Color—The current value (controlled).
Styling (5)
ColorPicker.AlphaSlider styling props
PropTypeDefaultDescription
styleStyleOrFunction<ColorSliderRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<ColorSliderRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<ColorSliderRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", ColorSliderRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
Accessibility (4)
ColorPicker.AlphaSlider accessibility props
PropTypeDefaultDescription
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring"Alpha"Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts all standard React DOM event handlers, the global HTML attributes (dir, lang, hidden, inert, translate).

ColorPicker.Area

Renders React Aria’s ColorArea — all of its props are supported.

ColorPicker.Area props
PropTypeDefaultDescription
colorSpace
"rgb""hsl""hsb"
"hsb"The color space that the color area operates in. The xChannel and yChannel must be in this color space. If not provided, this defaults to the color space of the color or defaultColor value.
defaultValuestring | Color—The default value (uncontrolled).
formstring—The <form> element to associate the ColorArea with. The value of this attribute must be the id of a <form> in the same document.
idstring—The element's unique identifier.
isDisabledboolean—Whether the ColorArea is disabled.
onChange((value: Color) => void)—Handler that is called when the value changes, as the user drags.
onChangeEnd((value: Color) => void)—Handler that is called when the user stops dragging.
valuestring | Color—The current value (controlled).
xChannel
"hue""saturation""brightness""lightness""red""green""blue""alpha"
"saturation"Color channel for the horizontal axis.
xNamestring—The name of the x channel input element, used when submitting an HTML form.
yChannel
"hue""saturation""brightness""lightness""red""green""blue""alpha"
"brightness"Color channel for the vertical axis.
yNamestring—The name of the y channel input element, used when submitting an HTML form.
Styling (5)
ColorPicker.Area styling props
PropTypeDefaultDescription
styleStyleOrFunction<ColorAreaRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<ColorAreaRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<ColorAreaRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", ColorAreaRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
Accessibility (4)
ColorPicker.Area accessibility props
PropTypeDefaultDescription
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring"Color picker"Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

ColorPicker.ColorFormatSelect

Renders Select.

ColorPicker.ColorFormatSelect props
PropTypeDefaultDescription
labelstring—Field label displayed above the input.
iconReactNode | FC—Leading icon shown in the trigger, used as a fallback when the selected item has no icon of its own. Accepts a component reference or a rendered element.
itemsSelectItemType[]—The options to render in the dropdown. When children is a function it is called once per item to render it.
popoverClassNamestring—Additional classes merged onto the dropdown popover.
hintstring—Helper text displayed below the input.
tooltipstring—Tooltip text for the help icon next to the label.
size
"sm""md""lg"
"sm"The size of the component.
hideRequiredIndicatorboolean—Whether to hide the required indicator from the label.
Props from React Aria (38)
ColorPicker.ColorFormatSelect inherited props
PropTypeDefaultDescription
onBlur((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
excludeFromTabOrderboolean—Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
allowsEmptyCollectionboolean—Whether the select should be allowed to be open when the collection is empty.
autoCompletestring—Describes the type of autocomplete functionality the input should provide if any.
defaultOpenboolean—Sets the default open state of the menu.
defaultSelectedKeyKey | null—Deprecated.The initial selected key in the collection (uncontrolled).
defaultValueKey | null—The default value (uncontrolled).
disabledKeysIterable<Key>—The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
idstring—The element's unique identifier.
isDisabledboolean—Whether the input is disabled.
isInvalidboolean—Whether the input value is invalid.
isOpenboolean—Sets the open state of the menu.
isRequiredboolean—Whether user input is required on the input before form submission.
namestring—The name of the input, used when submitting an HTML form.
onChange((value: Key | null) => void)—Handler that is called when the value changes.
onOpenChange((isOpen: boolean) => void)—Method that is called when the open state of the menu changes.
onSelectionChange((key: Key | null) => void)—Deprecated.Handler that is called when the selection changes.
placeholderstring'Select an item' (localized)Temporary text that occupies the select when it is empty.
selectedKeyKey | null—Deprecated.The currently selected key in the collection (controlled).
selectionMode"single""single"Whether single or multiple selection is enabled.
shouldCloseOnSelectboolean—Whether the Select should close when an item is selected. Defaults to true if selectionMode is single, false otherwise.
validate((value: Key) => ValidationError | true | null | undefined)—A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
validationBehavior
"native""aria"
"native"Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
valueKey | null—The current value (controlled).
styleStyleOrFunction<SelectRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<SelectRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", SelectRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring"Color format"Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts all standard React DOM event handlers, the global HTML attributes (dir, lang, hidden, inert, translate).

ColorPicker.ColorValueInput

ColorPicker.Dialog

Card container for the color picker.

Renders a <div> element.

ColorPicker.Dialog props
PropTypeDefaultDescription
classNamestring—Additional class name for the card. Useful for overriding the default fixed width.
childrenReactNode—The picker sections to render inside the card.

ColorPicker.EyeDropper

Renders Button.

ColorPicker.EyeDropper props
PropTypeDefaultDescription
isDisabledboolean—Disables the button and shows a disabled state.
isLoadingboolean—Shows a loading spinner and disables the button.
size
"xs""sm""md""lg""xl"
"sm"The size variant of the button.
color
"primary""secondary""tertiary""link-color""link-gray""primary-destructive""secondary-destructive""tertiary-destructive""link-destructive"
"secondary"The color variant of the button.
iconLeadingReactNode | FC<{ className?: string; }>—Icon component or element to show before the text.
iconTrailingReactNode | FC<{ className?: string; }>—Icon component or element to show after the text.
noTextPaddingboolean—Removes horizontal padding from the text content.
showTextWhileLoadingboolean—When true, keeps the text visible during loading state.
childrenReactNode—The button label. Omitting it while passing an icon renders a square, icon-only button.
classNamestring—The class name applied to the button.
Props from React Aria (41)
ColorPicker.EyeDropper inherited props
PropTypeDefaultDescription
onClick((e: MouseEvent<FocusableElement>) => void)—Not recommended – use onPress instead. onClick is an alias for onPress provided for compatibility with other libraries. onPress provides additional event details for non-mouse interactions.
onPress((e: PressEvent) => void)—Handler that is called when the press is released over the target.
onPressChange((isPressed: boolean) => void)—Handler that is called when the press state changes.
onPressEnd((e: PressEvent) => void)—Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressStart((e: PressEvent) => void)—Handler that is called when a press interaction starts.
onPressUp((e: PressEvent) => void)—Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
onHoverChange((isHovering: boolean) => void)—Handler that is called when the hover state changes.
onHoverEnd((e: HoverEvent) => void)—Handler that is called when a hover interaction ends.
onHoverStart((e: HoverEvent) => void)—Handler that is called when a hover interaction starts.
onBlur((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element loses focus.
onFocus((e: FocusEvent<Element, Element>) => void)—Handler that is called when the element receives focus.
onFocusChange((isFocused: boolean) => void)—Handler that is called when the element's focus status changes.
autoFocusboolean—Whether the element should receive focus on render.
excludeFromTabOrderboolean—Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
onKeyDown((e: KeyboardEvent) => void)—Handler that is called when a key is pressed.
onKeyUp((e: KeyboardEvent) => void)—Handler that is called when a key is released.
formstring—The <form> element to associate the button with. The value of this attribute must be the id of a <form> in the same document.
formActionstring | ((formData: FormData) => void | Promise<void>)—The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.
formEncTypestring—Indicates how to encode the form data that is submitted.
formMethodstring—Indicates the HTTP method used to submit the form.
formNoValidateboolean—Indicates that the form is not to be validated when it is submitted.
formTargetstring—Overrides the target attribute of the button's form owner.
idstring—The element's unique identifier.
isPendingboolean—Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers.
namestring—Submitted as a pair with the button's value as part of the form data.
preventFocusOnPressboolean—Whether to prevent focus from moving to the button when pressing it.Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.
type
"button""submit""reset"
"button"The behavior of the button when used in an HTML form.
valuestring—The value associated with the button's name when it's submitted with the form data.
styleStyleOrFunction<ButtonRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
renderDOMRenderFunction<"button", ButtonRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring—Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.
aria-controlsstring—Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-current
falsetrue"step""true""false""page""location""date""time"
—Indicates whether this element represents the current item within a container or set of related elements.
aria-disabled
falsetrue"true""false"
—Indicates whether the element is disabled to users of assistive technology.
aria-expanded
falsetrue"true""false"
—Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-haspopup
falsetrue"true""false""menu""listbox""tree""grid""dialog"
—Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-pressed
falsetrue"true""false""mixed"
—Indicates the current "pressed" state of toggle buttons.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

ColorPicker.HueSlider

Renders React Aria’s ColorSlider — all of its props are supported.

ColorPicker.HueSlider props
PropTypeDefaultDescription
formstring—The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document.
namestring—The name of the input element, used when submitting an HTML form.
colorSpace
"rgb""hsl""hsb"
—The color space that the slider operates in. The channel must be in this color space. If not provided, this defaults to the color space of the color or defaultColor value.
defaultValuestring | Color—The default value (uncontrolled).
idstring—The element's unique identifier.
isDisabledboolean—Whether the whole Slider is disabled.
onChange((value: Color) => void)—Handler that is called when the value changes, as the user drags.
onChangeEnd((value: Color) => void)—Handler that is called when the user stops dragging.
orientation
"horizontal""vertical"
"horizontal"The orientation of the Slider.
valuestring | Color—The current value (controlled).
Styling (5)
ColorPicker.HueSlider styling props
PropTypeDefaultDescription
styleStyleOrFunction<ColorSliderRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<ColorSliderRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
slotstring | null—A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
classNameClassNameOrFunction<ColorSliderRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", ColorSliderRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
Accessibility (4)
ColorPicker.HueSlider accessibility props
PropTypeDefaultDescription
aria-describedbystring—Identifies the element (or elements) that describes the object.
aria-detailsstring—Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-labelstring"Hue"Defines a string value that labels the current element.
aria-labelledbystring—Identifies the element (or elements) that labels the current element.

Also accepts all standard React DOM event handlers, the global HTML attributes (dir, lang, hidden, inert, translate).

ColorPicker.Provider

Color state provider. Wraps children in both context and AriaColorPicker.

Import Provider from @/components/application/color-picker/color-picker-context. Renders React Aria’s ColorPicker — all of its props are supported.

ColorPicker.Provider props
PropTypeDefaultDescription
children* (required)ReactNode—The color picker parts that read and update the shared color state.
defaultValuestring | Color"#7F56D9"Initial color value as a CSS string or React Aria Color object.
valuestring | Color—Controlled color value as a CSS string or React Aria Color object.
defaultColorFormat
"hex""rgb""css""hsl""hsb"
"hex"Initial color format for the value input.
onChange((color: Color) => void)—Called when the selected color changes.

ColorPicker.SavedColors

Renders a <div> element.

ColorPicker.SavedColors props
PropTypeDefaultDescription
colors* (required)string[]—Array of CSS color strings or gradient strings to display as swatches.
labelstring"Saved"Heading text above the swatch list.
onAdd(() => void)—Called when the "Add" button is clicked. Omit to hide the button.
onSelect((color: string) => void)—Called when a swatch is selected, with the color/gradient string.

ColorPicker.SwatchItem

Renders React Aria’s ColorSwatchPickerItem — all of its props are supported.

ColorPicker.SwatchItem props
PropTypeDefaultDescription
size
"sm""md"
"md"Diameter of the swatch dot — 16px for "sm", 20px for "md".
Props from React Aria (15)
ColorPicker.SwatchItem inherited props
PropTypeDefaultDescription
onClick((e: MouseEvent<FocusableElement>) => void)—Not recommended – use onPress instead. onClick is an alias for onPress provided for compatibility with other libraries. onPress provides additional event details for non-mouse interactions.
onPress((e: PressEvent) => void)—Handler that is called when the press is released over the target.
onPressChange((isPressed: boolean) => void)—Handler that is called when the press state changes.
onPressEnd((e: PressEvent) => void)—Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
onPressStart((e: PressEvent) => void)—Handler that is called when a press interaction starts.
onPressUp((e: PressEvent) => void)—Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
onHoverChange((isHovering: boolean) => void)—Handler that is called when the hover state changes.
onHoverEnd((e: HoverEvent) => void)—Handler that is called when a hover interaction ends.
onHoverStart((e: HoverEvent) => void)—Handler that is called when a hover interaction starts.
color* (required)string | Color—The color of the swatch.
isDisabledboolean—Whether the color swatch is disabled.
styleStyleOrFunction<ColorSwatchPickerItemRenderProps>—The inline style for the element. A function may be provided to compute the style based on component state.
childrenChildrenOrFunction<ColorSwatchPickerItemRenderProps>—The children of the component. A function may be provided to alter the children based on component state.
classNameClassNameOrFunction<ColorSwatchPickerItemRenderProps>—The CSS className for the element. A function may be provided to compute the class based on component state.
renderDOMRenderFunction<"div", ColorSwatchPickerItemRenderProps>—Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.Requirements:
  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

Also accepts the global HTML attributes (dir, lang, hidden, inert, translate), all standard React DOM event handlers.

InputCell

Wrapper that mirrors InputBase styling with customizable border radius for input groups.

Renders a <div> element.

InputCell props
PropTypeDefaultDescription
children* (required)ReactNode—The input (or other control) rendered inside the cell.
position
"first""middle""last""only"
"only"Where the cell sits in a group of adjacent cells. Rounds the matching corners and pulls the cell onto its neighbour's border.
classNamestring—Additional class name for the cell wrapper.

FAQs

Please refer to our frequently asked questions page for more.

The format select offers five formats: "hex", "rgb", "css" (an rgba() string), "hsl" and "hsb". Set the starting format with defaultColorFormat on ColorPicker.Provider; it defaults to "hex".

Yes. ColorPicker.EyeDropper opens the browser's EyeDropper API and sets the color the user picks. In browsers without the API the button renders nothing, so you don't need to feature-detect it yourself.

Yes. The all-in-one ColorPicker and parts such as ColorPicker.EyeDropper, ColorPicker.ColorFormatSelect and ColorPicker.ColorValueInput read their state from ColorPicker.Provider, and useColorPicker() throws outside one. ColorPicker.Dialog is only the card container, so place the provider inside it.

Pass value and onChange to ColorPicker.Provider for a controlled picker, or defaultValue (which defaults to "#7F56D9") for an uncontrolled one. Both accept a CSS color string or a React Aria Color. onChange receives a Color object, so call color.toString("hex") when you need a string.

Yes. Inside ColorPicker.Provider, arrange ColorPicker.Area, ColorPicker.HueSlider, ColorPicker.AlphaSlider, ColorPicker.EyeDropper, ColorPicker.ColorFormatSelect and ColorPicker.ColorValueInput however you like. Your own components can read and change the color with the useColorPicker() hook, which returns { state, actions }.

Render ColorPicker.SavedColors with a colors array of CSS color strings. onSelect receives the clicked swatch as a hex string, and passing onAdd shows an Add button (omit it to hide the button). The heading defaults to "Saved" and can be changed with label.

Code snippetsCommand menus