Skip to content


Design System
Home Design System Styles Colors


Our color palette uses accents of bright colors backed by an overall neutral tone.


The full SDS color palette is a super-set of our brand colors.

Applying colors 


When applying colors using HTML classes or CSS vars:

  • Colors referenced using a named suffix are dynamic and will changed to the contrasting color if dark mode is enabled.
  • Colors referenced using a numbered suffix are fixed and do not change if dark mode is enabled.

It is always preferable to use the named suffix.

<!-- Apply the celeste-shade color to a heading -->
<h1 class="ds-heading --color-celeste-shade">空色 Sky blue</h1>


You can load the SDS colors as a javascript module by using:

// Import the SDS color and color list modules
import { dsColor, dsColorList }
  from "";

Alternatively, you can import or download the SDS color.js module or json from:

Once imported, the colors can be referenced using the following syntax:

// RGBA (lighter colors use opacity)

// RGB (opaque)

// Array of SDS light colors

Color swatches 

Name: celesteDim celesteDim
Class: --color-celeste-dim --color-celeste-dim
Class (Fixed): --color-celeste-950 --color-celeste-950
CSS: var(--color-celeste-dim) var(--color-celeste-dim)
CSS (Fixed): var(--color-celeste-950) var(--color-celeste-950)
scss: $color-celeste-950 $color-celeste-950
hex: #0b2c38 #0b2c38
rgb: rgb(11, 44, 56) rgb(11, 44, 56)
Name: celesteDarkest celesteDarkest
Class: --color-celeste-darkest --color-celeste-darkest
Class (Fixed): --color-celeste-900 --color-celeste-900
CSS: var(--color-celeste-darkest) var(--color-celeste-darkest)
CSS (Fixed): var(--color-celeste-900) var(--color-celeste-900)
scss: $color-celeste-900 $color-celeste-900
hex: #104253 #104253
rgb: rgb(16, 66, 83) rgb(16, 66, 83)
Name: celesteDarker (ESM Teal) celesteDarker
Class: --color-celeste-darker --color-celeste-darker
Class (Fixed): --color-celeste-800 --color-celeste-800
CSS: var(--color-celeste-darker) var(--color-celeste-darker)
CSS (Fixed): var(--color-celeste-800) var(--color-celeste-800)
scss: $color-celeste-800 $color-celeste-800
hex: #185a6f #185a6f
rgb: rgb(24, 90, 111) rgb(24, 90, 111)
Name: celesteDark celesteDark
Class: --color-celeste-dark --color-celeste-dark
Class (Fixed): --color-celeste-700 --color-celeste-700
CSS: var(--color-celeste-dark) var(--color-celeste-dark)
CSS (Fixed): var(--color-celeste-700) var(--color-celeste-700)
scss: $color-celeste-700 $color-celeste-700
hex: #1d8091 #1d8091
rgb: rgb(29, 128, 145) rgb(29, 128, 145)
Name: celesteShade celesteShade
Class: --color-celeste-shade --color-celeste-shade
Class (Fixed): --color-celeste-600 --color-celeste-600
CSS: var(--color-celeste-shade) var(--color-celeste-shade)
CSS (Fixed): var(--color-celeste-600) var(--color-celeste-600)
scss: $color-celeste-600 $color-celeste-600
hex: #23a3b3 #23a3b3
rgb: rgb(35, 163, 179) rgb(35, 163, 179)
Name: celeste celeste
Class: --color-celeste --color-celeste
CSS: var(--color-celeste) var(--color-celeste)
scss: $color-celeste $color-celeste
hex: #34cdd7 #34cdd7
rgb: rgb(52, 205, 215) rgb(52, 205, 215)
Name: celesteTint celesteTint
Class: --color-celeste-tint --color-celeste-tint
Class (Fixed): --color-celeste-400 --color-celeste-400
CSS: var(--color-celeste-tint) var(--color-celeste-tint)
CSS (Fixed): var(--color-celeste-400) var(--color-celeste-400)
scss: $color-celeste-400 $color-celeste-400
hex: #63d9e0 #63d9e0
rgb: rgb(99, 217, 224) rgb(99, 217, 224)
Name: celesteLight celesteLight
Class: --color-celeste-light --color-celeste-light
Class (Fixed): --color-celeste-300 --color-celeste-300
CSS: var(--color-celeste-light) var(--color-celeste-light)
CSS (Fixed): var(--color-celeste-300) var(--color-celeste-300)
scss: $color-celeste-300 $color-celeste-300
hex: #96e5ea #96e5ea
rgb: rgb(150, 229, 234) rgb(150, 229, 234)
Name: celesteLighter celesteLighter
Class: --color-celeste-lighter --color-celeste-lighter
Class (Fixed): --color-celeste-200 --color-celeste-200
CSS: var(--color-celeste-lighter) var(--color-celeste-lighter)
CSS (Fixed): var(--color-celeste-200) var(--color-celeste-200)
scss: $color-celeste-200 $color-celeste-200
hex: #c4f1f3 #c4f1f3
rgb: rgb(196, 241, 243) rgb(196, 241, 243)
Name: celesteLightest celesteLightest
Class: --color-celeste-lightest --color-celeste-lightest
Class (Fixed): --color-celeste-100 --color-celeste-100
CSS: var(--color-celeste-lightest) var(--color-celeste-lightest)
CSS (Fixed): var(--color-celeste-100) var(--color-celeste-100)
scss: $color-celeste-100 $color-celeste-100
hex: #e1f8f9 #e1f8f9
rgb: rgb(225, 248, 249) rgb(225, 248, 249)
Name: celesteBright celesteBright
Class: --color-celeste-bright --color-celeste-bright
Class (Fixed): --color-celeste-50 --color-celeste-50
CSS: var(--color-celeste-bright) var(--color-celeste-bright)
CSS (Fixed): var(--color-celeste-50) var(--color-celeste-50)
scss: $color-celeste-50 $color-celeste-50
hex: #f2fcfd #f2fcfd
rgb: rgb(242, 252, 253) rgb(242, 252, 253)
Name: inkDim inkDim
Class: --color-ink-dim --color-ink-dim
Class (Fixed): --color-ink-950 --color-ink-950
CSS: var(--color-ink-dim) var(--color-ink-dim)
CSS (Fixed): var(--color-ink-950) var(--color-ink-950)
scss: $color-ink-950 $color-ink-950
hex: #1c2127 #1c2127
rgb: rgb(28, 33, 39) rgb(28, 33, 39)
Name: inkDarkest inkDarkest
Class: --color-ink-darkest --color-ink-darkest
Class (Fixed): --color-ink-900 --color-ink-900
CSS: var(--color-ink-darkest) var(--color-ink-darkest)
CSS (Fixed): var(--color-ink-900) var(--color-ink-900)
scss: $color-ink-900 $color-ink-900
hex: #242b32 #242b32
rgb: rgb(36, 43, 50) rgb(36, 43, 50)
Name: inkDarker inkDarker
Class: --color-ink-darker --color-ink-darker
Class (Fixed): --color-ink-800 --color-ink-800
CSS: var(--color-ink-darker) var(--color-ink-darker)
CSS (Fixed): var(--color-ink-800) var(--color-ink-800)
scss: $color-ink-800 $color-ink-800
hex: #323c46 #323c46
rgb: rgb(50, 60, 70) rgb(50, 60, 70)
Name: inkDark inkDark
Class: --color-ink-dark --color-ink-dark
Class (Fixed): --color-ink-700 --color-ink-700
CSS: var(--color-ink-dark) var(--color-ink-dark)
CSS (Fixed): var(--color-ink-700) var(--color-ink-700)
scss: $color-ink-700 $color-ink-700
hex: #3d4955 #3d4955
rgb: rgb(61, 73, 85) rgb(61, 73, 85)
Name: inkShade inkShade
Class: --color-ink-shade --color-ink-shade
Class (Fixed): --color-ink-600 --color-ink-600
CSS: var(--color-ink-shade) var(--color-ink-shade)
CSS (Fixed): var(--color-ink-600) var(--color-ink-600)
scss: $color-ink-600 $color-ink-600
hex: #596a7c #596a7c
rgb: rgb(89, 106, 124) rgb(89, 106, 124)
Name: ink ink
Class: --color-ink --color-ink
CSS: var(--color-ink) var(--color-ink)
scss: $color-ink $color-ink
hex: #718599 #718599
rgb: rgb(113, 133, 153) rgb(113, 133, 153)
Name: inkTint inkTint
Class: --color-ink-tint --color-ink-tint
Class (Fixed): --color-ink-400 --color-ink-400
CSS: var(--color-ink-tint) var(--color-ink-tint)
CSS (Fixed): var(--color-ink-400) var(--color-ink-400)
scss: $color-ink-400 $color-ink-400
hex: #8fa1b4 #8fa1b4
rgb: rgb(143, 161, 180) rgb(143, 161, 180)
Name: inkLight inkLight
Class: --color-ink-light --color-ink-light
Class (Fixed): --color-ink-300 --color-ink-300
CSS: var(--color-ink-light) var(--color-ink-light)
CSS (Fixed): var(--color-ink-300) var(--color-ink-300)
scss: $color-ink-300 $color-ink-300
hex: #b1c0ce #b1c0ce
rgb: rgb(177, 192, 206) rgb(177, 192, 206)
Name: inkLighter inkLighter
Class: --color-ink-lighter --color-ink-lighter
Class (Fixed): --color-ink-200 --color-ink-200
CSS: var(--color-ink-lighter) var(--color-ink-lighter)
CSS (Fixed): var(--color-ink-200) var(--color-ink-200)
scss: $color-ink-200 $color-ink-200
hex: #d4dde6 #d4dde6
rgb: rgb(212, 221, 230) rgb(212, 221, 230)
Name: inkLightest inkLightest
Class: --color-ink-lightest --color-ink-lightest
Class (Fixed): --color-ink-100 --color-ink-100
CSS: var(--color-ink-lightest) var(--color-ink-lightest)
CSS (Fixed): var(--color-ink-100) var(--color-ink-100)
scss: $color-ink-100 $color-ink-100
hex: #e9eef3 #e9eef3
rgb: rgb(233, 238, 243) rgb(233, 238, 243)
Name: inkBright inkBright
Class: --color-ink-bright --color-ink-bright
Class (Fixed): --color-ink-50 --color-ink-50
CSS: var(--color-ink-bright) var(--color-ink-bright)
CSS (Fixed): var(--color-ink-50) var(--color-ink-50)
scss: $color-ink-50 $color-ink-50
hex: #f6f9fc #f6f9fc
rgb: rgb(246, 249, 252) rgb(246, 249, 252)
Name: grayDim grayDim
Class: --color-gray-dim --color-gray-dim
Class (Fixed): --color-gray-950 --color-gray-950
CSS: var(--color-gray-dim) var(--color-gray-dim)
CSS (Fixed): var(--color-gray-950) var(--color-gray-950)
scss: $color-gray-950 $color-gray-950
hex: #1b1a1d #1b1a1d
rgb: rgb(27, 26, 29) rgb(27, 26, 29)
Name: grayDarkest (ESM Gray) grayDarkest
Class: --color-gray-darkest --color-gray-darkest
Class (Fixed): --color-gray-900 --color-gray-900
CSS: var(--color-gray-darkest) var(--color-gray-darkest)
CSS (Fixed): var(--color-gray-900) var(--color-gray-900)
scss: $color-gray-900 $color-gray-900
hex: #2b2a2e #2b2a2e
rgb: rgb(43, 42, 46) rgb(43, 42, 46)
Name: grayDarker grayDarker
Class: --color-gray-darker --color-gray-darker
Class (Fixed): --color-gray-800 --color-gray-800
CSS: var(--color-gray-darker) var(--color-gray-darker)
CSS (Fixed): var(--color-gray-800) var(--color-gray-800)
scss: $color-gray-800 $color-gray-800
hex: #36343a #36343a
rgb: rgb(54, 52, 58) rgb(54, 52, 58)
Name: grayDark grayDark
Class: --color-gray-dark --color-gray-dark
Class (Fixed): --color-gray-700 --color-gray-700
CSS: var(--color-gray-dark) var(--color-gray-dark)
CSS (Fixed): var(--color-gray-700) var(--color-gray-700)
scss: $color-gray-700 $color-gray-700
hex: #47454c #47454c
rgb: rgb(71, 69, 76) rgb(71, 69, 76)
Name: grayShade grayShade
Class: --color-gray-shade --color-gray-shade
Class (Fixed): --color-gray-600 --color-gray-600
CSS: var(--color-gray-shade) var(--color-gray-shade)
CSS (Fixed): var(--color-gray-600) var(--color-gray-600)
scss: $color-gray-600 $color-gray-600
hex: #57555e #57555e
rgb: rgb(87, 85, 94) rgb(87, 85, 94)
Name: gray gray
Class: --color-gray --color-gray
CSS: var(--color-gray) var(--color-gray)
scss: $color-gray $color-gray
hex: #6d6a75 #6d6a75
rgb: rgb(109, 106, 117) rgb(109, 106, 117)
Name: grayTint grayTint
Class: --color-gray-tint --color-gray-tint
Class (Fixed): --color-gray-400 --color-gray-400
CSS: var(--color-gray-tint) var(--color-gray-tint)
CSS (Fixed): var(--color-gray-400) var(--color-gray-400)
scss: $color-gray-400 $color-gray-400
hex: #8e8b96 #8e8b96
rgb: rgb(142, 139, 150) rgb(142, 139, 150)
Name: grayLight grayLight
Class: --color-gray-light --color-gray-light
Class (Fixed): --color-gray-300 --color-gray-300
CSS: var(--color-gray-light) var(--color-gray-light)
CSS (Fixed): var(--color-gray-300) var(--color-gray-300)
scss: $color-gray-300 $color-gray-300
hex: #b3b1b8 #b3b1b8
rgb: rgb(179, 177, 184) rgb(179, 177, 184)
Name: grayLighter grayLighter
Class: --color-gray-lighter --color-gray-lighter
Class (Fixed): --color-gray-200 --color-gray-200
CSS: var(--color-gray-lighter) var(--color-gray-lighter)
CSS (Fixed): var(--color-gray-200) var(--color-gray-200)
scss: $color-gray-200 $color-gray-200
hex: #d4d3d7 #d4d3d7
rgb: rgb(212, 211, 215) rgb(212, 211, 215)
Name: grayLightest grayLightest
Class: --color-gray-lightest --color-gray-lightest
Class (Fixed): --color-gray-100 --color-gray-100
CSS: var(--color-gray-lightest) var(--color-gray-lightest)
CSS (Fixed): var(--color-gray-100) var(--color-gray-100)
scss: $color-gray-100 $color-gray-100
hex: #e9e8eb #e9e8eb
rgb: rgb(233, 232, 235) rgb(233, 232, 235)
Name: grayBright grayBright
Class: --color-gray-bright --color-gray-bright
Class (Fixed): --color-gray-50 --color-gray-50
CSS: var(--color-gray-bright) var(--color-gray-bright)
CSS (Fixed): var(--color-gray-50) var(--color-gray-50)
scss: $color-gray-50 $color-gray-50
hex: #f6f6f6 #f6f6f6
rgb: rgb(246, 246, 246) rgb(246, 246, 246)
Name: mauveDim mauveDim
Class: --color-mauve-dim --color-mauve-dim
Class (Fixed): --color-mauve-950 --color-mauve-950
CSS: var(--color-mauve-dim) var(--color-mauve-dim)
CSS (Fixed): var(--color-mauve-950) var(--color-mauve-950)
scss: $color-mauve-950 $color-mauve-950
hex: #1c1a22 #1c1a22
rgb: rgb(28, 26, 34) rgb(28, 26, 34)
Name: mauveDarkest mauveDarkest
Class: --color-mauve-darkest --color-mauve-darkest
Class (Fixed): --color-mauve-900 --color-mauve-900
CSS: var(--color-mauve-darkest) var(--color-mauve-darkest)
CSS (Fixed): var(--color-mauve-900) var(--color-mauve-900)
scss: $color-mauve-900 $color-mauve-900
hex: #2c2935 #2c2935
rgb: rgb(44, 41, 53) rgb(44, 41, 53)
Name: mauveDarker mauveDarker
Class: --color-mauve-darker --color-mauve-darker
Class (Fixed): --color-mauve-800 --color-mauve-800
CSS: var(--color-mauve-darker) var(--color-mauve-darker)
CSS (Fixed): var(--color-mauve-800) var(--color-mauve-800)
scss: $color-mauve-800 $color-mauve-800
hex: #373443 #373443
rgb: rgb(55, 52, 67) rgb(55, 52, 67)
Name: mauveDark (ESM Mauve) mauveDark
Class: --color-mauve-dark --color-mauve-dark
Class (Fixed): --color-mauve-700 --color-mauve-700
CSS: var(--color-mauve-dark) var(--color-mauve-dark)
CSS (Fixed): var(--color-mauve-700) var(--color-mauve-700)
scss: $color-mauve-700 $color-mauve-700
hex: #494458 #494458
rgb: rgb(73, 68, 88) rgb(73, 68, 88)
Name: mauveShade mauveShade
Class: --color-mauve-shade --color-mauve-shade
Class (Fixed): --color-mauve-600 --color-mauve-600
CSS: var(--color-mauve-shade) var(--color-mauve-shade)
CSS (Fixed): var(--color-mauve-600) var(--color-mauve-600)
scss: $color-mauve-600 $color-mauve-600
hex: #5a536c #5a536c
rgb: rgb(90, 83, 108) rgb(90, 83, 108)
Name: mauve mauve
Class: --color-mauve --color-mauve
CSS: var(--color-mauve) var(--color-mauve)
scss: $color-mauve $color-mauve
hex: #706887 #706887
rgb: rgb(112, 104, 135) rgb(112, 104, 135)
Name: mauveTint mauveTint
Class: --color-mauve-tint --color-mauve-tint
Class (Fixed): --color-mauve-400 --color-mauve-400
CSS: var(--color-mauve-tint) var(--color-mauve-tint)
CSS (Fixed): var(--color-mauve-400) var(--color-mauve-400)
scss: $color-mauve-400 $color-mauve-400
hex: #8f86a7 #8f86a7
rgb: rgb(143, 134, 167) rgb(143, 134, 167)
Name: mauveLight mauveLight
Class: --color-mauve-light --color-mauve-light
Class (Fixed): --color-mauve-300 --color-mauve-300
CSS: var(--color-mauve-light) var(--color-mauve-light)
CSS (Fixed): var(--color-mauve-300) var(--color-mauve-300)
scss: $color-mauve-300 $color-mauve-300
hex: #b3adc4 #b3adc4
rgb: rgb(179, 173, 196) rgb(179, 173, 196)
Name: mauveLighter mauveLighter
Class: --color-mauve-lighter --color-mauve-lighter
Class (Fixed): --color-mauve-200 --color-mauve-200
CSS: var(--color-mauve-lighter) var(--color-mauve-lighter)
CSS (Fixed): var(--color-mauve-200) var(--color-mauve-200)
scss: $color-mauve-200 $color-mauve-200
hex: #d4d0df #d4d0df
rgb: rgb(212, 208, 223) rgb(212, 208, 223)
Name: mauveLightest mauveLightest
Class: --color-mauve-lightest --color-mauve-lightest
Class (Fixed): --color-mauve-100 --color-mauve-100
CSS: var(--color-mauve-lightest) var(--color-mauve-lightest)
CSS (Fixed): var(--color-mauve-100) var(--color-mauve-100)
scss: $color-mauve-100 $color-mauve-100
hex: #e8e6ef #e8e6ef
rgb: rgb(232, 230, 239) rgb(232, 230, 239)
Name: mauveBright mauveBright
Class: --color-mauve-bright --color-mauve-bright
Class (Fixed): --color-mauve-50 --color-mauve-50
CSS: var(--color-mauve-bright) var(--color-mauve-bright)
CSS (Fixed): var(--color-mauve-50) var(--color-mauve-50)
scss: $color-mauve-50 $color-mauve-50
hex: #f5f4f9 #f5f4f9
rgb: rgb(245, 244, 249) rgb(245, 244, 249)
Name: blueDim blueDim
Class: --color-blue-dim --color-blue-dim
Class (Fixed): --color-blue-950 --color-blue-950
CSS: var(--color-blue-dim) var(--color-blue-dim)
CSS (Fixed): var(--color-blue-950) var(--color-blue-950)
scss: $color-blue-950 $color-blue-950
hex: #001849 #001849
rgb: rgb(0, 24, 73) rgb(0, 24, 73)
Name: blueDarkest blueDarkest
Class: --color-blue-darkest --color-blue-darkest
Class (Fixed): --color-blue-900 --color-blue-900
CSS: var(--color-blue-darkest) var(--color-blue-darkest)
CSS (Fixed): var(--color-blue-900) var(--color-blue-900)
scss: $color-blue-900 $color-blue-900
hex: #002673 #002673
rgb: rgb(0, 38, 115) rgb(0, 38, 115)
Name: blueDarker blueDarker
Class: --color-blue-darker --color-blue-darker
Class (Fixed): --color-blue-800 --color-blue-800
CSS: var(--color-blue-darker) var(--color-blue-darker)
CSS (Fixed): var(--color-blue-800) var(--color-blue-800)
scss: $color-blue-800 $color-blue-800
hex: #003090 #003090
rgb: rgb(0, 48, 144) rgb(0, 48, 144)
Name: blueDark blueDark
Class: --color-blue-dark --color-blue-dark
Class (Fixed): --color-blue-700 --color-blue-700
CSS: var(--color-blue-dark) var(--color-blue-dark)
CSS (Fixed): var(--color-blue-700) var(--color-blue-700)
scss: $color-blue-700 $color-blue-700
hex: #003fbd #003fbd
rgb: rgb(0, 63, 189) rgb(0, 63, 189)
Name: blueShade blueShade
Class: --color-blue-shade --color-blue-shade
Class (Fixed): --color-blue-600 --color-blue-600
CSS: var(--color-blue-shade) var(--color-blue-shade)
CSS (Fixed): var(--color-blue-600) var(--color-blue-600)
scss: $color-blue-600 $color-blue-600
hex: #004de8 #004de8
rgb: rgb(0, 77, 232) rgb(0, 77, 232)
Name: blue (ESM CTA Blue) blue
Class: --color-blue --color-blue
CSS: var(--color-blue) var(--color-blue)
scss: $color-blue $color-blue
hex: #236cff #236cff
rgb: rgb(35, 108, 255) rgb(35, 108, 255)
Name: blueTint blueTint
Class: --color-blue-tint --color-blue-tint
Class (Fixed): --color-blue-400 --color-blue-400
CSS: var(--color-blue-tint) var(--color-blue-tint)
CSS (Fixed): var(--color-blue-400) var(--color-blue-400)
scss: $color-blue-400 $color-blue-400
hex: #568eff #568eff
rgb: rgb(86, 142, 255) rgb(86, 142, 255)
Name: blueLight blueLight
Class: --color-blue-light --color-blue-light
Class (Fixed): --color-blue-300 --color-blue-300
CSS: var(--color-blue-light) var(--color-blue-light)
CSS (Fixed): var(--color-blue-300) var(--color-blue-300)
scss: $color-blue-300 $color-blue-300
hex: #8db3ff #8db3ff
rgb: rgb(141, 179, 255) rgb(141, 179, 255)
Name: blueLighter blueLighter
Class: --color-blue-lighter --color-blue-lighter
Class (Fixed): --color-blue-200 --color-blue-200
CSS: var(--color-blue-lighter) var(--color-blue-lighter)
CSS (Fixed): var(--color-blue-200) var(--color-blue-200)
scss: $color-blue-200 $color-blue-200
hex: #bfd4ff #bfd4ff
rgb: rgb(191, 212, 255) rgb(191, 212, 255)
Name: blueLightest blueLightest
Class: --color-blue-lightest --color-blue-lightest
Class (Fixed): --color-blue-100 --color-blue-100
CSS: var(--color-blue-lightest) var(--color-blue-lightest)
CSS (Fixed): var(--color-blue-100) var(--color-blue-100)
scss: $color-blue-100 $color-blue-100
hex: #dee9ff #dee9ff
rgb: rgb(222, 233, 255) rgb(222, 233, 255)
Name: blueBright blueBright
Class: --color-blue-bright --color-blue-bright
Class (Fixed): --color-blue-50 --color-blue-50
CSS: var(--color-blue-bright) var(--color-blue-bright)
CSS (Fixed): var(--color-blue-50) var(--color-blue-50)
scss: $color-blue-50 $color-blue-50
hex: #f1f6ff #f1f6ff
rgb: rgb(241, 246, 255) rgb(241, 246, 255)
Name: purpleDim purpleDim
Class: --color-purple-dim --color-purple-dim
Class (Fixed): --color-purple-950 --color-purple-950
CSS: var(--color-purple-dim) var(--color-purple-dim)
CSS (Fixed): var(--color-purple-950) var(--color-purple-950)
scss: $color-purple-950 $color-purple-950
hex: #19132d #19132d
rgb: rgb(25, 19, 45) rgb(25, 19, 45)
Name: purpleDarkest purpleDarkest
Class: --color-purple-darkest --color-purple-darkest
Class (Fixed): --color-purple-900 --color-purple-900
CSS: var(--color-purple-darkest) var(--color-purple-darkest)
CSS (Fixed): var(--color-purple-900) var(--color-purple-900)
scss: $color-purple-900 $color-purple-900
hex: #281e48 #281e48
rgb: rgb(40, 30, 72) rgb(40, 30, 72)
Name: purpleDarker (ESM Purple) purpleDarker
Class: --color-purple-darker --color-purple-darker
Class (Fixed): --color-purple-800 --color-purple-800
CSS: var(--color-purple-darker) var(--color-purple-darker)
CSS (Fixed): var(--color-purple-800) var(--color-purple-800)
scss: $color-purple-800 $color-purple-800
hex: #32265a #32265a
rgb: rgb(50, 38, 90) rgb(50, 38, 90)
Name: purpleDark purpleDark
Class: --color-purple-dark --color-purple-dark
Class (Fixed): --color-purple-700 --color-purple-700
CSS: var(--color-purple-dark) var(--color-purple-dark)
CSS (Fixed): var(--color-purple-700) var(--color-purple-700)
scss: $color-purple-700 $color-purple-700
hex: #423276 #423276
rgb: rgb(66, 50, 118) rgb(66, 50, 118)
Name: purpleShade purpleShade
Class: --color-purple-shade --color-purple-shade
Class (Fixed): --color-purple-600 --color-purple-600
CSS: var(--color-purple-shade) var(--color-purple-shade)
CSS (Fixed): var(--color-purple-600) var(--color-purple-600)
scss: $color-purple-600 $color-purple-600
hex: #513d91 #513d91
rgb: rgb(81, 61, 145) rgb(81, 61, 145)
Name: purple purple
Class: --color-purple --color-purple
CSS: var(--color-purple) var(--color-purple)
scss: $color-purple $color-purple
hex: #664eb4 #664eb4
rgb: rgb(102, 78, 180) rgb(102, 78, 180)
Name: purpleTint purpleTint
Class: --color-purple-tint --color-purple-tint
Class (Fixed): --color-purple-400 --color-purple-400
CSS: var(--color-purple-tint) var(--color-purple-tint)
CSS (Fixed): var(--color-purple-400) var(--color-purple-400)
scss: $color-purple-400 $color-purple-400
hex: #8977c5 #8977c5
rgb: rgb(137, 119, 197) rgb(137, 119, 197)
Name: purpleLight purpleLight
Class: --color-purple-light --color-purple-light
Class (Fixed): --color-purple-300 --color-purple-300
CSS: var(--color-purple-light) var(--color-purple-light)
CSS (Fixed): var(--color-purple-300) var(--color-purple-300)
scss: $color-purple-300 $color-purple-300
hex: #afa3d8 #afa3d8
rgb: rgb(175, 163, 216) rgb(175, 163, 216)
Name: purpleLighter purpleLighter
Class: --color-purple-lighter --color-purple-lighter
Class (Fixed): --color-purple-200 --color-purple-200
CSS: var(--color-purple-lighter) var(--color-purple-lighter)
CSS (Fixed): var(--color-purple-200) var(--color-purple-200)
scss: $color-purple-200 $color-purple-200
hex: #d3cce9 #d3cce9
rgb: rgb(211, 204, 233) rgb(211, 204, 233)
Name: purpleLightest purpleLightest
Class: --color-purple-lightest --color-purple-lightest
Class (Fixed): --color-purple-100 --color-purple-100
CSS: var(--color-purple-lightest) var(--color-purple-lightest)
CSS (Fixed): var(--color-purple-100) var(--color-purple-100)
scss: $color-purple-100 $color-purple-100
hex: #e8e4f4 #e8e4f4
rgb: rgb(232, 228, 244) rgb(232, 228, 244)
Name: purpleBright purpleBright
Class: --color-purple-bright --color-purple-bright
Class (Fixed): --color-purple-50 --color-purple-50
CSS: var(--color-purple-bright) var(--color-purple-bright)
CSS (Fixed): var(--color-purple-50) var(--color-purple-50)
scss: $color-purple-50 $color-purple-50
hex: #f5f4fa #f5f4fa
rgb: rgb(245, 244, 250) rgb(245, 244, 250)
Name: magentaDim magentaDim
Class: --color-magenta-dim --color-magenta-dim
Class (Fixed): --color-magenta-950 --color-magenta-950
CSS: var(--color-magenta-dim) var(--color-magenta-dim)
CSS (Fixed): var(--color-magenta-950) var(--color-magenta-950)
scss: $color-magenta-950 $color-magenta-950
hex: #380b2c #380b2c
rgb: rgb(56, 11, 44) rgb(56, 11, 44)
Name: magentaDarkest magentaDarkest
Class: --color-magenta-darkest --color-magenta-darkest
Class (Fixed): --color-magenta-900 --color-magenta-900
CSS: var(--color-magenta-darkest) var(--color-magenta-darkest)
CSS (Fixed): var(--color-magenta-900) var(--color-magenta-900)
scss: $color-magenta-900 $color-magenta-900
hex: #581145 #581145
rgb: rgb(88, 17, 69) rgb(88, 17, 69)
Name: magentaDarker magentaDarker
Class: --color-magenta-darker --color-magenta-darker
Class (Fixed): --color-magenta-800 --color-magenta-800
CSS: var(--color-magenta-darker) var(--color-magenta-darker)
CSS (Fixed): var(--color-magenta-800) var(--color-magenta-800)
scss: $color-magenta-800 $color-magenta-800
hex: #6f1657 #6f1657
rgb: rgb(111, 22, 87) rgb(111, 22, 87)
Name: magentaDark magentaDark
Class: --color-magenta-dark --color-magenta-dark
Class (Fixed): --color-magenta-700 --color-magenta-700
CSS: var(--color-magenta-dark) var(--color-magenta-dark)
CSS (Fixed): var(--color-magenta-700) var(--color-magenta-700)
scss: $color-magenta-700 $color-magenta-700
hex: #911d72 #911d72
rgb: rgb(145, 29, 114) rgb(145, 29, 114)
Name: magentaShade magentaShade
Class: --color-magenta-shade --color-magenta-shade
Class (Fixed): --color-magenta-600 --color-magenta-600
CSS: var(--color-magenta-shade) var(--color-magenta-shade)
CSS (Fixed): var(--color-magenta-600) var(--color-magenta-600)
scss: $color-magenta-600 $color-magenta-600
hex: #b3238c #b3238c
rgb: rgb(179, 35, 140) rgb(179, 35, 140)
Name: magenta magenta
Class: --color-magenta --color-magenta
CSS: var(--color-magenta) var(--color-magenta)
scss: $color-magenta $color-magenta
hex: #d734ab #d734ab
rgb: rgb(215, 52, 171) rgb(215, 52, 171)
Name: magentaTint magentaTint
Class: --color-magenta-tint --color-magenta-tint
Class (Fixed): --color-magenta-400 --color-magenta-400
CSS: var(--color-magenta-tint) var(--color-magenta-tint)
CSS (Fixed): var(--color-magenta-400) var(--color-magenta-400)
scss: $color-magenta-400 $color-magenta-400
hex: #e063be #e063be
rgb: rgb(224, 99, 190) rgb(224, 99, 190)
Name: magentaLight magentaLight
Class: --color-magenta-light --color-magenta-light
Class (Fixed): --color-magenta-300 --color-magenta-300
CSS: var(--color-magenta-light) var(--color-magenta-light)
CSS (Fixed): var(--color-magenta-300) var(--color-magenta-300)
scss: $color-magenta-300 $color-magenta-300
hex: #ea96d3 #ea96d3
rgb: rgb(234, 150, 211) rgb(234, 150, 211)
Name: magentaLighter magentaLighter
Class: --color-magenta-lighter --color-magenta-lighter
Class (Fixed): --color-magenta-200 --color-magenta-200
CSS: var(--color-magenta-lighter) var(--color-magenta-lighter)
CSS (Fixed): var(--color-magenta-200) var(--color-magenta-200)
scss: $color-magenta-200 $color-magenta-200
hex: #f3c4e7 #f3c4e7
rgb: rgb(243, 196, 231) rgb(243, 196, 231)
Name: magentaLightest magentaLightest
Class: --color-magenta-lightest --color-magenta-lightest
Class (Fixed): --color-magenta-100 --color-magenta-100
CSS: var(--color-magenta-lightest) var(--color-magenta-lightest)
CSS (Fixed): var(--color-magenta-100) var(--color-magenta-100)
scss: $color-magenta-100 $color-magenta-100
hex: #f9e1f2 #f9e1f2
rgb: rgb(249, 225, 242) rgb(249, 225, 242)
Name: magentaBright magentaBright
Class: --color-magenta-bright --color-magenta-bright
Class (Fixed): --color-magenta-50 --color-magenta-50
CSS: var(--color-magenta-bright) var(--color-magenta-bright)
CSS (Fixed): var(--color-magenta-50) var(--color-magenta-50)
scss: $color-magenta-50 $color-magenta-50
hex: #fdf2fa #fdf2fa
rgb: rgb(253, 242, 250) rgb(253, 242, 250)
Name: redDim redDim
Class: --color-red-dim --color-red-dim
Class (Fixed): --color-red-950 --color-red-950
CSS: var(--color-red-dim) var(--color-red-dim)
CSS (Fixed): var(--color-red-950) var(--color-red-950)
scss: $color-red-950 $color-red-950
hex: #430400 #430400
rgb: rgb(67, 4, 0) rgb(67, 4, 0)
Name: redDarkest redDarkest
Class: --color-red-darkest --color-red-darkest
Class (Fixed): --color-red-900 --color-red-900
CSS: var(--color-red-darkest) var(--color-red-darkest)
CSS (Fixed): var(--color-red-900) var(--color-red-900)
scss: $color-red-900 $color-red-900
hex: #660903 #660903
rgb: rgb(102, 9, 3) rgb(102, 9, 3)
Name: redDarker redDarker
Class: --color-red-darker --color-red-darker
Class (Fixed): --color-red-800 --color-red-800
CSS: var(--color-red-darker) var(--color-red-darker)
CSS (Fixed): var(--color-red-800) var(--color-red-800)
scss: $color-red-800 $color-red-800
hex: #7c1008 #7c1008
rgb: rgb(124, 16, 8) rgb(124, 16, 8)
Name: redDark redDark
Class: --color-red-dark --color-red-dark
Class (Fixed): --color-red-700 --color-red-700
CSS: var(--color-red-dark) var(--color-red-dark)
CSS (Fixed): var(--color-red-700) var(--color-red-700)
scss: $color-red-700 $color-red-700
hex: #9d1a11 #9d1a11
rgb: rgb(157, 26, 17) rgb(157, 26, 17)
Name: redShade redShade
Class: --color-red-shade --color-red-shade
Class (Fixed): --color-red-600 --color-red-600
CSS: var(--color-red-shade) var(--color-red-shade)
CSS (Fixed): var(--color-red-600) var(--color-red-600)
scss: $color-red-600 $color-red-600
hex: #ba261c #ba261c
rgb: rgb(186, 38, 28) rgb(186, 38, 28)
Name: red red
Class: --color-red --color-red
CSS: var(--color-red) var(--color-red)
scss: $color-red $color-red
hex: #d73e34 #d73e34
rgb: rgb(215, 62, 52) rgb(215, 62, 52)