Overview
The full SDS color palette is a super-set of our brand colors.
Applying colors
HTML/CSS
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.
--color-ink-darkest
- Colors referenced using a numbered suffix are fixed and do not change if dark mode is enabled.
--color-ink-900
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>
Javascript
You can load the SDS colors as a javascript module by using:
// Import the SDS color and color list modules
import { dsColor, dsColorList }
from "https://assets.soracom.io/js/sds/latest/color.js";
Alternatively, you can import or download the SDS color.js
module or json from:
- https://assets.soracom.io/js/sds/latest/color.js (javascript import module)
- https://assets.soracom.io/js/sds/latest/color.json (json)
Once imported, the colors can be referenced using the following syntax:
// RGBA (lighter colors use opacity)
dsColor.red.rgba
dsColor.redTint.rgba
// RGB (opaque)
dsColor.red.rgb
dsColor.redTint.rgb
// Array of SDS light colors
dsColorList.light
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)