Soracom

Design System
  1. Home
  2. Design system
  3. Styles
  4. 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.

html
Copy 
<!-- 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)

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

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 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.