--- title: ColorSelector description: "`ColorSelector` is a component used by the user to select a color." links: - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/color-selector - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-colorselector--basic --- ```tsx ``` ## Usage ```tsx import { ColorPicker } from "@yamada-ui/react" ``` ```tsx import { ColorPicker } from "@/components/ui" ``` ```tsx import { ColorPicker } from "@workspaces/ui" ``` ```tsx ``` ### Change Size ```tsx {(size, index) => } ``` ### Change Default Value To change the default value, set `defaultValue` to a value. ```tsx ``` ### 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. ```tsx ``` ### Change Color Swatches To change the color swatches, set `colorSwatches` to an array. ```tsx ``` ### Change Color Swatch Group Columns To change the number of columns in the color swatch group, set `colorSwatchGroupColumns` to a number. ```tsx ``` ### Change Shape ```tsx {(shape, index) => ( )} ``` ### Make Disabled ```tsx ``` ### Make Read Only ```tsx ``` ### Customize Component ```tsx const [value, setValue] = useState("#FF0000FF") return (
) ``` ### Control ```tsx const [value, setValue] = useState("#FF0000A0") return ``` ## 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` | 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. | | `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the thumb and color swatch. | | `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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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. | | `orientation` | `"horizontal"` | `"horizontal" \| "vertical"` | The orientation of the slider. | | `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. | | `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the thumb. | | `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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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. | | `orientation` | `"horizontal"` | `"horizontal" \| "vertical"` | The orientation of the slider. | | `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. | | `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the thumb. | | `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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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. | | `shape` | `"circle"` | `"circle" \| "rounded" \| "square"` | The shape of the thumb. | | `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. |