Component proposal: Dull colors

[amyleadem]

Component name

Dull colors

Component description

To expand the USWDS color palette to include dull or desaturated colors. These dull colors would complement the vivid counterparts, and complete the color gamut.

Why USWDS needs this component

There is a gap in the USWDS color palette. There are dark and light colors, there are saturated and vivid colors, but there are no desaturated colors. Dull colors are crucial tools for expressing a brand, drafting an illustration, and balancing the visual hierarchy of a design. On the USWDS March 2024 monthly call, in response to the question “Do we need to use USWDS color tokens?” Dan responded with “We would like the answer to be yes.” If that is true, you must give designers the full gamut and empower their creativity. Fill in the gap.

Above is a chart featuring every color in the USWDS color palette. On the left are the grays, on the right are the vivid colors. On the top are the lightest colors, and on the bottom are the darkest colors. Notice the dearth on the left side of the chart. This is where we would expect to see dull colors, and indeed at (0.229, 0.760) we see green-cool-20, a beautiful, if lonely, dull color.

If USWDS expects to be the design system to suit the needs of any US government application, it must supply colors that suit any need, including the dull ones.

How the component works

These dull colors would work like any other color in the USWDS color palette. They would be tokens, with distinct names. They would have to be color contrast checked and validated. They would need to be documented on the https://designsystem.digital.gov/ website.

Real-world examples

https://www.congress.gov/ uses a lovely desaturated lavender color around their search box.

Hex	Saturation	Lightness	Swatch
#A6ADBD	14.8%	69.6%

https://catalog.data.gov/dataset has a handsome cathedral glass ribbon

Hex	Saturation	Lightness	Swatch
#79989E	16.0%	54.7%

https://catalog.data.gov/dataset again with an affable plumb ribbon

Hex	Saturation	Lightness	Swatch
#89739C	17.2%	53.1%

https://www.foia.gov/wizard.html has a magical blue slate by way of an opacity trick (see the “Or search for something else” text area in the disabled state)

Hex	Saturation	Lightness	Swatch
#788493	11.1%	52.4%

https://www.govinfo.gov/#advanced boasts an agreeable moon shade for its advanced search area (gently assisted by an opacity hack)

Hex	Saturation	Lightness	Swatch
#CACFD4	10.4%	81.2%

When to use this component and when to consider something else

Dull colors are one tool in the designers toolbox for balancing visual impact. Use these colors to provide contrast on light or white backgrounds without the “pop” of normally saturated or vivid colors. Use dull colors to add a little flavor to an otherwise gray interface. Use these colors in illustrations, logos, graphic elements or other brand elements underserved by the more vibrant colors.

Usability considerations

Dull colors will actually be easier to use than normally saturated or vivid colors. The contrast they provide will be more reliable for users affected by colorblindness. Dull colors could be used as substitutes for grays, turning text or interface controls that are usually very desaturated into hued/stylized elements. The impact of this is unknown. The risk is low, as long as contrast standards are met.

Accessibility considerations

As mentioned before, dull colors will actually be easier to use in an accessible way because of how they will be perceived by users affected with colorblindness. More broadly, filling the color gap give designers more options for increasing contrast, expressing brand, and ultimately meeting the needs of government websites, and users.

Who’s involved

Peter J. VanDusartz IV from The Federal Reserve Bank of Minneapolis (GitHub: Peter-VanDusartz)

[amyleadem]

I think there's a lot that makes sense here. Your dot plot makes a compelling case! I'd been thinking about this kind of thing for some time, and I agree that there's an opportunity to tune and balance the color tokens.

A couple questions: Is "dull" the best descriptor here? (It's a little... dull.) Would we risk a samey-ness with a whole variant class of unsaturated colors? (I see the opportunity, but might want to see some examples of a whole family or two to be sure we're not just wading into some vast gray-ish swamp.)