| Color | Name | Hex | Token | Background class | Font class |
|---|---|---|---|---|---|
| Principal blue | #0076CF | $color-primary | pds-color-bg-primary | pds-color-font-primary | |
| Admiral blue | #0061A0 | $color-core-1 | pds-color-bg-core-1 | pds-color-font-core-1 | |
| True blue | #0091DA | $color-core-2 | pds-color-bg-core-2 | pds-color-font-core-2 | |
| Navy blue | #004C97 | $color-core-3 | pds-color-bg-core-3 | N/A | |
| Sky blue 1 | #F0FBFE | $color-core-4 | pds-color-bg-core-4 | N/A | |
| Sky blue 2 | #E3F5FD | $color-core-5 | pds-color-bg-core-5 | N/A | |
| Sky blue 3 | #D2F1FD | $color-core-6 | pds-color-bg-core-6 | N/A | |
| Sky blue 4 | #BBE6FC | $color-core-7 | pds-color-bg-core-7 | N/A | |
| Prussian blue | #003865 | $color-core-8 | pds-color-bg-core-8 | pds-color-font-core-8 | |
| Dark prussian blue | #002855 | $color-core-9 | pds-color-bg-core-9 | pds-color-font-core-9 |
| Color | Name | Hex | Token | Background class | Font class |
|---|---|---|---|---|---|
| Maya blue | #94D8FA | $color-complementary-1 | pds-color-bg-complementary-1 | pds-color-font-complementary-1 | |
| Dark maya blue | #62B5E5 | $color-complementary-2 | pds-color-bg-complementary-2 | pds-color-font-complementary-2 | |
| Cyan | #00C4D9 | $color-complementary-3 | pds-color-bg-complementary-3 | pds-color-font-complementary-3 | |
| Ocean cyan | #007FA3 | $color-complementary-4 | pds-color-bg-complementary-4 | N/A | |
| Dark ocean cyan | #315470 | $color-complementary-5 | pds-color-bg-complementary-5 | N/A |
| Color | Name | Hex | Token | Background class | Font class |
|---|---|---|---|---|---|
| White | #FFFFFF | $color-neutral-white | pds-color-bg-neutral-white | pds-color-font-neutral-white | |
| Gray 1 | #333333 | $color-neutral-1 | pds-color-bg-neutral-1 | pds-color-font-neutral-1 | |
| Gray 2 | #616267 | $color-neutral-2 | pds-color-bg-neutral-2 | pds-color-font-neutral-2 | |
| Gray 3 | #9D9EA4 | $color-neutral-3 | pds-color-bg-neutral-3 | N/A | |
| Gray 4 | #C5C6C5 | $color-neutral-4 | pds-color-bg-neutral-4 | N/A | |
| Gray 5 | #E8E8E8 | $color-neutral-5 | pds-color-bg-neutral-5 | N/A | |
| Gray 6 | #F6F6F8 | $color-neutral-6 | pds-color-bg-neutral-6 | N/A | |
| Gray 7 | #FBFBFB | $color-neutral-7 | pds-color-bg-neutral-7 | N/A |
To learn more about how to use interactive tint colors on the interactive affordances page.
| Color | Name | Hex | Description | Token | Background class | Font class |
|---|---|---|---|---|---|---|
| Util success | #00A29B | Used to indicate success. Not to be used for text. | $color-utility-success | pds-color-bg-utility-success | N/A | |
| Util warning | #F76800 | Used to indicate a warning. Not to be used for text. | $color-utility-warning | pds-color-bg-utility-warning | N/A | |
| Util error | #C00000 | Used to indicate errors. | $color-utility-error | pds-color-bg-utility-error | pds-color-font-utility-error | |
| Principal blue 110 | #005DB6 | Only intended for use as an interactive tint. Do not use for other purposes. | $color-utility-primary-110 | pds-color-bg-utility-primary-110 | N/A | |
| Principal blue 120 | #00439C | Only intended for use as an interactive tint. Do not use for other purposes. | $color-utility-primary-120 | pds-color-bg-utility-primary-120 | N/A | |
| Admiral blue 110 | #004887 | Only intended for use as an interactive tint. Do not use for other purposes. | $color-utility-core-1-110 | pds-color-bg-utility-core-1-110 | N/A | |
| Admiral blue 120 | #002E6D | Only intended for use as an interactive tint. Do not use for other purposes. | $color-utility-core-1-120 | pds-color-bg-utility-core-1-120 | N/A | |
| Dark prussian 80 | #335B88 | Only intended for use as an interactive tint. Do not use for other purposes. | $color-utility-core-9-80 | pds-color-bg-utility-core-9-80 | N/A | |
| Dark prussian 90 | #1A426F | Only intended for use as an interactive tint. Do not use for other purposes. | $color-utility-core-9-90 | pds-color-bg-utility-core-9-90 | N/A | |
| Dark prussian 110 | #000F3C | Only intended for use as an interactive tint. Do not use for other purposes. | $color-utility-core-9-110 | pds-color-bg-utility-core-9-110 | N/A | |
| Dark prussian 120 | #000022 | Only intended for use as an interactive tint. Do not use for other purposes. | $color-utility-core-9-120 | pds-color-bg-utility-core-9-120 | N/A |
| Color | Name | Hex | Token | Background class | Font class |
|---|---|---|---|---|---|
| Chartreuse | #DCF94D | $color-accent-1 | pds-color-bg-accent-1 | N/A | |
| Bright cyan | #55FFF5 | $color-accent-2 | pds-color-bg-accent-2 | pds-color-font-accent-2 |
| Color | Name | Hex | Token | Background class | Font class |
|---|---|---|---|---|---|
| Data orange | #FFC82E | $color-data-1 | pds-color-bg-data-1 | N/A | |
| Data purple | #9E8BFF | $color-data-2 | pds-color-bg-data-2 | N/A |
| Color | Name | Hex | Token | Background class | Font class |
|---|---|---|---|---|---|
| Dark blue gradient | N/A | N/A | pds-color-bg-dark-blue-gradient | N/A | |
| Principal blue gradient | N/A | N/A | pds-color-bg-principal-blue-gradient | N/A | |
| Light blue gradient | N/A | N/A | pds-color-bg-light-blue-gradient | N/A |