Color picker

The color picker component allows a user to select any color either from a manual entry or from an interactive gradient. The color picker component supports manual inputs of RGB, HSL, and hexadecimal format.


Passing the inline prop will render the color picker inline with its label, if provided. By default, an inline color picker will render its elements with a space-between justification using the flex component.

Swatch only

The color picker component, by default, will render a color swatch and a text representation of the selected color. If only the color swatch is necessary, pass the swatchOnly prop.


If the color picker is required, pass the required prop. This will prevent any form submission until the required color is chosen.


Disable a color picker in order to prevent a user from selecting any information while some task is being completed, or to restrict a user's access.

Read only

If you want to render a color that has already been selected for viewing purposes only, use the readOnly prop. The user will not be able to make any new color selections if it is read only.