Skip to main content

Color picker

Overview

Use the color picker when a user needs to select a color to make the selection a visual task rather than a technical one.


Best practices

check_circle_outline

Allow users to enter colors in multiple formats (RGBA, HSVA, HEX) only if appropriate - if they'll be copying existing RGBA values from another product, for instance. Otherwise, hex values should suffice.

check_circle_outline

Provide an option to enter text as RGBA if users should be able to select a transparent color.

check_circle_outline

If possible, allow users to select from a Material palette of colors to ensure harmony, consistency, and ADA compliance.

cancel

Avoid providing too much customization, it can create unnecessary complexity. Consider allowing customization to support an expression of branding, such as public facing pages for a city.


Components

Patterns