Color Picker
- HTML/CSS:Dev Ready
- Layout:Desktop Only
A configurable interface for color selection
Base
Preview
About Base
The base variant is the fully featured color picker, with a direct text input, and a button-triggered popover, which has tabs with both a list of predefined color options (swatches), as well as an interactive tool for custom color configuration.
About Color Picker
The Unified Color Picker component allows for a fully accessible and configurable color picker, allowing the user to pick from a set of predefined colors (swatches), or to pick a custom color using a HSB selection interface.
It can be configured to show one or both of those color selection interfaces.
Implementation Guidelines
The Color Picker is a dynamic component with several 'live' areas. These areas need to update when certain user interactions occur.
A quick note on terms
Several terms are used in this document, each with particular meaning. Please take note of the following:
- Need/s This rule must be implemented for the component to appear or function as expected.
- Current color The current selected, submitted, and validated color.
- Working color The working, unsubmitted color, built with the custom-range tool.
When creating an implementation of this UI component, please take note to include the following functionality:
.slds-color-picker__button
Aside from the 'swatches-only' variant, all Color Picker variants have a summary
section with a clickable button. This button needs to toggle the visibility of the
.slds-color-picker__selector
popover.
.slds-color-picker__button .slds-swatch
This swatch needs an inline style of background
, set to the current color.
It needs to update whenever the current color is updated.
.slds-color-picker__summary-input
This input needs to display the hex value of the current color. It should update whenever current color is updated. The user can enter a hex color manually. The implementation should check for the validity of the submitted value before setting the color to be the current color.
.slds-color-picker__hue-slider
In the custom picker, the hue slider is a range input element that allows the user to select a hue base for a working color. Its value ranges from 0 - 360, and represents the hue in an expected hsv color format.
When the user updates the current color, the value on this slider needs to be adjusted to the current color's hue.
.slds-color-picker__custom-range
The custom range represents a matrix of all saturation and brightness combinations of the working color's hue. The x axis of the form represents saturation, and goes from 0% to 100%. On the y axis, brightness is represented, with 0% brightness at the bottom, and 100% brightness at the top.
Keep in mind that when implementing color conversions, this custom range picker is utilizing the HSB/HSV color model, and not the HSL model.
This element needs an inline style, with the background
property set to the
working color's hue, as defined by the hue range input element desctibed above. As this
element is meant to represent the current working color's hue's saturation and lightness
matrix, css's hsl() syntax is the most appropriate format here, with the hue being the
current working color's hue, the saturation set to 100% and the lightness set to 50%
(the 50% lightness is to adjust this HSL range for the HSB color model).
A gradient overlay will produce the effect of the saturation and brightness matrix automatically.
Any mouse clicks on the custom range need to set the position of the
.slds-color-picker__range-indicator
to the clicked coordinates, and also need to
update the saturation and brightness values on the working color.
.slds-color-picker__range-indicator
This is the targeting element inside the custom range, and represents the current brightness and saturation values of the working color.
It needs declarations for bottom
and left
positioning, so it will be properly
placed over the correct area of the .slds-color-picker__custom-range
.
Conveniently, the values are uniformly represented. The left
declaration indicates
the saturation value, from 0% to 100%, and the bottom
declaration indicates
the brightness value, from 0% to 100%.
.slds-color-picker__hue-and-preview .slds-swatch
This swatch is a preview element of the working color value from the hue slider
and range indicator above. It needs an inline style for background
, set to the
completed working color value.
.slds-color-picker__custom-inputs
The Hex, R(ed), G(reen), and B(lue) text inputs included in this section are representative of the current working color's converted Hex or RGB values, and need to display those as their value.
Users can, however, directly input into these elements. A valid entry needs to update the working color and update related elements. The implementation should protect against invalid submissions.
Expected Keyboard Interactions
.slds-color-picker__swatches
This element has the role of listbox
, and keyboard interactions when its <a>
children are focused needs to behave in a menu-like fashion. Keypresses need
to move the actively focused element in the appropriate direction (left/up will move
to the previous item, down/right will move to the next item).
Additionally, when focused on the first or last item, the appropriate key action needs to move the focus to the last or first item, respectively. It is expected to behave in a cyclical fashion.
.slds-color-picker__range-indicator
The range indicator, when focused, needs to respond to arrow keypresses by moving 1% in the appropriate direction, unless prohibited by a boundary.
For an additional effect, if an arrow key is pressed in combination with shift, the indicator can move 10% in the given direction, unless prohibited by a boundary.
Other Interactions
Other expected keyboard interactions (such as input field updates) and their effects on UI can be found in the Implementation Guidelines section above.
Accessibility Guidelines
As this is a highly interactive component, there are some key accessibility guidelines that must be followed.
.slds-color-picker__summary-label
This element needs a for attribute with the value of the
.slds-color-picker__summary-input
's ID
.slds-color-picker__swatches
This element needs a role
of listbox
.
.slds-color-picker__swatch
This element needs a role
of presentation
.
.slds-color-picker__swatch-trigger
This element needs a role
of option
.
.slds-color-picker__range-indicator
Since this element is focused and moved to indicate the working color it needs
proper aria tags to indicate its job and value. First, an aria-live
attribute
needs to be set to assertive
, aria-atomic
needs to be set to true
, and
aria-describedby
needs to reference the instructions text for the custom color
picker range, which in our example is the hidden #color-picker-instructions
element.
All Other Accessibility
This component makes use of other components, such as Popovers, Tabs, and Input. All accessibility rules and guidelines for those components need to be followed for proper accessibility support.
Overview of CSS Classes
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-color-picker |
---|---|
Summary | Fully featured color picker, with swatches and a custom color config |
Support | dev-ready |
Restrict | div |
Variant | True |
Selector | .slds-color-picker__summary |
---|---|
Summary | 'Summary' element for color selection. |
Restrict | .slds-color-picker > div |
Selector | .slds-color-picker__summary-label |
---|---|
Summary | Label for summary input |
Restrict | .slds-color-picker__summary > label |
Selector | .slds-color-picker__button |
---|---|
Summary | Button that toggles the Color Picker Selector |
Restrict | .slds-color-picker__summary .slds-button |
Selector | .slds-color-picker__summary-input |
---|---|
Summary | Input field for summary UI |
Restrict | .slds-color-picker__summary > div |
Selector | .slds-color-picker__selector |
---|---|
Summary | The selector subcomponent. Extends upon a .slds-popover |
Restrict | .slds-color-picker div, .slds-color-picker section |
Selector | .slds-color-picker__swatches |
---|---|
Summary | Swatch container |
Restrict | .slds-color-picker__selector ul |
Selector | .slds-color-picker__swatch |
---|---|
Summary | Color Picker swatch |
Restrict | .slds-color-picker__swatches li |
Selector | .slds-swatch |
---|---|
Summary | A swatch |
Restrict | .slds-color-picker__swatch span, .slds-color-picker__summary-button span, .slds-color-picker__hue-and-preview span |
Selector | .slds-color-picker__custom |
---|---|
Summary | Custom picker selection container |
Restrict | .slds-color-picker__selector div |
Selector | .slds-color-picker__custom-range |
---|---|
Summary | Custom picker range element |
Restrict | .slds-color-picker__custom div |
Selector | .slds-color-picker__range-indicator |
---|---|
Summary | true |
Restrict | .slds-color-picker__custom-range > a |
Selector | .slds-color-picker__hue-and-preview |
---|---|
Summary | Container element for the hue slider and preview swatch |
Restrict | .slds-color-picker__custom div |
Selector | .slds-color-picker__hue-slider |
---|---|
Summary | The slide input that controls the hue |
Restrict | .slds-color-picker__hue-and-preview input |
Selector | .slds-swatch |
---|---|
Summary | A swatch |
Restrict | .slds-color-picker__swatch span, .slds-color-picker__summary-button span, .slds-color-picker__hue-and-preview span |
Selector | .slds-color-picker__custom-inputs |
---|---|
Summary | The group of direct input elements |
Restrict | .slds-color-picker__custom > div |
Selector | .slds-color-picker__selector-footer |
---|---|
Summary | Footer for the Color Selector Picker |
Restrict | .slds-color-picker__selector div |
Selector | .slds-color-picker_custom-only |
---|---|
Summary | Swatches Only UI |
Support | dev-ready |
Restrict | .slds-color-picker |
Variant | True |
Selector | .slds-color-picker_predefined-only |
---|---|
Summary | Swatches Only UI |
Support | dev-ready |
Restrict | .slds-color-picker |
Variant | True |
Selector | .slds-color-picker_swatches-only |
---|---|
Summary | Swatches Only UI |
Support | dev-ready |
Restrict | .slds-color-picker |
Variant | True |