USWDS System colors
USWDS system color tokens are a complete palette of color tokens put together by USWDS.
Additional color guidance
- Theme colors: The select pallet of colors for your projects.
- State colors: The colors for warnings, errors, and other states.
- USWDS System colors: The underlying palette of color tokens from USWDS.
System colors
Red Family
Red cool
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| red-cool-5 | #f8eff1 | 248, 239, 241 | |
| red-cool-10 | #f3e1e4 | 243, 225, 228 | |
| red-cool-20 | #ecbec6 | 236, 190, 198 | |
| red-cool-30 | #e09aa6 | 224, 154, 166 | |
| red-cool-40 | #e16b80 | 225, 107, 128 | |
| red-cool-50 | #cd425b | 205, 66, 91 | |
| red-cool-60 | #9e394b | 158, 57, 75 | |
| red-cool-70 | #68363f | 104, 54, 63 | |
| red-cool-80 | #40282c | 64, 40, 44 | |
| red-cool-90 | #1e1517 | 30, 21, 23 |
Red cool vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| red-cool-5v | #fff2f5 | 255, 242, 245 | |
| red-cool-10v | #f8dfe2 | 248, 223, 226 | |
| red-cool-20v | #f8b9c5 | 248, 185, 197 | |
| red-cool-30v | #fd8ba0 | 253, 139, 160 | |
| red-cool-40v | #f45d79 | 244, 93, 121 | |
| red-cool-50v | #e41d3d | 228, 29, 61 | |
| red-cool-60v | #b21d38 | 178, 29, 56 | |
| red-cool-70v | #822133 | 130, 33, 51 | |
| red-cool-80v | #4f1c24 | 79, 28, 36 |
Red
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| red-5 | #f9eeee | 249, 238, 238 | |
| red-10 | #f8e1de | 248, 225, 222 | |
| red-20 | #f7bbb1 | 247, 187, 177 | |
| red-30 | #f2938c | 242, 147, 140 | |
| red-40 | #e9695f | 233, 105, 95 | |
| red-50 | #d83933 | 216, 57, 51 | |
| red-60 | #a23737 | 162, 55, 55 | |
| red-70 | #6f3331 | 111, 51, 49 | |
| red-80 | #3e2927 | 62, 41, 39 | |
| red-90 | #1b1616 | 27, 22, 22 |
Red warm
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| red-warm-5 | #f6efea | 246, 239, 234 | |
| red-warm-10 | #f4e3db | 244, 227, 219 | |
| red-warm-20 | #ecc0a7 | 236, 192, 167 | |
| red-warm-30 | #dca081 | 220, 160, 129 | |
| red-warm-40 | #d27a56 | 210, 122, 86 | |
| red-warm-50 | #c3512c | 195, 81, 44 | |
| red-warm-60 | #805039 | 128, 80, 57 | |
| red-warm-70 | #524236 | 82, 66, 54 | |
| red-warm-80 | #332d29 | 51, 45, 41 | |
| red-warm-90 | #1f1c18 | 31, 28, 24 |
Red warm vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| red-warm-5v | #fff5ee | 255, 245, 238 | |
| red-warm-10v | #fce1d4 | 252, 225, 212 | |
| red-warm-20v | #f6bd9c | 246, 189, 156 | |
| red-warm-30v | #f39268 | 243, 146, 104 | |
| red-warm-40v | #ef5e25 | 239, 94, 37 | |
| red-warm-50v | #d54309 | 213, 67, 9 | |
| red-warm-60v | #9c3d10 | 156, 61, 16 | |
| red-warm-70v | #63340f | 99, 52, 15 | |
| red-warm-80v | #3e2a1e | 62, 42, 30 |
Red vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| red-5v | #fff3f2 | 255, 243, 242 | |
| red-10v | #fde0db | 253, 224, 219 | |
| red-20v | #fdb8ae | 253, 184, 174 | |
| red-30v | #ff8d7b | 255, 141, 123 | |
| red-40v | #fb5a47 | 251, 90, 71 | |
| red-50v | #e52207 | 229, 34, 7 | |
| red-60v | #b50909 | 181, 9, 9 | |
| red-70v | #8b0a03 | 139, 10, 3 | |
| red-80v | #5c1111 | 92, 17, 17 |
Orange Family
Orange warm
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| orange-warm-5 | #faeee5 | 250, 238, 229 | |
| orange-warm-10 | #fbe0d0 | 251, 224, 208 | |
| orange-warm-20 | #f7bca2 | 247, 188, 162 | |
| orange-warm-30 | #f3966d | 243, 150, 109 | |
| orange-warm-40 | #e17141 | 225, 113, 65 | |
| orange-warm-50 | #bd5727 | 189, 87, 39 | |
| orange-warm-60 | #914734 | 145, 71, 52 | |
| orange-warm-70 | #633a32 | 99, 58, 50 | |
| orange-warm-80 | #3d2925 | 61, 41, 37 | |
| orange-warm-90 | #1c1615 | 28, 22, 21 |
Orange warm vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| orange-warm-5v | #fff3ea | 255, 243, 234 | |
| orange-warm-10v | #ffe2d1 | 255, 226, 209 | |
| orange-warm-20v | #fbbaa7 | 251, 186, 167 | |
| orange-warm-30v | #fc906d | 252, 144, 109 | |
| orange-warm-40v | #ff580a | 255, 88, 10 | |
| orange-warm-50v | #cf4900 | 207, 73, 0 | |
| orange-warm-60v | #a72f10 | 167, 47, 16 | |
| orange-warm-70v | #782312 | 120, 35, 18 | |
| orange-warm-80v | #3d231d | 61, 35, 29 |
Orange
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| orange-5 | #f6efe9 | 246, 239, 233 | |
| orange-10 | #f2e4d4 | 242, 228, 212 | |
| orange-20 | #f3bf90 | 243, 191, 144 | |
| orange-30 | #f09860 | 240, 152, 96 | |
| orange-40 | #dd7533 | 221, 117, 51 | |
| orange-50 | #a86437 | 168, 100, 55 | |
| orange-60 | #775540 | 119, 85, 64 | |
| orange-70 | #524236 | 82, 66, 54 | |
| orange-80 | #332d27 | 51, 45, 39 | |
| orange-90 | #1b1614 | 27, 22, 20 |
Orange vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| orange-5v | #fef2e4 | 254, 242, 228 | |
| orange-10v | #fce2c5 | 252, 226, 197 | |
| orange-20v | #ffbc78 | 255, 188, 120 | |
| orange-30v | #fa9441 | 250, 148, 65 | |
| orange-40v | #e66f0e | 230, 111, 14 | |
| orange-50v | #c05600 | 192, 86, 0 | |
| orange-60v | #8c471c | 140, 71, 28 | |
| orange-70v | #5f3617 | 95, 54, 23 | |
| orange-80v | #352313 | 53, 35, 19 |
Gold Family
Gold
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| gold-5 | #f5f0e6 | 245, 240, 230 | |
| gold-10 | #f1e5cd | 241, 229, 205 | |
| gold-20 | #dec69a | 222, 198, 154 | |
| gold-30 | #c7a97b | 199, 169, 123 | |
| gold-40 | #ad8b65 | 173, 139, 101 | |
| gold-50 | #8e704f | 142, 112, 79 | |
| gold-60 | #6b5947 | 107, 89, 71 | |
| gold-70 | #4d4438 | 77, 68, 56 | |
| gold-80 | #322d26 | 50, 45, 38 | |
| gold-90 | #191714 | 25, 23, 20 |
Gold vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| gold-5v | #fef0c8 | 254, 240, 200 | |
| gold-10v | #ffe396 | 255, 227, 150 | |
| gold-20v | #ffbe2e | 255, 190, 46 | |
| gold-30v | #e5a000 | 229, 160, 0 | |
| gold-40v | #c2850c | 194, 133, 12 | |
| gold-50v | #936f38 | 147, 111, 56 | |
| gold-60v | #7a591a | 122, 89, 26 | |
| gold-70v | #5c410a | 92, 65, 10 | |
| gold-80v | #3b2b15 | 59, 43, 21 |
Yellow Family
Yellow
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| yellow-5 | #faf3d1 | 250, 243, 209 | |
| yellow-10 | #f5e6af | 245, 230, 175 | |
| yellow-20 | #e6c74c | 230, 199, 76 | |
| yellow-30 | #c9ab48 | 201, 171, 72 | |
| yellow-40 | #a88f48 | 168, 143, 72 | |
| yellow-50 | #8a7237 | 138, 114, 55 | |
| yellow-60 | #6b5a39 | 107, 90, 57 | |
| yellow-70 | #504332 | 80, 67, 50 | |
| yellow-80 | #332d27 | 51, 45, 39 | |
| yellow-90 | #1a1614 | 26, 22, 20 |
Yellow vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| yellow-5v | #fff5c2 | 255, 245, 194 | |
| yellow-10v | #fee685 | 254, 230, 133 | |
| yellow-20v | #face00 | 250, 206, 0 | |
| yellow-30v | #ddaa01 | 221, 170, 1 | |
| yellow-40v | #b38c00 | 179, 140, 0 | |
| yellow-50v | #947100 | 148, 113, 0 | |
| yellow-60v | #776017 | 119, 96, 23 | |
| yellow-70v | #5c4809 | 92, 72, 9 | |
| yellow-80v | #422d19 | 66, 45, 25 |
Green Family
Green warm
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| green-warm-5 | #f1f4d7 | 241, 244, 215 | |
| green-warm-10 | #e7eab7 | 231, 234, 183 | |
| green-warm-20 | #cbd17a | 203, 209, 122 | |
| green-warm-30 | #a6b557 | 166, 181, 87 | |
| green-warm-40 | #8a984b | 138, 152, 75 | |
| green-warm-50 | #6f7a41 | 111, 122, 65 | |
| green-warm-60 | #5a5f38 | 90, 95, 56 | |
| green-warm-70 | #45472f | 69, 71, 47 | |
| green-warm-80 | #2d2f21 | 45, 47, 33 | |
| green-warm-90 | #171712 | 23, 23, 18 |
Green warm vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| green-warm-5v | #f5fbc1 | 245, 251, 193 | |
| green-warm-10v | #e7f434 | 231, 244, 52 | |
| green-warm-20v | #c5d30a | 197, 211, 10 | |
| green-warm-30v | #a3b72c | 163, 183, 44 | |
| green-warm-40v | #7e9c1d | 126, 156, 29 | |
| green-warm-50v | #6a7d00 | 106, 125, 0 | |
| green-warm-60v | #5a6613 | 90, 102, 19 | |
| green-warm-70v | #4b4e10 | 75, 78, 16 | |
| green-warm-80v | #38380b | 56, 56, 11 |
Green
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| green-5 | #eaf4dd | 234, 244, 221 | |
| green-10 | #dfeacd | 223, 234, 205 | |
| green-20 | #b8d293 | 184, 210, 147 | |
| green-30 | #9bb672 | 155, 182, 114 | |
| green-40 | #7d9b4e | 125, 155, 78 | |
| green-50 | #607f35 | 96, 127, 53 | |
| green-60 | #4c6424 | 76, 100, 36 | |
| green-70 | #3c4a29 | 60, 74, 41 | |
| green-80 | #293021 | 41, 48, 33 | |
| green-90 | #161814 | 22, 24, 20 |
Green vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| green-5v | #ddf9c7 | 221, 249, 199 | |
| green-10v | #c5ee93 | 197, 238, 147 | |
| green-20v | #98d035 | 152, 208, 53 | |
| green-30v | #7fb135 | 127, 177, 53 | |
| green-40v | #719f2a | 113, 159, 42 | |
| green-50v | #538200 | 83, 130, 0 | |
| green-60v | #466c04 | 70, 108, 4 | |
| green-70v | #2f4a0b | 47, 74, 11 | |
| green-80v | #243413 | 36, 52, 19 |
Green cool
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| green-cool-5 | #ecf3ec | 236, 243, 236 | |
| green-cool-10 | #dbebde | 219, 235, 222 | |
| green-cool-20 | #b4d0b9 | 180, 208, 185 | |
| green-cool-30 | #86b98e | 134, 185, 142 | |
| green-cool-40 | #5e9f69 | 94, 159, 105 | |
| green-cool-50 | #4d8055 | 77, 128, 85 | |
| green-cool-60 | #446443 | 68, 100, 67 | |
| green-cool-70 | #37493b | 55, 73, 59 | |
| green-cool-80 | #28312a | 40, 49, 42 | |
| green-cool-90 | #1a1f1a | 26, 31, 26 |
Green cool vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| green-cool-5v | #e3f5e1 | 227, 245, 225 | |
| green-cool-10v | #b7f5bd | 183, 245, 189 | |
| green-cool-20v | #70e17b | 112, 225, 123 | |
| green-cool-30v | #21c834 | 33, 200, 52 | |
| green-cool-40v | #00a91c | 0, 169, 28 | |
| green-cool-50v | #008817 | 0, 136, 23 | |
| green-cool-60v | #216e1f | 33, 110, 31 | |
| green-cool-70v | #154c21 | 21, 76, 33 | |
| green-cool-80v | #19311e | 25, 49, 30 |
Mint Family
Mint
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| mint-5 | #dbf6ed | 219, 246, 237 | |
| mint-10 | #c7efe2 | 199, 239, 226 | |
| mint-20 | #92d9bb | 146, 217, 187 | |
| mint-30 | #5abf95 | 90, 191, 149 | |
| mint-40 | #34a37e | 52, 163, 126 | |
| mint-50 | #2e8367 | 46, 131, 103 | |
| mint-60 | #286846 | 40, 104, 70 | |
| mint-70 | #204e34 | 32, 78, 52 | |
| mint-80 | #193324 | 25, 51, 36 | |
| mint-90 | #0d1a12 | 13, 26, 18 |
Mint vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| mint-5v | #c9fbeb | 201, 251, 235 | |
| mint-10v | #83fcd4 | 131, 252, 212 | |
| mint-20v | #0ceda6 | 12, 237, 166 | |
| mint-30v | #04c585 | 4, 197, 133 | |
| mint-40v | #00a871 | 0, 168, 113 | |
| mint-50v | #008659 | 0, 134, 89 | |
| mint-60v | #146947 | 20, 105, 71 | |
| mint-70v | #0c4e29 | 12, 78, 41 | |
| mint-80v | #0d351e | 13, 53, 30 |
Mint cool
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| mint-cool-5 | #e0f7f6 | 224, 247, 246 | |
| mint-cool-10 | #c4eeeb | 196, 238, 235 | |
| mint-cool-20 | #9bd4cf | 155, 212, 207 | |
| mint-cool-30 | #6fbab3 | 111, 186, 179 | |
| mint-cool-40 | #4f9e99 | 79, 158, 153 | |
| mint-cool-50 | #40807e | 64, 128, 126 | |
| mint-cool-60 | #376462 | 55, 100, 98 | |
| mint-cool-70 | #2a4b45 | 42, 75, 69 | |
| mint-cool-80 | #203131 | 32, 49, 49 | |
| mint-cool-90 | #111818 | 17, 24, 24 |
Mint cool vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| mint-cool-5v | #d5fbf3 | 213, 251, 243 | |
| mint-cool-10v | #7efbe1 | 126, 251, 225 | |
| mint-cool-20v | #29e1cb | 41, 225, 203 | |
| mint-cool-30v | #1dc2ae | 29, 194, 174 | |
| mint-cool-40v | #00a398 | 0, 163, 152 | |
| mint-cool-50v | #008480 | 0, 132, 128 | |
| mint-cool-60v | #0f6460 | 15, 100, 96 | |
| mint-cool-70v | #0b4b3f | 11, 75, 63 | |
| mint-cool-80v | #123131 | 18, 49, 49 |
Cyan Family
Cyan
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| cyan-5 | #e7f6f8 | 231, 246, 248 | |
| cyan-10 | #ccecf2 | 204, 236, 242 | |
| cyan-20 | #99deea | 153, 222, 234 | |
| cyan-30 | #5dc0d1 | 93, 192, 209 | |
| cyan-40 | #449dac | 68, 157, 172 | |
| cyan-50 | #168092 | 22, 128, 146 | |
| cyan-60 | #2a646d | 42, 100, 109 | |
| cyan-70 | #2c4a4e | 44, 74, 78 | |
| cyan-80 | #203133 | 32, 49, 51 | |
| cyan-90 | #111819 | 17, 24, 25 |
Cyan vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| cyan-5v | #e5faff | 229, 250, 255 | |
| cyan-10v | #a8f2ff | 168, 242, 255 | |
| cyan-20v | #52daf2 | 82, 218, 242 | |
| cyan-30v | #00bde3 | 0, 189, 227 | |
| cyan-40v | #009ec1 | 0, 158, 193 | |
| cyan-50v | #0081a1 | 0, 129, 161 | |
| cyan-60v | #00687d | 0, 104, 125 | |
| cyan-70v | #0e4f5c | 14, 79, 92 | |
| cyan-80v | #093b44 | 9, 59, 68 |
Blue Family
Blue cool
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| blue-cool-5 | #e7f2f5 | 231, 242, 245 | |
| blue-cool-10 | #dae9ee | 218, 233, 238 | |
| blue-cool-20 | #adcfdc | 173, 207, 220 | |
| blue-cool-30 | #82b4c9 | 130, 180, 201 | |
| blue-cool-40 | #6499af | 100, 153, 175 | |
| blue-cool-50 | #3a7d95 | 58, 125, 149 | |
| blue-cool-60 | #2e6276 | 46, 98, 118 | |
| blue-cool-70 | #224a58 | 34, 74, 88 | |
| blue-cool-80 | #14333d | 20, 51, 61 | |
| blue-cool-90 | #0f191c | 15, 25, 28 |
Blue cool vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| blue-cool-5v | #e1f3f8 | 225, 243, 248 | |
| blue-cool-10v | #c3ebfa | 195, 235, 250 | |
| blue-cool-20v | #97d4ea | 151, 212, 234 | |
| blue-cool-30v | #59b9de | 89, 185, 222 | |
| blue-cool-40v | #28a0cb | 40, 160, 203 | |
| blue-cool-50v | #0d7ea2 | 13, 126, 162 | |
| blue-cool-60v | #07648d | 7, 100, 141 | |
| blue-cool-70v | #074b69 | 7, 75, 105 | |
| blue-cool-80v | #002d3f | 0, 45, 63 |
Blue
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| blue-5 | #eff6fb | 239, 246, 251 | |
| blue-10 | #d9e8f6 | 217, 232, 246 | |
| blue-20 | #aacdec | 170, 205, 236 | |
| blue-30 | #73b3e7 | 115, 179, 231 | |
| blue-40 | #4f97d1 | 79, 151, 209 | |
| blue-50 | #2378c3 | 35, 120, 195 | |
| blue-60 | #2c608a | 44, 96, 138 | |
| blue-70 | #274863 | 39, 72, 99 | |
| blue-80 | #1f303e | 31, 48, 62 | |
| blue-90 | #11181d | 17, 24, 29 |
Blue vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| blue-5v | #e8f5ff | 232, 245, 255 | |
| blue-10v | #cfe8ff | 207, 232, 255 | |
| blue-20v | #a1d3ff | 161, 211, 255 | |
| blue-30v | #58b4ff | 88, 180, 255 | |
| blue-40v | #2491ff | 36, 145, 255 | |
| blue-50v | #0076d6 | 0, 118, 214 | |
| blue-60v | #005ea2 | 0, 94, 162 | |
| blue-70v | #0b4778 | 11, 71, 120 | |
| blue-80v | #112f4e | 17, 47, 78 |
Blue warm
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| blue-warm-5 | #ecf1f7 | 236, 241, 247 | |
| blue-warm-10 | #e1e7f1 | 225, 231, 241 | |
| blue-warm-20 | #bbcae4 | 187, 202, 228 | |
| blue-warm-30 | #98afd2 | 152, 175, 210 | |
| blue-warm-40 | #7292c7 | 114, 146, 199 | |
| blue-warm-50 | #4a77b4 | 74, 119, 180 | |
| blue-warm-60 | #345d96 | 52, 93, 150 | |
| blue-warm-70 | #2f4668 | 47, 70, 104 | |
| blue-warm-80 | #252f3e | 37, 47, 62 | |
| blue-warm-90 | #13171f | 19, 23, 31 |
Blue warm vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| blue-warm-5v | #edf5ff | 237, 245, 255 | |
| blue-warm-10v | #d4e5ff | 212, 229, 255 | |
| blue-warm-20v | #adcdff | 173, 205, 255 | |
| blue-warm-30v | #81aefc | 129, 174, 252 | |
| blue-warm-40v | #5994f6 | 89, 148, 246 | |
| blue-warm-50v | #2672de | 38, 114, 222 | |
| blue-warm-60v | #0050d8 | 0, 80, 216 | |
| blue-warm-70v | #1a4480 | 26, 68, 128 | |
| blue-warm-80v | #162e51 | 22, 46, 81 |
Indigo Family
Indigo cool
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| indigo-cool-5 | #eef0f9 | 238, 240, 249 | |
| indigo-cool-10 | #e1e6f9 | 225, 230, 249 | |
| indigo-cool-20 | #bbc8f5 | 187, 200, 245 | |
| indigo-cool-30 | #96abee | 150, 171, 238 | |
| indigo-cool-40 | #6b8ee8 | 107, 142, 232 | |
| indigo-cool-50 | #496fd8 | 73, 111, 216 | |
| indigo-cool-60 | #3f57a6 | 63, 87, 166 | |
| indigo-cool-70 | #374274 | 55, 66, 116 | |
| indigo-cool-80 | #292d42 | 41, 45, 66 | |
| indigo-cool-90 | #151622 | 21, 22, 34 |
Indigo cool vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| indigo-cool-5v | #edf0ff | 237, 240, 255 | |
| indigo-cool-10v | #dee5ff | 222, 229, 255 | |
| indigo-cool-20v | #b8c8ff | 184, 200, 255 | |
| indigo-cool-30v | #94adff | 148, 173, 255 | |
| indigo-cool-40v | #628ef4 | 98, 142, 244 | |
| indigo-cool-50v | #4866ff | 72, 102, 255 | |
| indigo-cool-60v | #3e4ded | 62, 77, 237 | |
| indigo-cool-70v | #222fbf | 34, 47, 191 | |
| indigo-cool-80v | #1b2b85 | 27, 43, 133 |
Indigo
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| indigo-5 | #efeff8 | 239, 239, 248 | |
| indigo-10 | #e5e4fa | 229, 228, 250 | |
| indigo-20 | #c5c5f3 | 197, 197, 243 | |
| indigo-30 | #a5a8eb | 165, 168, 235 | |
| indigo-40 | #8889db | 136, 137, 219 | |
| indigo-50 | #676cc8 | 103, 108, 200 | |
| indigo-60 | #4d52af | 77, 82, 175 | |
| indigo-70 | #3d4076 | 61, 64, 118 | |
| indigo-80 | #2b2c40 | 43, 44, 64 | |
| indigo-90 | #16171f | 22, 23, 31 |
Indigo vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| indigo-5v | #f0f0ff | 240, 240, 255 | |
| indigo-10v | #e0e0ff | 224, 224, 255 | |
| indigo-20v | #ccceff | 204, 206, 255 | |
| indigo-30v | #a3a7fa | 163, 167, 250 | |
| indigo-40v | #8289ff | 130, 137, 255 | |
| indigo-50v | #656bd7 | 101, 107, 215 | |
| indigo-60v | #4a50c4 | 74, 80, 196 | |
| indigo-70v | #3333a3 | 51, 51, 163 | |
| indigo-80v | #212463 | 33, 36, 99 |
Indigo warm
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| indigo-warm-5 | #f1eff7 | 241, 239, 247 | |
| indigo-warm-10 | #e7e3fa | 231, 227, 250 | |
| indigo-warm-20 | #cbc4f2 | 203, 196, 242 | |
| indigo-warm-30 | #afa5e8 | 175, 165, 232 | |
| indigo-warm-40 | #9287d8 | 146, 135, 216 | |
| indigo-warm-50 | #7665d1 | 118, 101, 209 | |
| indigo-warm-60 | #5e519e | 94, 81, 158 | |
| indigo-warm-70 | #453c7b | 69, 60, 123 | |
| indigo-warm-80 | #2e2c40 | 46, 44, 64 | |
| indigo-warm-90 | #18161d | 24, 22, 29 |
Indigo warm vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| indigo-warm-5v | #f5f2ff | 245, 242, 255 | |
| indigo-warm-10v | #e4deff | 228, 222, 255 | |
| indigo-warm-20v | #cfc4fd | 207, 196, 253 | |
| indigo-warm-30v | #b69fff | 182, 159, 255 | |
| indigo-warm-40v | #967efb | 150, 126, 251 | |
| indigo-warm-50v | #745fe9 | 116, 95, 233 | |
| indigo-warm-60v | #5942d2 | 89, 66, 210 | |
| indigo-warm-70v | #3d2c9d | 61, 44, 157 | |
| indigo-warm-80v | #261f5b | 38, 31, 91 |
Violet Family
Violet
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| violet-5 | #f4f1f9 | 244, 241, 249 | |
| violet-10 | #ebe3f9 | 235, 227, 249 | |
| violet-20 | #d0c3e9 | 208, 195, 233 | |
| violet-30 | #b8a2e3 | 184, 162, 227 | |
| violet-40 | #9d84d2 | 157, 132, 210 | |
| violet-50 | #8168b3 | 129, 104, 179 | |
| violet-60 | #665190 | 102, 81, 144 | |
| violet-70 | #4c3d69 | 76, 61, 105 | |
| violet-80 | #312b3f | 49, 43, 63 | |
| violet-90 | #18161d | 24, 22, 29 |
Violet vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| violet-5v | #f7f2ff | 247, 242, 255 | |
| violet-10v | #ede3ff | 237, 227, 255 | |
| violet-20v | #d5bfff | 213, 191, 255 | |
| violet-30v | #c39deb | 195, 157, 235 | |
| violet-40v | #ad79e9 | 173, 121, 233 | |
| violet-50v | #9355dc | 147, 85, 220 | |
| violet-60v | #783cb9 | 120, 60, 185 | |
| violet-70v | #54278f | 84, 39, 143 | |
| violet-80v | #39215e | 57, 33, 94 |
Violet warm
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| violet-warm-5 | #f8f0f9 | 248, 240, 249 | |
| violet-warm-10 | #f6dff8 | 246, 223, 248 | |
| violet-warm-20 | #e2bee4 | 226, 190, 228 | |
| violet-warm-30 | #d29ad8 | 210, 154, 216 | |
| violet-warm-40 | #bf77c8 | 191, 119, 200 | |
| violet-warm-50 | #b04abd | 176, 74, 189 | |
| violet-warm-60 | #864381 | 134, 67, 129 | |
| violet-warm-70 | #5c395a | 92, 57, 90 | |
| violet-warm-80 | #382936 | 56, 41, 54 | |
| violet-warm-90 | #1b151b | 27, 21, 27 |
Violet warm vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| violet-warm-5v | #fef2ff | 254, 242, 255 | |
| violet-warm-10v | #fbdcff | 251, 220, 255 | |
| violet-warm-20v | #f4b2ff | 244, 178, 255 | |
| violet-warm-30v | #ee83ff | 238, 131, 255 | |
| violet-warm-40v | #d85bef | 216, 91, 239 | |
| violet-warm-50v | #be32d0 | 190, 50, 208 | |
| violet-warm-60v | #93348c | 147, 52, 140 | |
| violet-warm-70v | #711e6c | 113, 30, 108 | |
| violet-warm-80v | #481441 | 72, 20, 65 |
Magenta Family
Magenta
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| magenta-5 | #f9f0f2 | 249, 240, 242 | |
| magenta-10 | #f6e1e8 | 246, 225, 232 | |
| magenta-20 | #f0bbcc | 240, 187, 204 | |
| magenta-30 | #e895b3 | 232, 149, 179 | |
| magenta-40 | #e0699f | 224, 105, 159 | |
| magenta-50 | #c84281 | 200, 66, 129 | |
| magenta-60 | #8b4566 | 139, 69, 102 | |
| magenta-70 | #66364b | 102, 54, 75 | |
| magenta-80 | #402731 | 64, 39, 49 | |
| magenta-90 | #1b1617 | 27, 22, 23 |
Magenta vivid
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| magenta-5v | #fff2f5 | 255, 242, 245 | |
| magenta-10v | #ffddea | 255, 221, 234 | |
| magenta-20v | #ffb4cf | 255, 180, 207 | |
| magenta-30v | #ff87b2 | 255, 135, 178 | |
| magenta-40v | #fd4496 | 253, 68, 150 | |
| magenta-50v | #d72d79 | 215, 45, 121 | |
| magenta-60v | #ab2165 | 171, 33, 101 | |
| magenta-70v | #731f44 | 115, 31, 68 | |
| magenta-80v | #4f172e | 79, 23, 46 |
Gray Family
Gray cool
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| gray-cool-1 | #fbfcfd | 251, 252, 253 | |
| gray-cool-2 | #f7f9fa | 247, 249, 250 | |
| gray-cool-3 | #f5f6f7 | 245, 246, 247 | |
| gray-cool-4 | #f1f3f6 | 241, 243, 246 | |
| gray-cool-5 | #edeff0 | 237, 239, 240 | |
| gray-cool-10 | #dfe1e2 | 223, 225, 226 | |
| gray-cool-20 | #c6cace | 198, 202, 206 | |
| gray-cool-30 | #a9aeb1 | 169, 174, 177 | |
| gray-cool-40 | #8d9297 | 141, 146, 151 | |
| gray-cool-50 | #71767a | 113, 118, 122 | |
| gray-cool-60 | #565c65 | 86, 92, 101 | |
| gray-cool-70 | #3d4551 | 61, 69, 81 | |
| gray-cool-80 | #2d2e2f | 45, 46, 47 | |
| gray-cool-90 | #1c1d1f | 28, 29, 31 |
Gray
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| gray-1 | #fcfcfc | 252, 252, 252 | |
| gray-2 | #f9f9f9 | 249, 249, 249 | |
| gray-3 | #f6f6f6 | 246, 246, 246 | |
| gray-4 | #f3f3f3 | 243, 243, 243 | |
| gray-5 | #f0f0f0 | 240, 240, 240 | |
| gray-10 | #e6e6e6 | 230, 230, 230 | |
| gray-20 | #c9c9c9 | 201, 201, 201 | |
| gray-30 | #adadad | 173, 173, 173 | |
| gray-40 | #919191 | 145, 145, 145 | |
| gray-50 | #757575 | 117, 117, 117 | |
| gray-60 | #5c5c5c | 92, 92, 92 | |
| gray-70 | #454545 | 69, 69, 69 | |
| gray-80 | #2e2e2e | 46, 46, 46 | |
| gray-90 | #1b1b1b | 27, 27, 27 |
Gray warm
| CSS Class | Hex Code | RGB | Example |
|---|---|---|---|
| gray-warm-1 | #fcfcfb | 252, 252, 251 | |
| gray-warm-2 | #f9f9f7 | 249, 249, 247 | |
| gray-warm-3 | #f6f6f2 | 246, 246, 242 | |
| gray-warm-4 | #f5f5f0 | 245, 245, 240 | |
| gray-warm-5 | #f0f0ec | 240, 240, 236 | |
| gray-warm-10 | #e6e6e2 | 230, 230, 226 | |
| gray-warm-20 | #cac9c0 | 202, 201, 192 | |
| gray-warm-30 | #afaea2 | 175, 174, 162 | |
| gray-warm-40 | #929285 | 146, 146, 133 | |
| gray-warm-50 | #76766a | 118, 118, 106 | |
| gray-warm-60 | #5d5d52 | 93, 93, 82 | |
| gray-warm-70 | #454540 | 69, 69, 64 | |
| gray-warm-80 | #2e2e2a | 46, 46, 42 | |
| gray-warm-90 | #171716 | 23, 23, 22 |
