- 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:
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
Class: --color-celeste-dim
Class (Fixed): --color-celeste-950
CSS: var(--color-celeste-dim)
CSS (Fixed): var(--color-celeste-950)
HEX: #0b2c38
RGB: rgb(11, 44, 56)
Name: celesteDarkest
Class: --color-celeste-darkest
Class (Fixed): --color-celeste-900
CSS: var(--color-celeste-darkest)
CSS (Fixed): var(--color-celeste-900)
HEX: #104253
RGB: rgb(16, 66, 83)
Name: celesteDarker (ESM Teal)
Class: --color-celeste-darker
Class (Fixed): --color-celeste-800
CSS: var(--color-celeste-darker)
CSS (Fixed): var(--color-celeste-800)
HEX: #185a6f
RGB: rgb(24, 90, 111)
Name: celesteDark
Class: --color-celeste-dark
Class (Fixed): --color-celeste-700
CSS: var(--color-celeste-dark)
CSS (Fixed): var(--color-celeste-700)
HEX: #1d8091
RGB: rgb(29, 128, 145)
Name: celesteShade
Class: --color-celeste-shade
Class (Fixed): --color-celeste-600
CSS: var(--color-celeste-shade)
CSS (Fixed): var(--color-celeste-600)
HEX: #23a3b3
RGB: rgb(35, 163, 179)
Name: celeste (Celeste)
Class: --color-celeste
Class (Fixed): --color-celeste
CSS: var(--color-celeste)
CSS (Fixed): var(--color-celeste)
HEX: #34cdd7
RGB: rgb(52, 205, 215)
Name: celesteTint
Class: --color-celeste-tint
Class (Fixed): --color-celeste-400
CSS: var(--color-celeste-tint)
CSS (Fixed): var(--color-celeste-400)
HEX: #63d9e0
RGB: rgb(99, 217, 224)
Name: celesteLight
Class: --color-celeste-light
Class (Fixed): --color-celeste-300
CSS: var(--color-celeste-light)
CSS (Fixed): var(--color-celeste-300)
HEX: #96e5ea
RGB: rgb(150, 229, 234)
Name: celesteLighter
Class: --color-celeste-lighter
Class (Fixed): --color-celeste-200
CSS: var(--color-celeste-lighter)
CSS (Fixed): var(--color-celeste-200)
HEX: #c4f1f3
RGB: rgb(196, 241, 243)
Name: celesteLightest
Class: --color-celeste-lightest
Class (Fixed): --color-celeste-100
CSS: var(--color-celeste-lightest)
CSS (Fixed): var(--color-celeste-100)
HEX: #e1f8f9
RGB: rgb(225, 248, 249)
Name: celesteBright
Class: --color-celeste-bright
Class (Fixed): --color-celeste-50
CSS: var(--color-celeste-bright)
CSS (Fixed): var(--color-celeste-50)
HEX: #f2fcfd
RGB: rgb(242, 252, 253)
Name: inkDim
Class: --color-ink-dim
Class (Fixed): --color-ink-950
CSS: var(--color-ink-dim)
CSS (Fixed): var(--color-ink-950)
HEX: #1c2127
RGB: rgb(28, 33, 39)
Name: inkDarkest
Class: --color-ink-darkest
Class (Fixed): --color-ink-900
CSS: var(--color-ink-darkest)
CSS (Fixed): var(--color-ink-900)
HEX: #242b32
RGB: rgb(36, 43, 50)
Name: inkDarker
Class: --color-ink-darker
Class (Fixed): --color-ink-800
CSS: var(--color-ink-darker)
CSS (Fixed): var(--color-ink-800)
HEX: #323c46
RGB: rgb(50, 60, 70)
Name: inkDark
Class: --color-ink-dark
Class (Fixed): --color-ink-700
CSS: var(--color-ink-dark)
CSS (Fixed): var(--color-ink-700)
HEX: #3d4955
RGB: rgb(61, 73, 85)
Name: inkShade
Class: --color-ink-shade
Class (Fixed): --color-ink-600
CSS: var(--color-ink-shade)
CSS (Fixed): var(--color-ink-600)
HEX: #596a7c
RGB: rgb(89, 106, 124)
Name: ink
Class: --color-ink
Class (Fixed): --color-ink
CSS: var(--color-ink)
CSS (Fixed): var(--color-ink)
HEX: #718599
RGB: rgb(113, 133, 153)
Name: inkTint
Class: --color-ink-tint
Class (Fixed): --color-ink-400
CSS: var(--color-ink-tint)
CSS (Fixed): var(--color-ink-400)
HEX: #8fa1b4
RGB: rgb(143, 161, 180)
Name: inkLight
Class: --color-ink-light
Class (Fixed): --color-ink-300
CSS: var(--color-ink-light)
CSS (Fixed): var(--color-ink-300)
HEX: #b1c0ce
RGB: rgb(177, 192, 206)
Name: inkLighter
Class: --color-ink-lighter
Class (Fixed): --color-ink-200
CSS: var(--color-ink-lighter)
CSS (Fixed): var(--color-ink-200)
HEX: #d4dde6
RGB: rgb(212, 221, 230)
Name: inkLightest
Class: --color-ink-lightest
Class (Fixed): --color-ink-100
CSS: var(--color-ink-lightest)
CSS (Fixed): var(--color-ink-100)
HEX: #e9eef3
RGB: rgb(233, 238, 243)
Name: inkBright
Class: --color-ink-bright
Class (Fixed): --color-ink-50
CSS: var(--color-ink-bright)
CSS (Fixed): var(--color-ink-50)
HEX: #f6f9fc
RGB: rgb(246, 249, 252)
Name: grayDim
Class: --color-gray-dim
Class (Fixed): --color-gray-950
CSS: var(--color-gray-dim)
CSS (Fixed): var(--color-gray-950)
HEX: #1b1a1d
RGB: rgb(27, 26, 29)
Name: grayDarkest (ESM Gray)
Class: --color-gray-darkest
Class (Fixed): --color-gray-900
CSS: var(--color-gray-darkest)
CSS (Fixed): var(--color-gray-900)
HEX: #2b2a2e
RGB: rgb(43, 42, 46)
Name: grayDarker
Class: --color-gray-darker
Class (Fixed): --color-gray-800
CSS: var(--color-gray-darker)
CSS (Fixed): var(--color-gray-800)
HEX: #36343a
RGB: rgb(54, 52, 58)
Name: grayDark
Class: --color-gray-dark
Class (Fixed): --color-gray-700
CSS: var(--color-gray-dark)
CSS (Fixed): var(--color-gray-700)
HEX: #47454c
RGB: rgb(71, 69, 76)
Name: grayShade
Class: --color-gray-shade
Class (Fixed): --color-gray-600
CSS: var(--color-gray-shade)
CSS (Fixed): var(--color-gray-600)
HEX: #57555e
RGB: rgb(87, 85, 94)
Name: gray
Class: --color-gray
Class (Fixed): --color-gray
CSS: var(--color-gray)
CSS (Fixed): var(--color-gray)
HEX: #6d6a75
RGB: rgb(109, 106, 117)
Name: grayTint
Class: --color-gray-tint
Class (Fixed): --color-gray-400
CSS: var(--color-gray-tint)
CSS (Fixed): var(--color-gray-400)
HEX: #8e8b96
RGB: rgb(142, 139, 150)
Name: grayLight
Class: --color-gray-light
Class (Fixed): --color-gray-300
CSS: var(--color-gray-light)
CSS (Fixed): var(--color-gray-300)
HEX: #b3b1b8
RGB: rgb(179, 177, 184)
Name: grayLighter
Class: --color-gray-lighter
Class (Fixed): --color-gray-200
CSS: var(--color-gray-lighter)
CSS (Fixed): var(--color-gray-200)
HEX: #d4d3d7
RGB: rgb(212, 211, 215)
Name: grayLightest
Class: --color-gray-lightest
Class (Fixed): --color-gray-100
CSS: var(--color-gray-lightest)
CSS (Fixed): var(--color-gray-100)
HEX: #e9e8eb
RGB: rgb(233, 232, 235)
Name: grayBright
Class: --color-gray-bright
Class (Fixed): --color-gray-50
CSS: var(--color-gray-bright)
CSS (Fixed): var(--color-gray-50)
HEX: #f6f6f6
RGB: rgb(246, 246, 246)
Name: mauveDim
Class: --color-mauve-dim
Class (Fixed): --color-mauve-950
CSS: var(--color-mauve-dim)
CSS (Fixed): var(--color-mauve-950)
HEX: #1c1a22
RGB: rgb(28, 26, 34)
Name: mauveDarkest
Class: --color-mauve-darkest
Class (Fixed): --color-mauve-900
CSS: var(--color-mauve-darkest)
CSS (Fixed): var(--color-mauve-900)
HEX: #2c2935
RGB: rgb(44, 41, 53)
Name: mauveDarker
Class: --color-mauve-darker
Class (Fixed): --color-mauve-800
CSS: var(--color-mauve-darker)
CSS (Fixed): var(--color-mauve-800)
HEX: #373443
RGB: rgb(55, 52, 67)
Name: mauveDark (ESM Mauve)
Class: --color-mauve-dark
Class (Fixed): --color-mauve-700
CSS: var(--color-mauve-dark)
CSS (Fixed): var(--color-mauve-700)
HEX: #494458
RGB: rgb(73, 68, 88)
Name: mauveShade
Class: --color-mauve-shade
Class (Fixed): --color-mauve-600
CSS: var(--color-mauve-shade)
CSS (Fixed): var(--color-mauve-600)
HEX: #5a536c
RGB: rgb(90, 83, 108)
Name: mauve
Class: --color-mauve
Class (Fixed): --color-mauve
CSS: var(--color-mauve)
CSS (Fixed): var(--color-mauve)
HEX: #706887
RGB: rgb(112, 104, 135)
Name: mauveTint
Class: --color-mauve-tint
Class (Fixed): --color-mauve-400
CSS: var(--color-mauve-tint)
CSS (Fixed): var(--color-mauve-400)
HEX: #8f86a7
RGB: rgb(143, 134, 167)
Name: mauveLight
Class: --color-mauve-light
Class (Fixed): --color-mauve-300
CSS: var(--color-mauve-light)
CSS (Fixed): var(--color-mauve-300)
HEX: #b3adc4
RGB: rgb(179, 173, 196)
Name: mauveLighter
Class: --color-mauve-lighter
Class (Fixed): --color-mauve-200
CSS: var(--color-mauve-lighter)
CSS (Fixed): var(--color-mauve-200)
HEX: #d4d0df
RGB: rgb(212, 208, 223)
Name: mauveLightest
Class: --color-mauve-lightest
Class (Fixed): --color-mauve-100
CSS: var(--color-mauve-lightest)
CSS (Fixed): var(--color-mauve-100)
HEX: #e8e6ef
RGB: rgb(232, 230, 239)
Name: mauveBright
Class: --color-mauve-bright
Class (Fixed): --color-mauve-50
CSS: var(--color-mauve-bright)
CSS (Fixed): var(--color-mauve-50)
HEX: #f5f4f9
RGB: rgb(245, 244, 249)
Name: blueDim
Class: --color-blue-dim
Class (Fixed): --color-blue-950
CSS: var(--color-blue-dim)
CSS (Fixed): var(--color-blue-950)
HEX: #001849
RGB: rgb(0, 24, 73)
Name: blueDarkest
Class: --color-blue-darkest
Class (Fixed): --color-blue-900
CSS: var(--color-blue-darkest)
CSS (Fixed): var(--color-blue-900)
HEX: #002673
RGB: rgb(0, 38, 115)
Name: blueDarker
Class: --color-blue-darker
Class (Fixed): --color-blue-800
CSS: var(--color-blue-darker)
CSS (Fixed): var(--color-blue-800)
HEX: #003090
RGB: rgb(0, 48, 144)
Name: blueDark
Class: --color-blue-dark
Class (Fixed): --color-blue-700
CSS: var(--color-blue-dark)
CSS (Fixed): var(--color-blue-700)
HEX: #003fbd
RGB: rgb(0, 63, 189)
Name: blueShade
Class: --color-blue-shade
Class (Fixed): --color-blue-600
CSS: var(--color-blue-shade)
CSS (Fixed): var(--color-blue-600)
HEX: #004de8
RGB: rgb(0, 77, 232)
Name: blue (ESM CTA Blue)
Class: --color-blue
Class (Fixed): --color-blue
CSS: var(--color-blue)
CSS (Fixed): var(--color-blue)
HEX: #236cff
RGB: rgb(35, 108, 255)
Name: blueTint
Class: --color-blue-tint
Class (Fixed): --color-blue-400
CSS: var(--color-blue-tint)
CSS (Fixed): var(--color-blue-400)
HEX: #568eff
RGB: rgb(86, 142, 255)
Name: blueLight
Class: --color-blue-light
Class (Fixed): --color-blue-300
CSS: var(--color-blue-light)
CSS (Fixed): var(--color-blue-300)
HEX: #8db3ff
RGB: rgb(141, 179, 255)
Name: blueLighter
Class: --color-blue-lighter
Class (Fixed): --color-blue-200
CSS: var(--color-blue-lighter)
CSS (Fixed): var(--color-blue-200)
HEX: #bfd4ff
RGB: rgb(191, 212, 255)
Name: blueLightest
Class: --color-blue-lightest
Class (Fixed): --color-blue-100
CSS: var(--color-blue-lightest)
CSS (Fixed): var(--color-blue-100)
HEX: #dee9ff
RGB: rgb(222, 233, 255)
Name: blueBright
Class: --color-blue-bright
Class (Fixed): --color-blue-50
CSS: var(--color-blue-bright)
CSS (Fixed): var(--color-blue-50)
HEX: #f1f6ff
RGB: rgb(241, 246, 255)
Name: purpleDim
Class: --color-purple-dim
Class (Fixed): --color-purple-950
CSS: var(--color-purple-dim)
CSS (Fixed): var(--color-purple-950)
HEX: #19132d
RGB: rgb(25, 19, 45)
Name: purpleDarkest
Class: --color-purple-darkest
Class (Fixed): --color-purple-900
CSS: var(--color-purple-darkest)
CSS (Fixed): var(--color-purple-900)
HEX: #281e48
RGB: rgb(40, 30, 72)
Name: purpleDarker (ESM Purple)
Class: --color-purple-darker
Class (Fixed): --color-purple-800
CSS: var(--color-purple-darker)
CSS (Fixed): var(--color-purple-800)
HEX: #32265a
RGB: rgb(50, 38, 90)
Name: purpleDark
Class: --color-purple-dark
Class (Fixed): --color-purple-700
CSS: var(--color-purple-dark)
CSS (Fixed): var(--color-purple-700)
HEX: #423276
RGB: rgb(66, 50, 118)
Name: purpleShade
Class: --color-purple-shade
Class (Fixed): --color-purple-600
CSS: var(--color-purple-shade)
CSS (Fixed): var(--color-purple-600)
HEX: #513d91
RGB: rgb(81, 61, 145)
Name: purple
Class: --color-purple
Class (Fixed): --color-purple
CSS: var(--color-purple)
CSS (Fixed): var(--color-purple)
HEX: #664eb4
RGB: rgb(102, 78, 180)
Name: purpleTint
Class: --color-purple-tint
Class (Fixed): --color-purple-400
CSS: var(--color-purple-tint)
CSS (Fixed): var(--color-purple-400)
HEX: #8977c5
RGB: rgb(137, 119, 197)
Name: purpleLight
Class: --color-purple-light
Class (Fixed): --color-purple-300
CSS: var(--color-purple-light)
CSS (Fixed): var(--color-purple-300)
HEX: #afa3d8
RGB: rgb(175, 163, 216)
Name: purpleLighter
Class: --color-purple-lighter
Class (Fixed): --color-purple-200
CSS: var(--color-purple-lighter)
CSS (Fixed): var(--color-purple-200)
HEX: #d3cce9
RGB: rgb(211, 204, 233)
Name: purpleLightest
Class: --color-purple-lightest
Class (Fixed): --color-purple-100
CSS: var(--color-purple-lightest)
CSS (Fixed): var(--color-purple-100)
HEX: #e8e4f4
RGB: rgb(232, 228, 244)
Name: purpleBright
Class: --color-purple-bright
Class (Fixed): --color-purple-50
CSS: var(--color-purple-bright)
CSS (Fixed): var(--color-purple-50)
HEX: #f5f4fa
RGB: rgb(245, 244, 250)
Name: magentaDim
Class: --color-magenta-dim
Class (Fixed): --color-magenta-950
CSS: var(--color-magenta-dim)
CSS (Fixed): var(--color-magenta-950)
HEX: #380b2c
RGB: rgb(56, 11, 44)
Name: magentaDarkest
Class: --color-magenta-darkest
Class (Fixed): --color-magenta-900
CSS: var(--color-magenta-darkest)
CSS (Fixed): var(--color-magenta-900)
HEX: #581145
RGB: rgb(88, 17, 69)
Name: magentaDarker
Class: --color-magenta-darker
Class (Fixed): --color-magenta-800
CSS: var(--color-magenta-darker)
CSS (Fixed): var(--color-magenta-800)
HEX: #6f1657
RGB: rgb(111, 22, 87)
Name: magentaDark
Class: --color-magenta-dark
Class (Fixed): --color-magenta-700
CSS: var(--color-magenta-dark)
CSS (Fixed): var(--color-magenta-700)
HEX: #911d72
RGB: rgb(145, 29, 114)
Name: magentaShade
Class: --color-magenta-shade
Class (Fixed): --color-magenta-600
CSS: var(--color-magenta-shade)
CSS (Fixed): var(--color-magenta-600)
HEX: #b3238c
RGB: rgb(179, 35, 140)
Name: magenta
Class: --color-magenta
Class (Fixed): --color-magenta
CSS: var(--color-magenta)
CSS (Fixed): var(--color-magenta)
HEX: #d734ab
RGB: rgb(215, 52, 171)
Name: magentaTint
Class: --color-magenta-tint
Class (Fixed): --color-magenta-400
CSS: var(--color-magenta-tint)
CSS (Fixed): var(--color-magenta-400)
HEX: #e063be
RGB: rgb(224, 99, 190)
Name: magentaLight
Class: --color-magenta-light
Class (Fixed): --color-magenta-300
CSS: var(--color-magenta-light)
CSS (Fixed): var(--color-magenta-300)
HEX: #ea96d3
RGB: rgb(234, 150, 211)
Name: magentaLighter
Class: --color-magenta-lighter
Class (Fixed): --color-magenta-200
CSS: var(--color-magenta-lighter)
CSS (Fixed): var(--color-magenta-200)
HEX: #f3c4e7
RGB: rgb(243, 196, 231)
Name: magentaLightest
Class: --color-magenta-lightest
Class (Fixed): --color-magenta-100
CSS: var(--color-magenta-lightest)
CSS (Fixed): var(--color-magenta-100)
HEX: #f9e1f2
RGB: rgb(249, 225, 242)
Name: magentaBright
Class: --color-magenta-bright
Class (Fixed): --color-magenta-50
CSS: var(--color-magenta-bright)
CSS (Fixed): var(--color-magenta-50)
HEX: #fdf2fa
RGB: rgb(253, 242, 250)
Name: redDim
Class: --color-red-dim
Class (Fixed): --color-red-950
CSS: var(--color-red-dim)
CSS (Fixed): var(--color-red-950)
HEX: #430400
RGB: rgb(67, 4, 0)
Name: redDarkest
Class: --color-red-darkest
Class (Fixed): --color-red-900
CSS: var(--color-red-darkest)
CSS (Fixed): var(--color-red-900)
HEX: #660903
RGB: rgb(102, 9, 3)
Name: redDarker
Class: --color-red-darker
Class (Fixed): --color-red-800
CSS: var(--color-red-darker)
CSS (Fixed): var(--color-red-800)
HEX: #7c1008
RGB: rgb(124, 16, 8)
Name: redDark
Class: --color-red-dark
Class (Fixed): --color-red-700
CSS: var(--color-red-dark)
CSS (Fixed): var(--color-red-700)
HEX: #9d1a11
RGB: rgb(157, 26, 17)
Name: redShade
Class: --color-red-shade
Class (Fixed): --color-red-600
CSS: var(--color-red-shade)
CSS (Fixed): var(--color-red-600)
HEX: #ba261c
RGB: rgb(186, 38, 28)
Name: red
Class: --color-red
Class (Fixed): --color-red
CSS: var(--color-red)
CSS (Fixed): var(--color-red)
HEX: #d73e34
RGB: rgb(215, 62, 52)
Name: redTint
Class: --color-red-tint
Class (Fixed): --color-red-400
CSS: var(--color-red-tint)
CSS (Fixed): var(--color-red-400)
HEX: #ed5657
RGB: rgb(237, 86, 87)
Name: redLight
Class: --color-red-light
Class (Fixed): --color-red-300
CSS: var(--color-red-light)
CSS (Fixed): var(--color-red-300)
HEX: #f78991
RGB: rgb(247, 137, 145)
Name: redLighter (ESM Pink)
Class: --color-red-lighter
Class (Fixed): --color-red-200
CSS: var(--color-red-lighter)
CSS (Fixed): var(--color-red-200)
HEX: #ffc7d3
RGB: rgb(255, 199, 211)
Name: redLightest
Class: --color-red-lightest
Class (Fixed): --color-red-100
CSS: var(--color-red-lightest)
CSS (Fixed): var(--color-red-100)
HEX: #ffdfe6
RGB: rgb(255, 223, 230)
Name: redBright
Class: --color-red-bright
Class (Fixed): --color-red-50
CSS: var(--color-red-bright)
CSS (Fixed): var(--color-red-50)
HEX: #fff0f3
RGB: rgb(255, 240, 243)
Name: orangeDim
Class: --color-orange-dim
Class (Fixed): --color-orange-950
CSS: var(--color-orange-dim)
CSS (Fixed): var(--color-orange-950)
HEX: #3a1e00
RGB: rgb(58, 30, 0)
Name: orangeDarkest
Class: --color-orange-darkest
Class (Fixed): --color-orange-900
CSS: var(--color-orange-darkest)
CSS (Fixed): var(--color-orange-900)
HEX: #5b2f00
RGB: rgb(91, 47, 0)
Name: orangeDarker
Class: --color-orange-darker
Class (Fixed): --color-orange-800
CSS: var(--color-orange-darker)
CSS (Fixed): var(--color-orange-800)
HEX: #723a00
RGB: rgb(114, 58, 0)
Name: orangeDark
Class: --color-orange-dark
Class (Fixed): --color-orange-700
CSS: var(--color-orange-dark)
CSS (Fixed): var(--color-orange-700)
HEX: #964d00
RGB: rgb(150, 77, 0)
Name: orangeShade
Class: --color-orange-shade
Class (Fixed): --color-orange-600
CSS: var(--color-orange-shade)
CSS (Fixed): var(--color-orange-600)
HEX: #b85e00
RGB: rgb(184, 94, 0)
Name: orange
Class: --color-orange
Class (Fixed): --color-orange
CSS: var(--color-orange)
CSS (Fixed): var(--color-orange)
HEX: #e67600
RGB: rgb(230, 118, 0)
Name: orangeTint
Class: --color-orange-tint
Class (Fixed): --color-orange-400
CSS: var(--color-orange-tint)
CSS (Fixed): var(--color-orange-400)
HEX: #ff8b27
RGB: rgb(255, 139, 39)
Name: orangeLight
Class: --color-orange-light
Class (Fixed): --color-orange-300
CSS: var(--color-orange-light)
CSS (Fixed): var(--color-orange-300)
HEX: #ffb16d
RGB: rgb(255, 177, 109)
Name: orangeLighter
Class: --color-orange-lighter
Class (Fixed): --color-orange-200
CSS: var(--color-orange-lighter)
CSS (Fixed): var(--color-orange-200)
HEX: #ffd3ae
RGB: rgb(255, 211, 174)
Name: orangeLightest
Class: --color-orange-lightest
Class (Fixed): --color-orange-100
CSS: var(--color-orange-lightest)
CSS (Fixed): var(--color-orange-100)
HEX: #ffe8d5
RGB: rgb(255, 232, 213)
Name: orangeBright
Class: --color-orange-bright
Class (Fixed): --color-orange-50
CSS: var(--color-orange-bright)
CSS (Fixed): var(--color-orange-50)
HEX: #fff6ee
RGB: rgb(255, 246, 238)
Name: yellowDim
Class: --color-yellow-dim
Class (Fixed): --color-yellow-950
CSS: var(--color-yellow-dim)
CSS (Fixed): var(--color-yellow-950)
HEX: #2c2a1f
RGB: rgb(44, 42, 31)
Name: yellowDarkest
Class: --color-yellow-darkest
Class (Fixed): --color-yellow-900
CSS: var(--color-yellow-darkest)
CSS (Fixed): var(--color-yellow-900)
HEX: #48442e
RGB: rgb(72, 68, 46)
Name: yellowDarker
Class: --color-yellow-darker
Class (Fixed): --color-yellow-800
CSS: var(--color-yellow-darker)
CSS (Fixed): var(--color-yellow-800)
HEX: #615a33
RGB: rgb(97, 90, 51)
Name: yellowDark
Class: --color-yellow-dark
Class (Fixed): --color-yellow-700
CSS: var(--color-yellow-dark)
CSS (Fixed): var(--color-yellow-700)
HEX: #92853e
RGB: rgb(146, 133, 62)
Name: yellowShade (ESM Yellow)
Class: --color-yellow-shade
Class (Fixed): --color-yellow-600
CSS: var(--color-yellow-shade)
CSS (Fixed): var(--color-yellow-600)
HEX: #d3bf57
RGB: rgb(211, 191, 87)
Name: yellow
Class: --color-yellow
Class (Fixed): --color-yellow
CSS: var(--color-yellow)
CSS (Fixed): var(--color-yellow)
HEX: #f4d636
RGB: rgb(244, 214, 54)
Name: yellowTint
Class: --color-yellow-tint
Class (Fixed): --color-yellow-400
CSS: var(--color-yellow-tint)
CSS (Fixed): var(--color-yellow-400)
HEX: #f7df64
RGB: rgb(247, 223, 100)
Name: yellowLight
Class: --color-yellow-light
Class (Fixed): --color-yellow-300
CSS: var(--color-yellow-light)
CSS (Fixed): var(--color-yellow-300)
HEX: #f9ea96
RGB: rgb(249, 234, 150)
Name: yellowLighter
Class: --color-yellow-lighter
Class (Fixed): --color-yellow-200
CSS: var(--color-yellow-lighter)
CSS (Fixed): var(--color-yellow-200)
HEX: #fcf3c5
RGB: rgb(252, 243, 197)
Name: yellowLightest
Class: --color-yellow-lightest
Class (Fixed): --color-yellow-100
CSS: var(--color-yellow-lightest)
CSS (Fixed): var(--color-yellow-100)
HEX: #fdf9e1
RGB: rgb(253, 249, 225)
Name: yellowBright
Class: --color-yellow-bright
Class (Fixed): --color-yellow-50
CSS: var(--color-yellow-bright)
CSS (Fixed): var(--color-yellow-50)
HEX: #fefcf2
RGB: rgb(254, 252, 242)
Name: greenDim
Class: --color-green-dim
Class (Fixed): --color-green-950
CSS: var(--color-green-dim)
CSS (Fixed): var(--color-green-950)
HEX: #0b2516
RGB: rgb(11, 37, 22)
Name: greenDarkest
Class: --color-green-darkest
Class (Fixed): --color-green-900
CSS: var(--color-green-darkest)
CSS (Fixed): var(--color-green-900)
HEX: #123a23
RGB: rgb(18, 58, 35)
Name: greenDarker
Class: --color-green-darker
Class (Fixed): --color-green-800
CSS: var(--color-green-darker)
CSS (Fixed): var(--color-green-800)
HEX: #16492c
RGB: rgb(22, 73, 44)
Name: greenDark
Class: --color-green-dark
Class (Fixed): --color-green-700
CSS: var(--color-green-dark)
CSS (Fixed): var(--color-green-700)
HEX: #1d5f3a
RGB: rgb(29, 95, 58)
Name: greenShade
Class: --color-green-shade
Class (Fixed): --color-green-600
CSS: var(--color-green-shade)
CSS (Fixed): var(--color-green-600)
HEX: #247547
RGB: rgb(36, 117, 71)
Name: green
Class: --color-green
Class (Fixed): --color-green
CSS: var(--color-green)
CSS (Fixed): var(--color-green)
HEX: #2d9359
RGB: rgb(45, 147, 89)
Name: greenTint
Class: --color-green-tint
Class (Fixed): --color-green-400
CSS: var(--color-green-tint)
CSS (Fixed): var(--color-green-400)
HEX: #43c67c
RGB: rgb(67, 198, 124)
Name: greenLight
Class: --color-green-light
Class (Fixed): --color-green-300
CSS: var(--color-green-light)
CSS (Fixed): var(--color-green-300)
HEX: #80d8a6
RGB: rgb(128, 216, 166)
Name: greenLighter
Class: --color-green-lighter
Class (Fixed): --color-green-200
CSS: var(--color-green-lighter)
CSS (Fixed): var(--color-green-200)
HEX: #b8e9cd
RGB: rgb(184, 233, 205)
Name: greenLightest
Class: --color-green-lightest
Class (Fixed): --color-green-100
CSS: var(--color-green-lightest)
CSS (Fixed): var(--color-green-100)
HEX: #daf4e5
RGB: rgb(218, 244, 229)
Name: greenBright
Class: --color-green-bright
Class (Fixed): --color-green-50
CSS: var(--color-green-bright)
CSS (Fixed): var(--color-green-50)
HEX: #f0faf4
RGB: rgb(240, 250, 244)
Naming
Accessibility
The primary color celeste 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 should be used in those situations.
The following table shows the compliant and non-compliant combinations.