Component proposal: Dull colors

[Peter-VanDusartz]

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)

[thisisdano]

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.)

[thisisdano]

Perhaps a good descriptor for an unsaturated set could be calm or muted?

[Peter-VanDusartz]

Is dull the best descriptor?
calm or muted seem like fine descriptors to me. In future responses I’ll use dull, calm and muted interchangeably.

Would we risk samey-ness?
Yes the risk is there. And there is still room for dull colors. In terms of difference, red-muted is to orange-muted as yellow is to yellow-vivid
I think there are two ways to approach adding dull colors to USWDS, while avoiding the vast gray-ish swamp.

1. The easy way is to identify where current colors leave room for calm colors, and squeeze them in. This will require some judgment calls. There may be room for indigo-muted, and violet-warm-muted, but not for violet-muted because it’s just too similar to indigo-muted. Further, there may not be enough room for both gold-muted and yellow-muted. The downside to this approach is that there will be fewer colors total, and some families that deserve more saturated ‘normal’ colors (like the greens), won’t have them.
2. The much more involved way is to rebalance all the USWDS colors, boosting the saturation of vivid and normal colors to make room for dull colors. This will be more important for some color families than others. For instance, red-warm and red-cool are a smidge more dull than red. This could mean boosting the saturation of red-warm, red-warm-vivid, red-cool, and red-cool-vivid to make space for red-warm-calm and red-cool-calm. The downside to this approach is that it will take waaay more work, and result in breaking changes, that could disrupt the aesthetic of sites/applications that have been built with the current color palette.

In order to advance the conversation, I took a crack at some dull color families. All of these colors are a direct copy of their ‘normal’ counterparts, with only the saturation adjusted. This is a crude first draft and does not account for the perceived value change (A more refined approach would be to adjust the lightness/hue values as the saturation value decreases. This could improve color consistency at the [5, 10, 20…] steps across families). I also declined to do the 90s step because many of those colors are already very low in saturation. This is consistent with the way vivid families only go from 5-80.

Things to note from this exploration:
The 50 step of the current color families is much more saturated than all the other steps.
The red-cool-muted family would definitely impinge on the magenta-muted family.
Similarly, the red-warm-muted family would get really close to the orange-muted family.
red-warm-70 and red-warm-80 are very desaturated already.
It’s worth questioning the necessity of the 5 step of the muted colors.
Maybe there is not room for warm and cool variants of calm colors.

My conclusion:
There is definitely room for dull colors. If you want to cover as many hues as possible, you'd have to tune the current families. If you are ok with just adding some basic muted colors, you could probably get away with a list of new families that looks something like the following:

• red-dull
• orange-dull
• yellow-dull
• green-dull
• mint-dull
• cyan-dull
• blue-dull
• indigo-cool-dull**
• violet-dull
• magenta-dull

**In my experiments indigo-cool-dull is different enough from blue-dull and violet-dull while indigo-dull and violet-dull are quite similar.

[amyleadem]

Thanks for starting this discussion, @Peter-VanDusartz. It is an intriguing idea and I am interested to see the discussion here.

One quick administrative note: I just moved this discussion from the "Component proposals" category to the "Ideas" category. At this time, the proposals discussion board is reserved for new USWDS component ideas, and this discussion appears to be focused on new tokens instead. It is a small distinction but one we hope will improve clarity on our discussion board. Please let us know if you have any questions!

[Peter-VanDusartz]

Makes perfect sense. Thanks for keeping things organized.