About this tool

This tool was built to help match colors to colors that are defined within the USWDS design system. It was built by and is maintained by CivicActions.

You can learn more about color usage in USWDS here.

The colors are pulled from USWDS using background utility classes. You can see which version of USWDS the css is compiled from at the top of the color comparison box. If this version is out of date or if you want to switch to a different version, you can fork the repo for this tool and change the USWDS version then re-compile.

How to use this tool

This tool can be used to browse the available colors from USWDS. Clicking on a swatch will show the color's name and hex value in the comparison box.

The dashed boxes containing the color families can be sorted by clicking and dragging.

If you have an existing color that you would like to match, enter it into the input within the comparison box. Once a valid color is entered, the color will fill the first box and the closest match from USWDS will fill the second box. From this point you can still click other swatches to compare your color with different USWDS colors.

The state of the tool is not saved, on reload your selections and sorts will be reverted back to their original states.

Resources

This tool is built with the following tools:

If you have any issues or requests feel free to create an issue or pull request here: https://github.com/CivicActions/uswds-color-tool

Colors from USWDS - 2.7.1
Enter a color with # example: #333333
Click on a color in the swatches.

Red Cool

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Red

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Red Warm

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Orange Warm

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Orange

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Gold

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Yellow

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Green Warm

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Green

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Green Cool

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Mint

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Mint Cool

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Cyan

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Blue Cool

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Blue

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Blue Warm

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Indigo Cool

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Indigo

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Indigo Warm

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Violet

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Violet Warm

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Magenta

5
10
20
30
40
50
60
70
80
90
5
10
20
30
40
50
60
70
80
90

Gray

1
2
3
4
5
10
20
30
40
50
60
70
80
90

Gray Cool

1
2
3
4
5
10
20
30
40
50
60
70
80
90

Gray Warm

1
2
3
4
5
10
20
30
40
50
60
70
80
90