Skip to content

Soracom

Design System
Home Design System Styles Colors

Colors

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

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:

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)
Name: redTint redTint
Class: --color-red-tint --color-red-tint
Class (Fixed): --color-red-400 --color-red-400
CSS: var(--color-red-tint) var(--color-red-tint)
CSS (Fixed): var(--color-red-400) var(--color-red-400)
scss: $color-red-400 $color-red-400
hex: #ed5657 #ed5657
rgb: rgb(237, 86, 87) rgb(237, 86, 87)
Name: redLight redLight
Class: --color-red-light --color-red-light
Class (Fixed): --color-red-300 --color-red-300
CSS: var(--color-red-light) var(--color-red-light)
CSS (Fixed): var(--color-red-300) var(--color-red-300)
scss: $color-red-300 $color-red-300
hex: #f78991 #f78991
rgb: rgb(247, 137, 145) rgb(247, 137, 145)
Name: redLighter (ESM Pink) redLighter
Class: --color-red-lighter --color-red-lighter
Class (Fixed): --color-red-200 --color-red-200
CSS: var(--color-red-lighter) var(--color-red-lighter)
CSS (Fixed): var(--color-red-200) var(--color-red-200)
scss: $color-red-200 $color-red-200
hex: #ffc7d3 #ffc7d3
rgb: rgb(255, 199, 211) rgb(255, 199, 211)
★
Name: redLightest redLightest
Class: --color-red-lightest --color-red-lightest
Class (Fixed): --color-red-100 --color-red-100
CSS: var(--color-red-lightest) var(--color-red-lightest)
CSS (Fixed): var(--color-red-100) var(--color-red-100)
scss: $color-red-100 $color-red-100
hex: #ffdfe6 #ffdfe6
rgb: rgb(255, 223, 230) rgb(255, 223, 230)
Name: redBright redBright
Class: --color-red-bright --color-red-bright
Class (Fixed): --color-red-50 --color-red-50
CSS: var(--color-red-bright) var(--color-red-bright)
CSS (Fixed): var(--color-red-50) var(--color-red-50)
scss: $color-red-50 $color-red-50
hex: #fff0f3 #fff0f3
rgb: rgb(255, 240, 243) rgb(255, 240, 243)
Name: orangeDim orangeDim
Class: --color-orange-dim --color-orange-dim
Class (Fixed): --color-orange-950 --color-orange-950
CSS: var(--color-orange-dim) var(--color-orange-dim)
CSS (Fixed): var(--color-orange-950) var(--color-orange-950)
scss: $color-orange-950 $color-orange-950
hex: #3a1e00 #3a1e00
rgb: rgb(58, 30, 0) rgb(58, 30, 0)
Name: orangeDarkest orangeDarkest
Class: --color-orange-darkest --color-orange-darkest
Class (Fixed): --color-orange-900 --color-orange-900
CSS: var(--color-orange-darkest) var(--color-orange-darkest)
CSS (Fixed): var(--color-orange-900) var(--color-orange-900)
scss: $color-orange-900 $color-orange-900
hex: #5b2f00 #5b2f00
rgb: rgb(91, 47, 0) rgb(91, 47, 0)
Name: orangeDarker orangeDarker
Class: --color-orange-darker --color-orange-darker
Class (Fixed): --color-orange-800 --color-orange-800
CSS: var(--color-orange-darker) var(--color-orange-darker)
CSS (Fixed): var(--color-orange-800) var(--color-orange-800)
scss: $color-orange-800 $color-orange-800
hex: #723a00 #723a00
rgb: rgb(114, 58, 0) rgb(114, 58, 0)
Name: orangeDark orangeDark
Class: --color-orange-dark --color-orange-dark
Class (Fixed): --color-orange-700 --color-orange-700
CSS: var(--color-orange-dark) var(--color-orange-dark)
CSS (Fixed): var(--color-orange-700) var(--color-orange-700)
scss: $color-orange-700 $color-orange-700
hex: #964d00 #964d00
rgb: rgb(150, 77, 0) rgb(150, 77, 0)
Name: orangeShade orangeShade
Class: --color-orange-shade --color-orange-shade
Class (Fixed): --color-orange-600 --color-orange-600
CSS: var(--color-orange-shade) var(--color-orange-shade)
CSS (Fixed): var(--color-orange-600) var(--color-orange-600)
scss: $color-orange-600 $color-orange-600
hex: #b85e00 #b85e00
rgb: rgb(184, 94, 0) rgb(184, 94, 0)
Name: orange orange
Class: --color-orange --color-orange
CSS: var(--color-orange) var(--color-orange)
scss: $color-orange $color-orange
hex: #e67600 #e67600
rgb: rgb(230, 118, 0) rgb(230, 118, 0)
Name: orangeTint orangeTint
Class: --color-orange-tint --color-orange-tint
Class (Fixed): --color-orange-400 --color-orange-400
CSS: var(--color-orange-tint) var(--color-orange-tint)
CSS (Fixed): var(--color-orange-400) var(--color-orange-400)
scss: $color-orange-400 $color-orange-400
hex: #ff8b27 #ff8b27
rgb: rgb(255, 139, 39) rgb(255, 139, 39)
Name: orangeLight orangeLight
Class: --color-orange-light --color-orange-light
Class (Fixed): --color-orange-300 --color-orange-300
CSS: var(--color-orange-light) var(--color-orange-light)
CSS (Fixed): var(--color-orange-300) var(--color-orange-300)
scss: $color-orange-300 $color-orange-300
hex: #ffb16d #ffb16d
rgb: rgb(255, 177, 109) rgb(255, 177, 109)
Name: orangeLighter orangeLighter
Class: --color-orange-lighter --color-orange-lighter
Class (Fixed): --color-orange-200 --color-orange-200
CSS: var(--color-orange-lighter) var(--color-orange-lighter)
CSS (Fixed): var(--color-orange-200) var(--color-orange-200)
scss: $color-orange-200 $color-orange-200
hex: #ffd3ae #ffd3ae
rgb: rgb(255, 211, 174) rgb(255, 211, 174)
Name: orangeLightest orangeLightest
Class: --color-orange-lightest --color-orange-lightest
Class (Fixed): --color-orange-100 --color-orange-100
CSS: var(--color-orange-lightest) var(--color-orange-lightest)
CSS (Fixed): var(--color-orange-100) var(--color-orange-100)
scss: $color-orange-100 $color-orange-100
hex: #ffe8d5 #ffe8d5
rgb: rgb(255, 232, 213) rgb(255, 232, 213)
Name: orangeBright orangeBright
Class: --color-orange-bright --color-orange-bright
Class (Fixed): --color-orange-50 --color-orange-50
CSS: var(--color-orange-bright) var(--color-orange-bright)
CSS (Fixed): var(--color-orange-50) var(--color-orange-50)
scss: $color-orange-50 $color-orange-50
hex: #fff6ee #fff6ee
rgb: rgb(255, 246, 238) rgb(255, 246, 238)
Name: yellowDim yellowDim
Class: --color-yellow-dim --color-yellow-dim
Class (Fixed): --color-yellow-950 --color-yellow-950
CSS: var(--color-yellow-dim) var(--color-yellow-dim)
CSS (Fixed): var(--color-yellow-950) var(--color-yellow-950)
scss: $color-yellow-950 $color-yellow-950
hex: #2c2a1f #2c2a1f
rgb: rgb(44, 42, 31) rgb(44, 42, 31)
Name: yellowDarkest yellowDarkest
Class: --color-yellow-darkest --color-yellow-darkest
Class (Fixed): --color-yellow-900 --color-yellow-900
CSS: var(--color-yellow-darkest) var(--color-yellow-darkest)
CSS (Fixed): var(--color-yellow-900) var(--color-yellow-900)
scss: $color-yellow-900 $color-yellow-900
hex: #48442e #48442e
rgb: rgb(72, 68, 46) rgb(72, 68, 46)
Name: yellowDarker yellowDarker
Class: --color-yellow-darker --color-yellow-darker
Class (Fixed): --color-yellow-800 --color-yellow-800
CSS: var(--color-yellow-darker) var(--color-yellow-darker)
CSS (Fixed): var(--color-yellow-800) var(--color-yellow-800)
scss: $color-yellow-800 $color-yellow-800
hex: #615a33 #615a33
rgb: rgb(97, 90, 51) rgb(97, 90, 51)
Name: yellowDark yellowDark
Class: --color-yellow-dark --color-yellow-dark
Class (Fixed): --color-yellow-700 --color-yellow-700
CSS: var(--color-yellow-dark) var(--color-yellow-dark)
CSS (Fixed): var(--color-yellow-700) var(--color-yellow-700)
scss: $color-yellow-700 $color-yellow-700
hex: #92853e #92853e
rgb: rgb(146, 133, 62) rgb(146, 133, 62)
Name: yellowShade (ESM Yellow) yellowShade
Class: --color-yellow-shade --color-yellow-shade
Class (Fixed): --color-yellow-600 --color-yellow-600
CSS: var(--color-yellow-shade) var(--color-yellow-shade)
CSS (Fixed): var(--color-yellow-600) var(--color-yellow-600)
scss: $color-yellow-600 $color-yellow-600
hex: #d3bf57 #d3bf57
rgb: rgb(211, 191, 87) rgb(211, 191, 87)
★
Name: yellow yellow
Class: --color-yellow --color-yellow
CSS: var(--color-yellow) var(--color-yellow)
scss: $color-yellow $color-yellow
hex: #f4d636 #f4d636
rgb: rgb(244, 214, 54) rgb(244, 214, 54)
Name: yellowTint yellowTint
Class: --color-yellow-tint --color-yellow-tint
Class (Fixed): --color-yellow-400 --color-yellow-400
CSS: var(--color-yellow-tint) var(--color-yellow-tint)
CSS (Fixed): var(--color-yellow-400) var(--color-yellow-400)
scss: $color-yellow-400 $color-yellow-400
hex: #f7df64 #f7df64
rgb: rgb(247, 223, 100) rgb(247, 223, 100)
Name: yellowLight yellowLight
Class: --color-yellow-light --color-yellow-light
Class (Fixed): --color-yellow-300 --color-yellow-300
CSS: var(--color-yellow-light) var(--color-yellow-light)
CSS (Fixed): var(--color-yellow-300) var(--color-yellow-300)
scss: $color-yellow-300 $color-yellow-300
hex: #f9ea96 #f9ea96
rgb: rgb(249, 234, 150) rgb(249, 234, 150)
Name: yellowLighter yellowLighter
Class: --color-yellow-lighter --color-yellow-lighter
Class (Fixed): --color-yellow-200 --color-yellow-200
CSS: var(--color-yellow-lighter) var(--color-yellow-lighter)
CSS (Fixed): var(--color-yellow-200) var(--color-yellow-200)
scss: $color-yellow-200 $color-yellow-200
hex: #fcf3c5 #fcf3c5
rgb: rgb(252, 243, 197) rgb(252, 243, 197)
Name: yellowLightest yellowLightest
Class: --color-yellow-lightest --color-yellow-lightest
Class (Fixed): --color-yellow-100 --color-yellow-100
CSS: var(--color-yellow-lightest) var(--color-yellow-lightest)
CSS (Fixed): var(--color-yellow-100) var(--color-yellow-100)
scss: $color-yellow-100 $color-yellow-100
hex: #fdf9e1 #fdf9e1
rgb: rgb(253, 249, 225) rgb(253, 249, 225)
Name: yellowBright yellowBright
Class: --color-yellow-bright --color-yellow-bright
Class (Fixed): --color-yellow-50 --color-yellow-50
CSS: var(--color-yellow-bright) var(--color-yellow-bright)
CSS (Fixed): var(--color-yellow-50) var(--color-yellow-50)
scss: $color-yellow-50 $color-yellow-50
hex: #fefcf2 #fefcf2
rgb: rgb(254, 252, 242) rgb(254, 252, 242)
Name: greenDim greenDim
Class: --color-green-dim --color-green-dim
Class (Fixed): --color-green-950 --color-green-950
CSS: var(--color-green-dim) var(--color-green-dim)
CSS (Fixed): var(--color-green-950) var(--color-green-950)
scss: $color-green-950 $color-green-950
hex: #0b2516 #0b2516
rgb: rgb(11, 37, 22) rgb(11, 37, 22)
Name: greenDarkest greenDarkest
Class: --color-green-darkest --color-green-darkest
Class (Fixed): --color-green-900 --color-green-900
CSS: var(--color-green-darkest) var(--color-green-darkest)
CSS (Fixed): var(--color-green-900) var(--color-green-900)
scss: $color-green-900 $color-green-900
hex: #123a23 #123a23
rgb: rgb(18, 58, 35) rgb(18, 58, 35)
Name: greenDarker greenDarker
Class: --color-green-darker --color-green-darker
Class (Fixed): --color-green-800 --color-green-800
CSS: var(--color-green-darker) var(--color-green-darker)
CSS (Fixed): var(--color-green-800) var(--color-green-800)
scss: $color-green-800 $color-green-800
hex: #16492c #16492c
rgb: rgb(22, 73, 44) rgb(22, 73, 44)
Name: greenDark greenDark
Class: --color-green-dark --color-green-dark
Class (Fixed): --color-green-700 --color-green-700
CSS: var(--color-green-dark) var(--color-green-dark)
CSS (Fixed): var(--color-green-700) var(--color-green-700)
scss: $color-green-700 $color-green-700
hex: #1d5f3a #1d5f3a
rgb: rgb(29, 95, 58) rgb(29, 95, 58)
Name: greenShade greenShade
Class: --color-green-shade --color-green-shade
Class (Fixed): --color-green-600 --color-green-600
CSS: var(--color-green-shade) var(--color-green-shade)
CSS (Fixed): var(--color-green-600) var(--color-green-600)
scss: $color-green-600 $color-green-600
hex: #247547 #247547
rgb: rgb(36, 117, 71) rgb(36, 117, 71)
Name: green green
Class: --color-green --color-green
CSS: var(--color-green) var(--color-green)
scss: $color-green $color-green
hex: #2d9359 #2d9359
rgb: rgb(45, 147, 89) rgb(45, 147, 89)
Name: greenTint greenTint
Class: --color-green-tint --color-green-tint
Class (Fixed): --color-green-400 --color-green-400
CSS: var(--color-green-tint) var(--color-green-tint)
CSS (Fixed): var(--color-green-400) var(--color-green-400)
scss: $color-green-400 $color-green-400
hex: #43c67c #43c67c
rgb: rgb(67, 198, 124) rgb(67, 198, 124)
Name: greenLight greenLight
Class: --color-green-light --color-green-light
Class (Fixed): --color-green-300 --color-green-300
CSS: var(--color-green-light) var(--color-green-light)
CSS (Fixed): var(--color-green-300) var(--color-green-300)
scss: $color-green-300 $color-green-300
hex: #80d8a6 #80d8a6
rgb: rgb(128, 216, 166) rgb(128, 216, 166)
Name: greenLighter greenLighter
Class: --color-green-lighter --color-green-lighter
Class (Fixed): --color-green-200 --color-green-200
CSS: var(--color-green-lighter) var(--color-green-lighter)
CSS (Fixed): var(--color-green-200) var(--color-green-200)
scss: $color-green-200 $color-green-200
hex: #b8e9cd #b8e9cd
rgb: rgb(184, 233, 205) rgb(184, 233, 205)
Name: greenLightest greenLightest
Class: --color-green-lightest --color-green-lightest
Class (Fixed): --color-green-100 --color-green-100
CSS: var(--color-green-lightest) var(--color-green-lightest)
CSS (Fixed): var(--color-green-100) var(--color-green-100)
scss: $color-green-100 $color-green-100
hex: #daf4e5 #daf4e5
rgb: rgb(218, 244, 229) rgb(218, 244, 229)
Name: greenBright greenBright
Class: --color-green-bright --color-green-bright
Class (Fixed): --color-green-50 --color-green-50
CSS: var(--color-green-bright) var(--color-green-bright)
CSS (Fixed): var(--color-green-50) var(--color-green-50)
scss: $color-green-50 $color-green-50
hex: #f0faf4 #f0faf4
rgb: rgb(240, 250, 244) rgb(240, 250, 244)

Supported components 

The following SDS components support applying the full range of SDS colors simply by using the class suffix:

Colors should only be used if it is decorative only (i.e. do not use the –color-red if it is an alert/error, use the visual state instead).

Naming 

  • 950 dim
  • 900 darkest
  • 800 darker
  • 700 dark
  • 600 shade
  • 500 (base color)
  • 400 mid
  • 300 light
  • 200 lighter
  • 100 lightest
  • 050 bright

UI colors 

Default 

Name: var(--color-default) var(--color-default)
Name: var(--color-default-tint) var(--color-default-tint)
Name: var(--color-default-light) var(--color-default-light)
Name: var(--color-default-lighter) var(--color-default-lighter)
Name: var(--color-default-lightest) var(--color-default-lightest)

Background 

Name: var(--color-background) var(--color-background)
Name: var(--color-background-shade) var(--color-background-shade)
Name: var(--color-background-dark) var(--color-background-dark)
Name: var(--color-background-darker) var(--color-background-darker)
Name: var(--color-background-darkest) var(--color-background-darkest)

Accessibility 

Soracom are committed to complying with the WCAG AA standard for contrast ratios to ensure all our products and services are accessible to all users. To achieve this, careful consideration should be used when applying colors through our products.

The primary color celeste ( #34cdd7 ) does not pass WCAG AA color contrast standards when used for text on a white background, or when white text is used on a celeste background.

To meet accessibility requirements, celeste-600 ( #209ea6 ) should be used in those situations.

The following table shows the compliant and non-compliant combinations.

Copyright © 2015-2024 Soracom, Inc.
Last page update: January 30, 2023
1f1f4573