Color Picker

yarn add @clayui/color-picker

Color picker lets users select a color from a predefined palette, specify a color via its hexadecimal value, sample a color, and explore color values to create a custom color variation.

Stable3.32.0View in LexiconCHANGELOGstorybook demos

Types of Color Picker

Color Picker is delivered in 4 different ways: default colors, custom colors, native and small.

  • Default colors: a predefined list of colors to the dropdown that is not allowed to change or manipulate.
  • Custom colors: using the colors API in conjunction with onColorsChange enables the user to modify colors and add new ones.
  • Native: use the useNative API when the color picker is being used in a native environment, it changes to the browser default color picker.
  • Small: use the small API to size the color picker input to match other small inputs.
Custom Colors
Code Sample (expand to see it)

We recommend that you review the use cases in the Storybook.

How can this be improved? Create an issue!