ColorSelector

ColorSelector is a component used by the user to select a color.

<ColorSelector.Root maxW="md" />

Usage

import { ColorPicker } from "@yamada-ui/react"

import { ColorPicker } from "@/components/ui"

import { ColorPicker } from "@workspaces/ui"

<ColorSelector.Root>
  <ColorSelector.SaturationSlider />
  <ColorSelector.HueSlider />
  <ColorSelector.AlphaSlider />
  <ColorSelector.ColorSwatchGroupLabel />
  <ColorSelector.ColorSwatchGroup>
    <ColorSelector.ColorSwatchItem />
  </ColorSelector.ColorSwatchGroup>
</ColorSelector.Root>

Change Size

<VStack>
  <For each={["sm", "md", "lg"]}>
    {(size, index) => <ColorSelector.Root maxW="md" key={index} size={size} />}
  </For>
</VStack>

Change Default Value

To change the default value, set defaultValue to a value.

<ColorSelector.Root defaultValue="#775999" maxW="md" />

Change Alpha Value

To change the alpha value, set defaultValue to a value containing the alpha value, or set format to "hexa" or "hsla" etc.

<ColorSelector.Root defaultValue="#775999A0" maxW="md" />

Change Color Swatches

To change the color swatches, set colorSwatches to an array.

Pick a color

<ColorSelector.Root
  colorSwatches={[
    "hsl(0, 100%, 50%)",
    "hsl(45, 100%, 50%)",
    "hsl(90, 100%, 50%)",
    "hsl(135, 100%, 50%)",
    "hsl(180, 100%, 50%)",
    "hsl(225, 100%, 50%)",
    "hsl(270, 100%, 50%)",
    "hsl(315, 100%, 50%)",
  ]}
  colorSwatchGroupLabel="Pick a color"
  maxW="md"
/>

Change Color Swatch Group Columns

To change the number of columns in the color swatch group, set colorSwatchGroupColumns to a number.

Pick a color

<ColorSelector.Root
  colorSwatches={[
    "hsl(0, 100%, 50%)",
    "hsl(36, 100%, 50%)",
    "hsl(72, 100%, 50%)",
    "hsl(108, 100%, 50%)",
    "hsl(144, 100%, 50%)",
    "hsl(180, 100%, 50%)",
    "hsl(216, 100%, 50%)",
    "hsl(252, 100%, 50%)",
    "hsl(288, 100%, 50%)",
    "hsl(324, 100%, 50%)",
  ]}
  colorSwatchGroupColumns={10}
  colorSwatchGroupLabel="Pick a color"
  maxW="md"
/>

Change Shape

<VStack>
  <For each={["rounded", "circle", "square"]}>
    {(shape, index) => (
      <ColorSelector.Root key={index} format="hexa" maxW="md" shape={shape} />
    )}
  </For>
</VStack>

Make Disabled

<ColorSelector.Root disabled maxW="md" />

Make Read Only

<ColorSelector.Root maxW="md" readOnly />

Customize Component

const [value, setValue] = useState("#FF0000FF")

return (
  <Popover.Root placement="end-start">
    <Popover.Trigger>
      <Center rounded="full" w="fit-content">
        <ColorSwatch color={value} variant="circle" />
      </Center>
    </Popover.Trigger>

    <Popover.Content w="xs" p="1">
      <Popover.Body>
        <ColorSelector.Root value={value} onChange={setValue} />
      </Popover.Body>
    </Popover.Content>
  </Popover.Root>
)

If you use this code, you need to add "use client" to the top of the file.

Control

const [value, setValue] = useState("#FF0000A0")

return <ColorSelector.Root maxW="md" value={value} onChange={setValue} />

If you use this code, you need to add "use client" to the top of the file.

Props

ColorSelector.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`alphaSliderProps`	-	`ColorSelectorAlphaSliderProps` Props for the alpha slider.
`colorSwatches`	-	`string[]` An array of colors in one of the supported formats. Used to render swatches list below the color selector.
`colorSwatchGroupColumns`	`8`	`number` The number of columns in the color swatch group.
`colorSwatchGroupLabel`	-	`ReactNode` The label of the color swatch group.
`colorSwatchGroupLabelProps`	-	`ColorSelectorColorSwatchGroupLabelProps` Props for the color swatch group label.
`colorSwatchGroupProps`	-	`ColorSelectorColorSwatchGroupProps` Props for the color swatch group.
`colorSwatchItemProps`	-	`Omit<ColorSelectorColorSwatchItemProps, "value">` Props for the color swatch item.
`defaultValue`	`fallbackValue`	`string` The initial value of the color selector.
`disabled`	`false`	`boolean` If `true`, the color selector will be disabled.
`fallbackValue`	`"#FFFFFF"`	`string` The fallback value of the color selector.
`format`	`"hex"`	`ColorFormat` The format of the color selector. Automatically determines the format of `value` or `defaultValue`.
`hueSliderProps`	-	`ColorSelectorHueSliderProps` Props for the hue slider.
`onChange`	-	`(value: string) => void` The callback invoked when the value changes.
`onChangeEnd`	-	`(value: string) => void` The callback invoked when the value changes ends.
`onChangeStart`	-	`(value: string) => void` The callback invoked when the value changes starts.
`readOnly`	`false`	`boolean` If `true`, the color selector will be read only.
`saturationSliderProps`	-	`ColorSelectorSaturationSliderProps` Props for the saturation slider.
`value`	-	`string` The value of the color selector.
`withAlpha`	`false`	`boolean` If `true`, the alpha slider will be displayed.

ColorSelector.AlphaSlider

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"outline" \| "solid"` The variant of the component.
`color`	-	`string` The color used for the slider.
`defaultValue`	-	`number` The initial value of the slider.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`getAriaValueText`	-	`(value: number, index: number) => string \| undefined` This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input.
`indicatorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the indicator.
`indicatorRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the indicator.
`inputProps`	-	`SliderInputProps` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`max`	`1`	`number` The maximum allowed value of the slider. Cannot be less than min.
`min`	`0`	`number` The minimum allowed value of the slider. Cannot be greater than max.
`name`	-	`string` The name attribute of the hidden `input` field. This is particularly useful in forms.
`onChange`	-	`(value: number) => void` Function called whenever the slider value changes.
`onChangeEnd`	-	`(value: number) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: number) => void` Function called when the user starts selecting a new value.
`overlayProps`	-	`AlphaSliderOverlayProps` Props for the overlay element.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`step`	`0.01`	`number` The step in which increments or decrements have to be made.
`thumbProps`	-	`AlphaSliderThumbProps` Props for the thumb element.
`thumbRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the thumb.
`thumbSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the thumb.
`thumbStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the thumb.
`trackProps`	-	`AlphaSliderTrackProps` Props for the track element.
`trackRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the track.
`trackSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the track.
`value`	-	`number` The value of the slider.

ColorSelector.ColorSwatchGroup

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ColorSelector.ColorSwatchGroupLabel

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ColorSelector.ColorSwatchItem

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"circle" \| "plain" \| "square"` The variant of the component.
`value`	-	`string` The value of the color swatch.
`layers`	-	`HTMLStyledProps[]` The overlay used for the swatch element.
`withShadow`	`true`	`boolean` If `true`, the swatch element has an inner `box-shadow`.

ColorSelector.EyeDropper

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`icon`	-	`ReactNode` The icon to display in the eye dropper.

ColorSelector.HueSlider

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"outline" \| "solid"` The variant of the component.
`defaultValue`	-	`number` The initial value of the slider.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`getAriaValueText`	-	`(value: number, index: number) => string \| undefined` This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input.
`indicatorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill color of the indicator.
`indicatorRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the indicator.
`inputProps`	-	`SliderInputProps` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`max`	`360`	`number` The maximum allowed value of the slider. Cannot be less than min.
`min`	`0`	`number` The minimum allowed value of the slider. Cannot be greater than max.
`name`	-	`string` The name attribute of the hidden `input` field. This is particularly useful in forms.
`onChange`	-	`(value: number) => void` Function called whenever the slider value changes.
`onChangeEnd`	-	`(value: number) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: number) => void` Function called when the user starts selecting a new value.
`overlayProps`	-	`HueSliderOverlayProps` Props for the overlay element.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`step`	`1`	`number` The step in which increments or decrements have to be made.
`thumbProps`	-	`HueSliderThumbProps` Props for the thumb element.
`thumbRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the thumb.
`thumbSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the thumb.
`thumbStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke color of the thumb.
`trackProps`	-	`HueSliderTrackProps` Props for the track element.
`trackRounded`	-	`"-moz-initial" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "full" \| "inherit" \| "initial" \| "l1" \| "l2" ...` The rounded of the track.
`trackSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the track.
`value`	-	`number` The value of the slider.

ColorSelector.SaturationSlider

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`defaultValue`	`[0, 0, 1]`	`[number, number, number]` The initial value of the saturation slider.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`getAriaValueText`	-	`(value: [number, number, number]) => string \| undefined` This is used to format the value so that screen readers can speak out a more human-friendly value. It is used to set the `aria-valuetext` property of the input.
`id`	-	`string` The base `id` to use for the slider.
`inputProps`	-	`HTMLStyledProps<"input">` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`name`	-	`string` The name attribute of the hidden `input` field. This is particularly useful in forms.
`onChange`	-	`(value: [number, number, number]) => void` Function called whenever the saturation slider value changes.
`onChangeEnd`	-	`(value: [number, number, number]) => void` Function called when the user is done selecting a new value.
`onChangeStart`	-	`(value: [number, number, number]) => void` Function called when the user starts selecting a new value.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`step`	`0.01`	`number` The step in which increments or decrements have to be made.
`thumbProps`	-	`SaturationSliderThumbProps` Props for the thumb element.
`trackProps`	-	`SaturationSliderTrackProps` Props for the track element.
`value`	-	`[number, number, number]` The value of the saturation slider.

Accessibility

ColorSelector uses appropriate ARIA attributes to ensure accessibility for color selection.

Key	Description	State
`ArrowRight`, `ArrowUp`	If within a slider, increases the value based on `step`.	-
`ArrowLeft`, `ArrowDown`	If within a slider, decreases the value based on `step`.	-
`Home`	If within hue slider or alpha slider, sets the value to `min`.	-
`End`	If within hue slider or alpha slider, sets the value to `max`.	-
`PageUp`	If within hue slider or alpha slider, increases the value based on `min` and `max`.	-
`PageDown`	If within hue slider or alpha slider, decreases the value based on `min` and `max`.	-

ARIA Roles and Attributes

Component and Element	Role and Attribute	Usage
`ColorSelector.EyeDropper`	`role="button"`	Indicates that this is a button.
	`aria-disabled`	Sets to `"true"` if `disabled` or `readOnly` is set.
	`aria-label`	Sets to `"Pick a color"`.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
`ColorSelector.SaturationSlider > input`	`aria-hidden`	Excludes the element from the accessibility tree.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
`ColorSelector.SaturationSlider > div`	`role="slider"`	Indicates that this is a slider.
	`aria-label`	Sets to `"Saturation and brightness thumb"`.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-roledescription`	Sets to `"2D slider"`.
	`aria-valuemin`	Sets the value of `min`. The default is `0`.
	`aria-valuemax`	Sets the value of `max`. The default is `100`.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value like `"Saturation 18%, Brightness 18%"`.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
`ColorSelector.HueSlider > input`	`aria-hidden`	Excludes the element from the accessibility tree.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
`ColorSelector.HueSlider > div`	`role="slider"`	Indicates that this is a slider.
	`aria-label`	Sets to `"Slider thumb"`.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-orientation`	Sets to `"horizontal"` or `"vertical"` based on `orientation`. The default is `"horizontal"`.
	`aria-valuemin`	Sets the value of `min`. The default is `0`.
	`aria-valuemax`	Sets the value of `max`. The default is `360`.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value like `"18°, Red"`.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
`ColorSelector.AlphaSlider > input`	`aria-hidden`	Excludes the element from the accessibility tree.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
`ColorSelector.AlphaSlider > div`	`role="slider"`	Indicates that this is a slider.
	`aria-label`	Sets to `"Slider thumb"`.
	`aria-describedby`	If this is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`.
	`aria-orientation`	Sets to `"horizontal"` or `"vertical"` based on `orientation`. The default is `"horizontal"`.
	`aria-valuemin`	Sets the value of `min`. The default is `0`.
	`aria-valuemax`	Sets the value of `max`. The default is `1`.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value like `"18%"`.
	`aria-readonly`	Set to `"true"` if `readOnly` is set.
	`aria-disabled`	Set to `"true"` if `disabled` is set.
`ColorSelector.ColorSwatchGroupLabel`	`id`	Used to associate with `ColorSelector.ColorSwatchGroup`.
`ColorSelector.ColorSwatchGroup`	`role="listbox"`	Indicates that this is a listbox.
	`aria-labelledby`	Sets the `id` of the associated `ColorSelector.ColorSwatchGroupLabel`.
`ColorSelector.ColorSwatchItem`	`role="option"`	Indicates that this is an option.
	`aria-label`	Sets the current value.
	`aria-roledescription`	Sets to `"color swatch"`.
	`aria-selected`	Sets to `"true"` if `value` is the same as the current value.
	`aria-disabled`	Sets to `"true"` if `disabled` or `readOnly` is set.

Similar Components

AlphaSlider is a component used to allow the user to select color transparency.

HueSlider is a component used to allow the user to select a color hue.

SaturationSlider is a component used to allow the user to select a color saturation.

ColorPicker is a component used by the user to select a color or enter an arbitrary color value.

Checkbox is a component used for allowing users to select multiple values from multiple options.

Dropzone is a component used for uploading files via drag and drop.

Editable is a component used to obtain inline editable text input.

Field is a component used to group form elements with label, helper message, error message, etc.

Uses Components & Hooks

NativeSelect is a component used for allowing users to select one value from a list of options. It displays a native dropdown list provided by the browser (user agent).

ColorSwatch is a component that displays color samples.

AlphaSlider is a component used to allow the user to select color transparency.

HueSlider is a component used to allow the user to select a color hue.

Icon is a general icon component that can be used in your projects.

SaturationSlider is a component used to allow the user to select a color saturation.

Slider is a component used for allowing users to select a value from a range.

useEyeDropper is a custom hook that opens the eye dropper tool and returns the color value.

Used By Components & Hooks

ColorPicker is a component used by the user to select a color or enter an arbitrary color value.