Status
The status of the component
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
The color picker is a simple component with a native browser color input interface that lets a user specify a color by using a visual browsing interface or by entering the color into a text field in #rrggbb hexadecimal format.
Usage Guidelines
Is this the right control?
Use the color picker to let a user select colors in your interface. Some scenarios require granular color picking, while others would benefit from a more straightforward swatch picker.
Do
Instead, consider a bespoke solution to present the user with tested swatch options. Contact the Spark Design Team if you need help defining a swatch palette.
Don't
Avoid using this color picker to customize the color of backgrounds, text, or other critical visual information that affects the contrast ratio of text. This increases the risk to poor accessibility and user experience.
Behavior
Browsing and selecting colors
The color picker is used to browse through and select colors. By default, it lets a user navigate through colors on a color spectrum, or specify a color in #rrggbb hexadecimal format.
Content
Labels
Labels in color pickers are essential for accessibility and usability, benefiting all users, including those with disabilities.
The color picker component has two label alignments: above and beside the input. The recommended label alignment for forms is above the input to align with the rest of the data input controls and minimize cognitive load. Beside-label alignment works best when laid out in a horizontal stack with other UI elements.
Do
Use the right label alignment in consideration of the rest of the surrounding elements and keep in mind accessibility best practices.
Don't
Avoid mixing label alignments in data inputs in forms
Do
Use short labels that include the main keywords in the first two words to improve comprehension and efficiency.
Don't
Avoid labels that are too long or wordy to reduce confusion and frustration.