The color picker allows users to select colors to customize their invoices specific to their brand.

Usage

With the color picker, users select a color to apply to the task at hand. For instance, users might want to choose a color to appear in their customized invoice.

Appearance and behavior

The color picker has a collapsed state with a white box with 4 dots in it. By default, the label next to it says “Splash on some color” that can be changed and will also be localized.

  • When users tap on the collapsed state, the full default color picker appears. In the animation, the default color picker seems to grow out of the collapsed version.
  • In its open state, the color picker consists of three main pieces:
    • The selected color, which appears as a large circle
    • The hexadecimal value of the selected color, which appears as a text box, prefilled with the selected color’s values
    • Two rows of colored dots, which represent the colors that users can select
  • Tapping a dot in the palette or typing a new hexadecimal code in the text box updates the big selection dot to the selected color and matching hexadecimal value in the box.
  • Once the user is done selecting a color, the picker can return to either its closed or default state.
Default

 

Hover
When the user hovers over a color, the hexadecimal value changes. The color that the user hovers over has an outer border color of 50% opacity.

 

White background
When the user hovers over a white area, the selected color
has an outer border color of #d4d7dc gray.

 

Mobile

  • Device detection is important for the color picker. For both phones and tablets, we need to provide the control that has enough breathing room for tap targets.
  • The selected color appears next to the color label.
  • The selected color has a responsive text field to its right, prefilled with the hexadecimal value selected. The user may tap into this field to change the value, even if the color is not in the palette. The selected color dot on the left updates to match the hexadecimal color.
  • A pre-selected palette is available right underneath the above mentioned controls. Each dot is tappable and may be selected as the color. Tapping on one updates the selected color dot as well as the hexadecimal value in the text field.

Accessibility

This is a visual component, but we need to make sure it also works for people that use assistive technology, such as a screen reader or voice recognition user. We also need to make sure it works for color-blind users and for non-mouse/touch users.

  • Each color option is a button that can be focused and receives an on-click event from the enter and space bar key.
  • Each color option has a text description, such as “kelly green.” We can do this with an aria-label. This is a helpful resource for associating hexadecimal codes with color names: http://htmlcolorcodes.com/color-names
  • The focus state lets people know when they’ve tabbed to a particular color.
  • The text input has a label. This will require either the visual label that lets people know what the input represents or uses the aria label property to apply a hidden label.
    The selected color’s text node is updated with the selected color name. This is probably a div, so we should give it role=’img’ aria-label=”Selected color is Kelly Green”
  • The collapsed button has an appropriate text node.

Example

The default version of the color picker appears here to let users select colors as they customize their invoices.

  • Was this Helpful?
  •