Extended Palette
The extended palette consists of all the useable tints and shades of each color in the palette. Usage of these colors varies depending on the touch point, but they come in handy for illustrations and components in product.
Blues
B300 - Miles Davis
| HEX | #0d2156 |
| RGB | rgb(13, 33, 86) |
| HSL | hsl(223.56, 73.74%, 19.41%) |
| Oklch | oklch(26.95% 0.1 264.75) |
| CSS | var(--B300) |
B200 - ADA Blue (ADA Logo)
| HEX | #143281 |
| RGB | rgb(20, 50, 129) |
| HSL | hsl(223.49, 73.15%, 29.22%) |
| Oklch | oklch(35.01% 0.14 264.41) |
| CSS | var(--B200) |
B100 - Rockies (Primary)
| HEX | #1b43ad |
| RGB | rgb(27, 67, 173) |
| HSL | hsl(223.56, 73%, 39.22%) |
| Oklch | oklch(42.74% 0.18 264.29) |
| CSS | var(--B100) |
B80 - Indigo
| HEX | #4969bd |
| RGB | rgb(73, 105, 189) |
| HSL | hsl(223.45, 46.77%, 51.37%) |
| Oklch | oklch(53.88% 0.14 266.24) |
| CSS | var(--B80) |
B60 - Pacific Bridge
| HEX | #768ece |
| RGB | rgb(118, 142, 206) |
| HSL | hsl(223.64, 47.31%, 63.53%) |
| Oklch | oklch(65.42% 0.1 267.89) |
| CSS | var(--B60) |
B40 - Bling
| HEX | #a4b4de |
| RGB | rgb(164, 180, 222) |
| HSL | hsl(223.45, 46.77%, 75.69%) |
| Oklch | oklch(77.21% 0.06 268.59) |
| CSS | var(--B40) |
B20 - Ice
| HEX | #d1d9ef |
| RGB | rgb(209, 217, 239) |
| HSL | hsl(224, 48.39%, 87.84%) |
| Oklch | oklch(88.59% 0.03 269.8) |
| CSS | var(--B20) |
B00 - Hyperlink
| HEX | #0a0cf5 |
| RGB | rgb(10, 12, 245) |
| HSL | hsl(239.49, 92.16%, 50%) |
| Oklch | oklch(44.41% 0.3 264.82) |
| CSS | var(--B00) |
Neutrals
N900 - Pure Black
| HEX | #000000 |
| RGB | rgb(0, 0, 0) |
| HSL | hsl(0, 0%, 0%) |
| Oklch | oklch(0% 0 0) |
| CSS | var(--N900) |
N600 - Batman
| HEX | #050b16 |
| RGB | rgb(5, 11, 22) |
| HSL | hsl(218.82, 62.96%, 5.29%) |
| Oklch | oklch(14.91% 0.03 259.08) |
| CSS | var(--N600) |
N500 - Black Pearl
| HEX | #04182d |
| RGB | rgb(4, 24, 45) |
| HSL | hsl(210.73, 83.67%, 9.61%) |
| Oklch | oklch(20.55% 0.05 251.13) |
| CSS | var(--N500) |
N400 - Slate (Primary)
| HEX | #1d2c47 |
| RGB | rgb(29, 44, 71) |
| HSL | hsl(218.57, 42%, 19.61%) |
| Oklch | oklch(29.4% 0.05 261.53) |
| CSS | var(--N400) |
N300 - Pet Rock
| HEX | #2f3b55 |
| RGB | rgb(47, 59, 85) |
| HSL | hsl(221.05, 28.79%, 25.88%) |
| Oklch | oklch(35.36% 0.05 264.99) |
| CSS | var(--N300) |
N200 - Fjord
| HEX | #404b63 |
| RGB | rgb(64, 75, 99) |
| HSL | hsl(221.14, 21.47%, 31.96%) |
| Oklch | oklch(41.32% 0.04 265.43) |
| CSS | var(--N200) |
N100 - Comet
| HEX | #525b72 |
| RGB | rgb(82, 91, 114) |
| HSL | hsl(223.13, 16.33%, 38.43%) |
| Oklch | oklch(47.24% 0.04 268.18) |
| CSS | var(--N100) |
N90 - Pale Sky
| HEX | #646c81 |
| RGB | rgb(100, 108, 129) |
| HSL | hsl(223.45, 12.66%, 44.9%) |
| Oklch | oklch(53.22% 0.03 268.78) |
| CSS | var(--N90) |
N80 - Raven
| HEX | #767d90 |
| RGB | rgb(118, 125, 144) |
| HSL | hsl(223.85, 10.48%, 51.37%) |
| Oklch | oklch(59.05% 0.03 269.43) |
| CSS | var(--N80) |
N70 - Manatee
| HEX | #898f9f |
| RGB | rgb(137, 143, 159) |
| HSL | hsl(223.64, 10.28%, 58.04%) |
| Oklch | oklch(65.04% 0.02 269.3) |
| CSS | var(--N70) |
N60 - Earl
| HEX | #9ca1af |
| RGB | rgb(156, 161, 175) |
| HSL | hsl(224.21, 10.61%, 64.9%) |
| Oklch | oklch(70.94% 0.02 270.12) |
| CSS | var(--N60) |
N50 - Aluminum
| HEX | #afb3bf |
| RGB | rgb(175, 179, 191) |
| HSL | hsl(225, 11.11%, 71.76%) |
| Oklch | oklch(76.73% 0.02 271.18) |
| CSS | var(--N50) |
N40 - Ghost
| HEX | #c3c6cf |
| RGB | rgb(195, 198, 207) |
| HSL | hsl(225, 11.11%, 78.82%) |
| Oklch | oklch(82.69% 0.01 271.26) |
| CSS | var(--N40) |
N30 - Concrete
| HEX | #d7d9df |
| RGB | rgb(215, 217, 223) |
| HSL | hsl(225, 11.11%, 85.88%) |
| Oklch | oklch(88.55% 0.01 271.32) |
| CSS | var(--N30) |
N20 - Sugar (Primary)
| HEX | #ebedf0 |
| RGB | rgb(235, 237, 240) |
| HSL | hsl(216, 14.29%, 93.14%) |
| Oklch | oklch(94.54% 0 258.32) |
| CSS | var(--N20) |
N10 - Wash Me
| HEX | #f2f4f6 |
| RGB | rgb(242, 244, 246) |
| HSL | hsl(210, 18.18%, 95.69%) |
| Oklch | oklch(96.62% 0 247.86) |
| CSS | var(--N10) |
N0 - Snow (Primary)
| HEX | #ffffff |
| RGB | rgb(255, 255, 255) |
| HSL | hsl(0, 0%, 100%) |
| Oklch | oklch(100% 0 0) |
| CSS | var(--N0) |
Teals
T400 - Daintree
| HEX | #01323b |
| RGB | rgb(1, 50, 59) |
| HSL | hsl(189.31, 96.67%, 11.76%) |
| Oklch | oklch(29.18% 0.05 213.82) |
| CSS | var(--T400) |
T300 - Blue Steel
| HEX | #025563 |
| RGB | rgb(2, 85, 99) |
| HSL | hsl(188.66, 96.04%, 19.8%) |
| Oklch | oklch(41.35% 0.07 213.85) |
| CSS | var(--T300) |
T200 - Blue Lagoon
| HEX | #037f95 |
| RGB | rgb(3, 127, 149) |
| HSL | hsl(189.04, 96.05%, 29.8%) |
| Oklch | oklch(54.95% 0.1 215.59) |
| CSS | var(--T200) |
T100 - Bob Ross (Primary)
| HEX | #05aac7 |
| RGB | rgb(5, 170, 199) |
| HSL | hsl(188.97, 95.1%, 40%) |
| Oklch | oklch(68% 0.12 215.77) |
| CSS | var(--T100) |
T80 - Prom Dress
| HEX | #37bbd2 |
| RGB | rgb(55, 187, 210) |
| HSL | hsl(188.9, 63.27%, 51.96%) |
| Oklch | oklch(73.22% 0.11 212.01) |
| CSS | var(--T80) |
T60 - Viking
| HEX | #69ccdd |
| RGB | rgb(105, 204, 221) |
| HSL | hsl(188.79, 63.04%, 63.92%) |
| Oklch | oklch(79.16% 0.1 210.05) |
| CSS | var(--T60) |
T40 - Glacier
| HEX | #9bdde9 |
| RGB | rgb(155, 221, 233) |
| HSL | hsl(189.23, 63.93%, 76.08%) |
| Oklch | oklch(85.74% 0.07 210.07) |
| CSS | var(--T40) |
T20 - Blizzard
| HEX | #cdeef4 |
| RGB | rgb(205, 238, 244) |
| HSL | hsl(189.23, 63.93%, 88.04%) |
| Oklch | oklch(92.72% 0.04 209.82) |
| CSS | var(--T20) |
Yellows
Y400 - Saddle Brown
| HEX | #4c3200 |
| RGB | rgb(76, 50, 0) |
| HSL | hsl(39.47, 100%, 14.9%) |
| Oklch | oklch(33.94% 0.07 77.07) |
| CSS | var(--Y400) |
Y300 - Cinnamon
| HEX | #805500 |
| RGB | rgb(128, 85, 0) |
| HSL | hsl(39.84, 100%, 25.1%) |
| Oklch | oklch(48.47% 0.1 75.12) |
| CSS | var(--Y300) |
Y200 - Pirate Gold
| HEX | #bf8000 |
| RGB | rgb(191, 128, 0) |
| HSL | hsl(40.21, 100%, 37.45%) |
| Oklch | oklch(64.84% 0.14 74.48) |
| CSS | var(--Y200) |
Y100 - Butterscotch (Primary)
| HEX | #ffab00 |
| RGB | rgb(255, 171, 0) |
| HSL | hsl(40.24, 100%, 50%) |
| Oklch | oklch(80.34% 0.17 73.79) |
| CSS | var(--Y100) |
Y80 - Sunglow
| HEX | #ffbc33 |
| RGB | rgb(255, 188, 51) |
| HSL | hsl(40.29, 100%, 60%) |
| Oklch | oklch(83.61% 0.16 80.07) |
| CSS | var(--Y80) |
Y60 - Goldbeam
| HEX | #ffcd66 |
| RGB | rgb(255, 205, 102) |
| HSL | hsl(40.39, 100%, 70%) |
| Oklch | oklch(87.26% 0.13 83.41) |
| CSS | var(--Y60) |
Y40 - Cream Brulee
| HEX | #ffdd99 |
| RGB | rgb(255, 221, 153) |
| HSL | hsl(40, 100%, 80%) |
| Oklch | oklch(91.08% 0.09 84.12) |
| CSS | var(--Y40) |
Y20 - Sandy Beach
| HEX | #ffeecc |
| RGB | rgb(255, 238, 204) |
| HSL | hsl(40, 100%, 90%) |
| Oklch | oklch(95.4% 0.05 84.56) |
| CSS | var(--Y20) |
Reds
R400 - Van Cleef
| HEX | #46170d |
| RGB | rgb(70, 23, 13) |
| HSL | hsl(10.53, 68.67%, 16.27%) |
| Oklch | oklch(27.72% 0.07 33.66) |
| CSS | var(--R400) |
R300 - Peanut
| HEX | #742716 |
| RGB | rgb(116, 39, 22) |
| HSL | hsl(10.85, 68.12%, 27.06%) |
| Oklch | oklch(38.63% 0.11 33.99) |
| CSS | var(--R300) |
R200 - Terracotta
| HEX | #ad3b21 |
| RGB | rgb(173, 59, 33) |
| HSL | hsl(11.14, 67.96%, 40.39%) |
| Oklch | oklch(51.22% 0.15 34.21) |
| CSS | var(--R200) |
R100 - Cinnabar (Primary)
| HEX | #e84f2d |
| RGB | rgb(232, 79, 45) |
| HSL | hsl(10.91, 80.26%, 54.31%) |
| Oklch | oklch(63.41% 0.2 33.96) |
| CSS | var(--R100) |
R80 - Burnt Sienna
| HEX | #ed7257 |
| RGB | rgb(237, 114, 87) |
| HSL | hsl(10.8, 80.65%, 63.53%) |
| Oklch | oklch(69.2% 0.16 33.75) |
| CSS | var(--R80) |
R60 - Apricot
| HEX | #f19581 |
| RGB | rgb(241, 149, 129) |
| HSL | hsl(10.71, 80%, 72.55%) |
| Oklch | oklch(75.99% 0.12 33.03) |
| CSS | var(--R60) |
R40 - Manhattan
| HEX | #f6b9ab |
| RGB | rgb(246, 185, 171) |
| HSL | hsl(11.2, 80.65%, 81.76%) |
| Oklch | oklch(83.79% 0.07 33.26) |
| CSS | var(--R40) |
R20 - Champagne
| HEX | #fadcd5 |
| RGB | rgb(250, 220, 213) |
| HSL | hsl(11.35, 78.72%, 90.78%) |
| Oklch | oklch(91.74% 0.03 33.27) |
| CSS | var(--R20) |
Greens
G400 - Forest
| HEX | #0e3124 |
| RGB | rgb(14, 49, 36) |
| HSL | hsl(157.71, 55.56%, 12.35%) |
| Oklch | oklch(28.33% 0.05 165.52) |
| CSS | var(--G400) |
G300 - Green Tea
| HEX | #18523c |
| RGB | rgb(24, 82, 60) |
| HSL | hsl(157.24, 54.72%, 20.78%) |
| Oklch | oklch(39.45% 0.07 164.21) |
| CSS | var(--G300) |
G200 - Eucalyptus
| HEX | #247b5a |
| RGB | rgb(36, 123, 90) |
| HSL | hsl(157.24, 54.72%, 31.18%) |
| Oklch | oklch(52.27% 0.1 163.66) |
| CSS | var(--G200) |
G100 - Mojito (Primary)
| HEX | #31a579 |
| RGB | rgb(49, 165, 121) |
| HSL | hsl(157.24, 54.21%, 41.96%) |
| Oklch | oklch(64.65% 0.12 163.43) |
| CSS | var(--G100) |
G80 - Silver Tree
| HEX | #5ab794 |
| RGB | rgb(90, 183, 148) |
| HSL | hsl(157.42, 39.24%, 53.53%) |
| Oklch | oklch(71.25% 0.1 166.52) |
| CSS | var(--G80) |
G60 - Monte Carlo
| HEX | #83c9af |
| RGB | rgb(131, 201, 175) |
| HSL | hsl(157.71, 39.33%, 65.1%) |
| Oklch | oklch(78.2% 0.08 168.83) |
| CSS | var(--G60) |
G40 - Sinbad
| HEX | #addbc9 |
| RGB | rgb(173, 219, 201) |
| HSL | hsl(156.52, 38.98%, 76.86%) |
| Oklch | oklch(85.39% 0.05 169.16) |
| CSS | var(--G40) |
G20 - Swans Down
| HEX | #d6ede4 |
| RGB | rgb(214, 237, 228) |
| HSL | hsl(156.52, 38.98%, 88.43%) |
| Oklch | oklch(92.67% 0.03 170.26) |
| CSS | var(--G20) |
Purples
P400 - Mirage
| HEX | #1b1733 |
| RGB | rgb(27, 23, 51) |
| HSL | hsl(248.57, 37.84%, 14.51%) |
| Oklch | oklch(22.56% 0.05 287.92) |
| CSS | var(--P400) |
P300 - Port Gore
| HEX | #2e2856 |
| RGB | rgb(46, 40, 86) |
| HSL | hsl(247.83, 36.51%, 24.71%) |
| Oklch | oklch(30.9% 0.08 286.69) |
| CSS | var(--P300) |
P200 - Victoria
| HEX | #453b81 |
| RGB | rgb(69, 59, 129) |
| HSL | hsl(248.57, 37.23%, 36.86%) |
| Oklch | oklch(40.05% 0.11 286.63) |
| CSS | var(--P200) |
P100 - Prince (Primary)
| HEX | #5d50ad |
| RGB | rgb(93, 80, 173) |
| HSL | hsl(248.39, 36.76%, 49.61%) |
| Oklch | oklch(49.24% 0.14 286.29) |
| CSS | var(--P100) |
P80 - Ship Cove
| HEX | #7d73bd |
| RGB | rgb(125, 115, 189) |
| HSL | hsl(248.11, 35.92%, 59.61%) |
| Oklch | oklch(59.59% 0.11 288.75) |
| CSS | var(--P80) |
P60 - Blue Bell
| HEX | #9e96ce |
| RGB | rgb(158, 150, 206) |
| HSL | hsl(248.57, 36.36%, 69.8%) |
| Oklch | oklch(70.04% 0.08 290.68) |
| CSS | var(--P60) |
P40 - Pigeon Post
| HEX | #beb9de |
| RGB | rgb(190, 185, 222) |
| HSL | hsl(248.11, 35.92%, 79.8%) |
| Oklch | oklch(80.19% 0.05 291.38) |
| CSS | var(--P40) |
P20 - Snuff
| HEX | #dfdcef |
| RGB | rgb(223, 220, 239) |
| HSL | hsl(249.47, 37.25%, 90%) |
| Oklch | oklch(90.25% 0.03 293.13) |
| CSS | var(--P20) |