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

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/sds/latest/ds-color/index.mjs';

Alternatively, you can import the SDS color module from:

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

// OKLCH
dsColor.red.oklch;
dsColor.redTint.oklch;

// RGB
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)

OKLCH:oklch(24.08% 0.0463 201.68deg)

HEX:#002629

Name:celesteDarkest

Class:--color-celeste-darkest

Class (Fixed):--color-celeste-900

CSS:var(--color-celeste-darkest)

CSS (Fixed):var(--color-celeste-900)

OKLCH:oklch(33.4% 0.056 201.68deg)

HEX:#023f43

Name:celesteDarker

Class:--color-celeste-darker

Class (Fixed):--color-celeste-800

CSS:var(--color-celeste-darker)

CSS (Fixed):var(--color-celeste-800)

OKLCH:oklch(44.27% 0.0755 201.68deg)

HEX:#005f65

Name:celesteDark

Class:--color-celeste-dark

Class (Fixed):--color-celeste-700

CSS:var(--color-celeste-dark)

CSS (Fixed):var(--color-celeste-700)

OKLCH:oklch(55.92% 0.095 201.68deg)

HEX:#01848c

Name:celesteShade

Class:--color-celeste-shade

Class (Fixed):--color-celeste-600

CSS:var(--color-celeste-shade)

CSS (Fixed):var(--color-celeste-600)

OKLCH:oklch(68.35% 0.1121 201.68deg)

HEX:#1badb6

Name:celeste(Celeste)

Class:--color-celeste

Class (Fixed):--color-celeste

CSS:var(--color-celeste)

CSS (Fixed):var(--color-celeste)

OKLCH:oklch(77.67% 0.1218 201.68deg)

HEX:#34cdd7

Name:celesteTint

Class:--color-celeste-tint

Class (Fixed):--color-celeste-400

CSS:var(--color-celeste-tint)

CSS (Fixed):var(--color-celeste-400)

OKLCH:oklch(82.58% 0.1121 201.68deg)

HEX:#5cdce5

Name:celesteLight

Class:--color-celeste-light

Class (Fixed):--color-celeste-300

CSS:var(--color-celeste-light)

CSS (Fixed):var(--color-celeste-300)

OKLCH:oklch(87.05% 0.0901 201.68deg)

HEX:#88e6ed

Name:celesteLighter

Class:--color-celeste-lighter

Class (Fixed):--color-celeste-200

CSS:var(--color-celeste-lighter)

CSS (Fixed):var(--color-celeste-200)

OKLCH:oklch(91.51% 0.0609 201.68deg)

HEX:#b3f0f4

Name:celesteLightest

Class:--color-celeste-lightest

Class (Fixed):--color-celeste-100

CSS:var(--color-celeste-lightest)

CSS (Fixed):var(--color-celeste-100)

OKLCH:oklch(95.53% 0.0341 201.68deg)

HEX:#d7f8fa

Name:celesteBright

Class:--color-celeste-bright

Class (Fixed):--color-celeste-50

CSS:var(--color-celeste-bright)

CSS (Fixed):var(--color-celeste-50)

OKLCH:oklch(98.21% 0.0171 201.68deg)

HEX:#edfdfe

Name:inkDim

Class:--color-ink-dim

Class (Fixed):--color-ink-950

CSS:var(--color-ink-dim)

CSS (Fixed):var(--color-ink-950)

OKLCH:oklch(19.41% 0.0146 248.46deg)

HEX:#10151b

Name:inkDarkest

Class:--color-ink-darkest

Class (Fixed):--color-ink-900

CSS:var(--color-ink-darkest)

CSS (Fixed):var(--color-ink-900)

OKLCH:oklch(26.92% 0.0177 248.46deg)

HEX:#20272f

Name:inkDarker

Class:--color-ink-darker

Class (Fixed):--color-ink-800

CSS:var(--color-ink-darker)

CSS (Fixed):var(--color-ink-800)

OKLCH:oklch(35.68% 0.0238 248.46deg)

HEX:#333e48

Name:inkDark

Class:--color-ink-dark

Class (Fixed):--color-ink-700

CSS:var(--color-ink-dark)

CSS (Fixed):var(--color-ink-700)

OKLCH:oklch(45.07% 0.03 248.46deg)

HEX:#495766

Name:inkShade

Class:--color-ink-shade

Class (Fixed):--color-ink-600

CSS:var(--color-ink-shade)

CSS (Fixed):var(--color-ink-600)

OKLCH:oklch(55.09% 0.0353 248.46deg)

HEX:#627486

Name:ink

Class:--color-ink

Class (Fixed):--color-ink

CSS:var(--color-ink)

CSS (Fixed):var(--color-ink)

OKLCH:oklch(62.6% 0.0384 248.46deg)

HEX:#768a9f

Name:inkTint

Class:--color-ink-tint

Class (Fixed):--color-ink-400

CSS:var(--color-ink-tint)

CSS (Fixed):var(--color-ink-400)

OKLCH:oklch(70.83% 0.0353 248.46deg)

HEX:#90a3b7

Name:inkLight

Class:--color-ink-light

Class (Fixed):--color-ink-300

CSS:var(--color-ink-light)

CSS (Fixed):var(--color-ink-300)

OKLCH:oklch(78.31% 0.0284 248.46deg)

HEX:#abbaca

Name:inkLighter

Class:--color-ink-lighter

Class (Fixed):--color-ink-200

CSS:var(--color-ink-lighter)

CSS (Fixed):var(--color-ink-200)

OKLCH:oklch(85.79% 0.0192 248.46deg)

HEX:#c7d2dd

Name:inkLightest

Class:--color-ink-lightest

Class (Fixed):--color-ink-100

CSS:var(--color-ink-lightest)

CSS (Fixed):var(--color-ink-100)

OKLCH:oklch(92.52% 0.0108 248.46deg)

HEX:#e1e7ed

Name:inkBright

Class:--color-ink-bright

Class (Fixed):--color-ink-50

CSS:var(--color-ink-bright)

CSS (Fixed):var(--color-ink-50)

OKLCH:oklch(97.01% 0.0054 248.46deg)

HEX:#f2f5f9

Name:grayDim

Class:--color-gray-dim

Class (Fixed):--color-gray-950

CSS:var(--color-gray-dim)

CSS (Fixed):var(--color-gray-950)

OKLCH:oklch(16.86% 0.0066 298.27deg)

HEX:#0f0f12

Name:grayDarkest

Class:--color-gray-darkest

Class (Fixed):--color-gray-900

CSS:var(--color-gray-darkest)

CSS (Fixed):var(--color-gray-900)

OKLCH:oklch(23.39% 0.008 298.27deg)

HEX:#1e1d21

Name:grayDarker

Class:--color-gray-darker

Class (Fixed):--color-gray-800

CSS:var(--color-gray-darker)

CSS (Fixed):var(--color-gray-800)

OKLCH:oklch(31.01% 0.0108 298.27deg)

HEX:#312f35

Name:grayDark

Class:--color-gray-dark

Class (Fixed):--color-gray-700

CSS:var(--color-gray-dark)

CSS (Fixed):var(--color-gray-700)

OKLCH:oklch(39.17% 0.0136 298.27deg)

HEX:#46444c

Name:grayShade

Class:--color-gray-shade

Class (Fixed):--color-gray-600

CSS:var(--color-gray-shade)

CSS (Fixed):var(--color-gray-600)

OKLCH:oklch(47.87% 0.016 298.27deg)

HEX:#5e5b65

Name:gray

Class:--color-gray

Class (Fixed):--color-gray

CSS:var(--color-gray)

CSS (Fixed):var(--color-gray)

OKLCH:oklch(54.4% 0.0174 298.27deg)

HEX:#716e79

Name:grayTint

Class:--color-gray-tint

Class (Fixed):--color-gray-400

CSS:var(--color-gray-tint)

CSS (Fixed):var(--color-gray-400)

OKLCH:oklch(64.43% 0.016 298.27deg)

HEX:#8e8b96

Name:grayLight

Class:--color-gray-light

Class (Fixed):--color-gray-300

CSS:var(--color-gray-light)

CSS (Fixed):var(--color-gray-300)

OKLCH:oklch(73.55% 0.0129 298.27deg)

HEX:#aaa8b1

Name:grayLighter

Class:--color-gray-lighter

Class (Fixed):--color-gray-200

CSS:var(--color-gray-lighter)

CSS (Fixed):var(--color-gray-200)

OKLCH:oklch(82.67% 0.0087 298.27deg)

HEX:#c7c5cb

Name:grayLightest

Class:--color-gray-lightest

Class (Fixed):--color-gray-100

CSS:var(--color-gray-lightest)

CSS (Fixed):var(--color-gray-100)

OKLCH:oklch(90.88% 0.0049 298.27deg)

HEX:#e1e0e4

Name:grayBright

Class:--color-gray-bright

Class (Fixed):--color-gray-50

CSS:var(--color-gray-bright)

CSS (Fixed):var(--color-gray-50)

OKLCH:oklch(96.35% 0.0024 298.27deg)

HEX:#f3f2f4

Name:mauveDim

Class:--color-mauve-dim

Class (Fixed):--color-mauve-950

CSS:var(--color-mauve-dim)

CSS (Fixed):var(--color-mauve-950)

OKLCH:oklch(16.62% 0.0175 299deg)

HEX:#100d15

Name:mauveDarkest

Class:--color-mauve-darkest

Class (Fixed):--color-mauve-900

CSS:var(--color-mauve-darkest)

CSS (Fixed):var(--color-mauve-900)

OKLCH:oklch(23.05% 0.0212 299deg)

HEX:#1e1b26

Name:mauveDarker

Class:--color-mauve-darker

Class (Fixed):--color-mauve-800

CSS:var(--color-mauve-darker)

CSS (Fixed):var(--color-mauve-800)

OKLCH:oklch(30.55% 0.0285 299deg)

HEX:#312c3c

Name:mauveDark

Class:--color-mauve-dark

Class (Fixed):--color-mauve-700

CSS:var(--color-mauve-dark)

CSS (Fixed):var(--color-mauve-700)

OKLCH:oklch(38.59% 0.0359 299deg)

HEX:#464055

Name:mauveShade

Class:--color-mauve-shade

Class (Fixed):--color-mauve-600

CSS:var(--color-mauve-shade)

CSS (Fixed):var(--color-mauve-600)

OKLCH:oklch(47.17% 0.0423 299deg)

HEX:#5e5670

Name:mauve

Class:--color-mauve

Class (Fixed):--color-mauve

CSS:var(--color-mauve)

CSS (Fixed):var(--color-mauve)

OKLCH:oklch(53.6% 0.046 299deg)

HEX:#716885

Name:mauveTint

Class:--color-mauve-tint

Class (Fixed):--color-mauve-400

CSS:var(--color-mauve-tint)

CSS (Fixed):var(--color-mauve-400)

OKLCH:oklch(63.81% 0.0423 299deg)

HEX:#8f86a2

Name:mauveLight

Class:--color-mauve-light

Class (Fixed):--color-mauve-300

CSS:var(--color-mauve-light)

CSS (Fixed):var(--color-mauve-300)

OKLCH:oklch(73.09% 0.034 299deg)

HEX:#aba4bb

Name:mauveLighter

Class:--color-mauve-lighter

Class (Fixed):--color-mauve-200

CSS:var(--color-mauve-lighter)

CSS (Fixed):var(--color-mauve-200)

OKLCH:oklch(82.37% 0.023 299deg)

HEX:#c7c2d3

Name:mauveLightest

Class:--color-mauve-lightest

Class (Fixed):--color-mauve-100

CSS:var(--color-mauve-lightest)

CSS (Fixed):var(--color-mauve-100)

OKLCH:oklch(90.72% 0.0129 299deg)

HEX:#e1dfe8

Name:mauveBright

Class:--color-mauve-bright

Class (Fixed):--color-mauve-50

CSS:var(--color-mauve-bright)

CSS (Fixed):var(--color-mauve-50)

OKLCH:oklch(96.29% 0.0064 299deg)

HEX:#f3f2f7

Name:blueDim

Class:--color-blue-dim

Class (Fixed):--color-blue-950

CSS:var(--color-blue-dim)

CSS (Fixed):var(--color-blue-950)

OKLCH:oklch(18.1% 0.0935 261deg)

HEX:#000b3a

Name:blueDarkest

Class:--color-blue-darkest

Class (Fixed):--color-blue-900

CSS:var(--color-blue-darkest)

CSS (Fixed):var(--color-blue-900)

OKLCH:oklch(25.11% 0.1132 261deg)

HEX:#001b57

Name:blueDarker

Class:--color-blue-darker

Class (Fixed):--color-blue-800

CSS:var(--color-blue-darker)

CSS (Fixed):var(--color-blue-800)

OKLCH:oklch(33.29% 0.1525 261deg)

HEX:#002c82

Name:blueDark

Class:--color-blue-dark

Class (Fixed):--color-blue-700

CSS:var(--color-blue-dark)

CSS (Fixed):var(--color-blue-700)

OKLCH:oklch(42.05% 0.1919 261deg)

HEX:#0040b3

Name:blueShade

Class:--color-blue-shade

Class (Fixed):--color-blue-600

CSS:var(--color-blue-shade)

CSS (Fixed):var(--color-blue-600)

OKLCH:oklch(51.39% 0.2263 261deg)

HEX:#0058e5

Name:blue

Class:--color-blue

Class (Fixed):--color-blue

CSS:var(--color-blue)

CSS (Fixed):var(--color-blue)

OKLCH:oklch(58.4% 0.246 261deg)

HEX:#096cff

Name:blueTint

Class:--color-blue-tint

Class (Fixed):--color-blue-400

CSS:var(--color-blue-tint)

CSS (Fixed):var(--color-blue-400)

OKLCH:oklch(67.55% 0.2263 261deg)

HEX:#3d8eff

Name:blueLight

Class:--color-blue-light

Class (Fixed):--color-blue-300

CSS:var(--color-blue-light)

CSS (Fixed):var(--color-blue-300)

OKLCH:oklch(75.87% 0.182 261deg)

HEX:#6badff

Name:blueLighter

Class:--color-blue-lighter

Class (Fixed):--color-blue-200

CSS:var(--color-blue-lighter)

CSS (Fixed):var(--color-blue-200)

OKLCH:oklch(84.19% 0.123 261deg)

HEX:#9dccff

Name:blueLightest

Class:--color-blue-lightest

Class (Fixed):--color-blue-100

CSS:var(--color-blue-lightest)

CSS (Fixed):var(--color-blue-100)

OKLCH:oklch(91.68% 0.0689 261deg)

HEX:#cae5ff

Name:blueBright

Class:--color-blue-bright

Class (Fixed):--color-blue-50

CSS:var(--color-blue-bright)

CSS (Fixed):var(--color-blue-50)

OKLCH:oklch(96.67% 0.0344 261deg)

HEX:#e7f5ff

Name:purpleDim

Class:--color-purple-dim

Class (Fixed):--color-purple-950

CSS:var(--color-purple-dim)

CSS (Fixed):var(--color-purple-950)

OKLCH:oklch(15.56% 0.0589 299deg)

HEX:#100521

Name:purpleDarkest

Class:--color-purple-darkest

Class (Fixed):--color-purple-900

CSS:var(--color-purple-darkest)

CSS (Fixed):var(--color-purple-900)

OKLCH:oklch(21.58% 0.0713 299deg)

HEX:#1f0f35

Name:purpleDarker

Class:--color-purple-darker

Class (Fixed):--color-purple-800

CSS:var(--color-purple-darker)

CSS (Fixed):var(--color-purple-800)

OKLCH:oklch(28.6% 0.0961 299deg)

HEX:#321b52

Name:purpleDark

Class:--color-purple-dark

Class (Fixed):--color-purple-700

CSS:var(--color-purple-dark)

CSS (Fixed):var(--color-purple-700)

OKLCH:oklch(36.13% 0.1209 299deg)

HEX:#472a73

Name:purpleShade

Class:--color-purple-shade

Class (Fixed):--color-purple-600

CSS:var(--color-purple-shade)

CSS (Fixed):var(--color-purple-600)

OKLCH:oklch(44.16% 0.1426 299deg)

HEX:#5f3b95

Name:purple

Class:--color-purple

Class (Fixed):--color-purple

CSS:var(--color-purple)

CSS (Fixed):var(--color-purple)

OKLCH:oklch(50.18% 0.155 299deg)

HEX:#714aae

Name:purpleTint

Class:--color-purple-tint

Class (Fixed):--color-purple-400

CSS:var(--color-purple-tint)

CSS (Fixed):var(--color-purple-400)

OKLCH:oklch(61.14% 0.1426 299deg)

HEX:#906dcc

Name:purpleLight

Class:--color-purple-light

Class (Fixed):--color-purple-300

CSS:var(--color-purple-light)

CSS (Fixed):var(--color-purple-300)

OKLCH:oklch(71.1% 0.1147 299deg)

HEX:#ac91df

Name:purpleLighter

Class:--color-purple-lighter

Class (Fixed):--color-purple-200

CSS:var(--color-purple-lighter)

CSS (Fixed):var(--color-purple-200)

OKLCH:oklch(81.07% 0.0775 299deg)

HEX:#c8b7ed

Name:purpleLightest

Class:--color-purple-lightest

Class (Fixed):--color-purple-100

CSS:var(--color-purple-lightest)

CSS (Fixed):var(--color-purple-100)

OKLCH:oklch(90.04% 0.0434 299deg)

HEX:#e2d8f8

Name:purpleBright

Class:--color-purple-bright

Class (Fixed):--color-purple-50

CSS:var(--color-purple-bright)

CSS (Fixed):var(--color-purple-50)

OKLCH:oklch(96.01% 0.0217 299deg)

HEX:#f3efff

Name:magentaDim

Class:--color-magenta-dim

Class (Fixed):--color-magenta-950

CSS:var(--color-magenta-dim)

CSS (Fixed):var(--color-magenta-950)

OKLCH:oklch(19.02% 0.0868 341.38deg)

HEX:#2a001f

Name:magentaDarkest

Class:--color-magenta-darkest

Class (Fixed):--color-magenta-900

CSS:var(--color-magenta-darkest)

CSS (Fixed):var(--color-magenta-900)

OKLCH:oklch(26.38% 0.105 341.38deg)

HEX:#430533

Name:magentaDarker

Class:--color-magenta-darker

Class (Fixed):--color-magenta-800

CSS:var(--color-magenta-darker)

CSS (Fixed):var(--color-magenta-800)

OKLCH:oklch(34.98% 0.1415 341.38deg)

HEX:#660a4f

Name:magentaDark

Class:--color-magenta-dark

Class (Fixed):--color-magenta-700

CSS:var(--color-magenta-dark)

CSS (Fixed):var(--color-magenta-700)

OKLCH:oklch(44.18% 0.1781 341.38deg)

HEX:#8e126f

Name:magentaShade

Class:--color-magenta-shade

Class (Fixed):--color-magenta-600

CSS:var(--color-magenta-shade)

CSS (Fixed):var(--color-magenta-600)

OKLCH:oklch(54% 0.21 341.38deg)

HEX:#b82391

Name:magenta

Class:--color-magenta

Class (Fixed):--color-magenta

CSS:var(--color-magenta)

CSS (Fixed):var(--color-magenta)

OKLCH:oklch(61.36% 0.2283 341.38deg)

HEX:#d734ab

Name:magentaTint

Class:--color-magenta-tint

Class (Fixed):--color-magenta-400

CSS:var(--color-magenta-tint)

CSS (Fixed):var(--color-magenta-400)

OKLCH:oklch(69.86% 0.21 341.38deg)

HEX:#ef5dc3

Name:magentaLight

Class:--color-magenta-light

Class (Fixed):--color-magenta-300

CSS:var(--color-magenta-light)

CSS (Fixed):var(--color-magenta-300)

OKLCH:oklch(77.59% 0.1689 341.38deg)

HEX:#fd87d5

Name:magentaLighter

Class:--color-magenta-lighter

Class (Fixed):--color-magenta-200

CSS:var(--color-magenta-lighter)

CSS (Fixed):var(--color-magenta-200)

OKLCH:oklch(85.32% 0.1142 341.38deg)

HEX:#ffb1e5

Name:magentaLightest

Class:--color-magenta-lightest

Class (Fixed):--color-magenta-100

CSS:var(--color-magenta-lightest)

CSS (Fixed):var(--color-magenta-100)

OKLCH:oklch(92.27% 0.0639 341.38deg)

HEX:#ffd5f2

Name:magentaBright

Class:--color-magenta-bright

Class (Fixed):--color-magenta-50

CSS:var(--color-magenta-bright)

CSS (Fixed):var(--color-magenta-50)

OKLCH:oklch(96.91% 0.032 341.38deg)

HEX:#ffedfb

Name:redDim

Class:--color-red-dim

Class (Fixed):--color-red-950

CSS:var(--color-red-dim)

CSS (Fixed):var(--color-red-950)

OKLCH:oklch(18.25% 0.079 28.23deg)

HEX:#2d0000

Name:redDarkest

Class:--color-red-darkest

Class (Fixed):--color-red-900

CSS:var(--color-red-darkest)

CSS (Fixed):var(--color-red-900)

OKLCH:oklch(25.31% 0.0957 28.23deg)

HEX:#460504

Name:redDarker

Class:--color-red-darker

Class (Fixed):--color-red-800

CSS:var(--color-red-darker)

CSS (Fixed):var(--color-red-800)

OKLCH:oklch(33.56% 0.129 28.23deg)

HEX:#6a0908

Name:redDark

Class:--color-red-dark

Class (Fixed):--color-red-700

CSS:var(--color-red-dark)

CSS (Fixed):var(--color-red-700)

OKLCH:oklch(42.39% 0.1622 28.23deg)

HEX:#931110

Name:redShade

Class:--color-red-shade

Class (Fixed):--color-red-600

CSS:var(--color-red-shade)

CSS (Fixed):var(--color-red-600)

OKLCH:oklch(51.81% 0.1914 28.23deg)

HEX:#be221d

Name:red

Class:--color-red

Class (Fixed):--color-red

CSS:var(--color-red)

CSS (Fixed):var(--color-red)

OKLCH:oklch(58.87% 0.208 28.23deg)

HEX:#dd322b

Name:redTint

Class:--color-red-tint

Class (Fixed):--color-red-400

CSS:var(--color-red-tint)

CSS (Fixed):var(--color-red-400)

OKLCH:oklch(67.92% 0.1914 28.23deg)

HEX:#f85d50

Name:redLight

Class:--color-red-light

Class (Fixed):--color-red-300

CSS:var(--color-red-light)

CSS (Fixed):var(--color-red-300)

OKLCH:oklch(76.14% 0.1539 28.23deg)

HEX:#ff8879

Name:redLighter

Class:--color-red-lighter

Class (Fixed):--color-red-200

CSS:var(--color-red-lighter)

CSS (Fixed):var(--color-red-200)

OKLCH:oklch(84.37% 0.104 28.23deg)

HEX:#ffb2a6

Name:redLightest

Class:--color-red-lightest

Class (Fixed):--color-red-100

CSS:var(--color-red-lightest)

CSS (Fixed):var(--color-red-100)

OKLCH:oklch(91.77% 0.0582 28.23deg)

HEX:#ffd6ce

Name:redBright

Class:--color-red-bright

Class (Fixed):--color-red-50

CSS:var(--color-red-bright)

CSS (Fixed):var(--color-red-50)

OKLCH:oklch(96.71% 0.0291 28.23deg)

HEX:#ffede9

Name:orangeDim

Class:--color-orange-dim

Class (Fixed):--color-orange-950

CSS:var(--color-orange-dim)

CSS (Fixed):var(--color-orange-950)

OKLCH:oklch(22.41% 0.0878 64deg)

HEX:#350d00

Name:orangeDarkest

Class:--color-orange-darkest

Class (Fixed):--color-orange-900

CSS:var(--color-orange-darkest)

CSS (Fixed):var(--color-orange-900)

OKLCH:oklch(31.09% 0.1063 64deg)

HEX:#531f00

Name:orangeDarker

Class:--color-orange-darker

Class (Fixed):--color-orange-800

CSS:var(--color-orange-darker)

CSS (Fixed):var(--color-orange-800)

OKLCH:oklch(41.21% 0.1432 64deg)

HEX:#7d3200

Name:orangeDark

Class:--color-orange-dark

Class (Fixed):--color-orange-700

CSS:var(--color-orange-dark)

CSS (Fixed):var(--color-orange-700)

OKLCH:oklch(52.06% 0.1802 64deg)

HEX:#ac4800

Name:orangeShade

Class:--color-orange-shade

Class (Fixed):--color-orange-600

CSS:var(--color-orange-shade)

CSS (Fixed):var(--color-orange-600)

OKLCH:oklch(63.62% 0.2125 64deg)

HEX:#de6200

Name:orange

Class:--color-orange

Class (Fixed):--color-orange

CSS:var(--color-orange)

CSS (Fixed):var(--color-orange)

OKLCH:oklch(72.3% 0.231 64deg)

HEX:#ff7900

Name:orangeTint

Class:--color-orange-tint

Class (Fixed):--color-orange-400

CSS:var(--color-orange-tint)

CSS (Fixed):var(--color-orange-400)

OKLCH:oklch(78.39% 0.2125 64deg)

HEX:#ff9300

Name:orangeLight

Class:--color-orange-light

Class (Fixed):--color-orange-300

CSS:var(--color-orange-light)

CSS (Fixed):var(--color-orange-300)

OKLCH:oklch(83.93% 0.1709 64deg)

HEX:#ffaf3a

Name:orangeLighter

Class:--color-orange-lighter

Class (Fixed):--color-orange-200

CSS:var(--color-orange-lighter)

CSS (Fixed):var(--color-orange-200)

OKLCH:oklch(89.47% 0.1155 64deg)

HEX:#ffcc89

Name:orangeLightest

Class:--color-orange-lightest

Class (Fixed):--color-orange-100

CSS:var(--color-orange-lightest)

CSS (Fixed):var(--color-orange-100)

OKLCH:oklch(94.46% 0.0647 64deg)

HEX:#ffe4c0

Name:orangeBright

Class:--color-orange-bright

Class (Fixed):--color-orange-50

CSS:var(--color-orange-bright)

CSS (Fixed):var(--color-orange-50)

OKLCH:oklch(97.78% 0.0323 64deg)

HEX:#fff4e2

Name:yellowDim

Class:--color-yellow-dim

Class (Fixed):--color-yellow-950

CSS:var(--color-yellow-dim)

CSS (Fixed):var(--color-yellow-950)

OKLCH:oklch(27.61% 0.0697 96.19deg)

HEX:#322700

Name:yellowDarkest

Class:--color-yellow-darkest

Class (Fixed):--color-yellow-900

CSS:var(--color-yellow-darkest)

CSS (Fixed):var(--color-yellow-900)

OKLCH:oklch(38.3% 0.0843 96.19deg)

HEX:#514200

Name:yellowDarker

Class:--color-yellow-darker

Class (Fixed):--color-yellow-800

CSS:var(--color-yellow-darker)

CSS (Fixed):var(--color-yellow-800)

OKLCH:oklch(50.77% 0.1136 96.19deg)

HEX:#796400

Name:yellowDark

Class:--color-yellow-dark

Class (Fixed):--color-yellow-700

CSS:var(--color-yellow-dark)

CSS (Fixed):var(--color-yellow-700)

OKLCH:oklch(64.13% 0.143 96.19deg)

HEX:#a68b00

Name:yellowShade

Class:--color-yellow-shade

Class (Fixed):--color-yellow-600

CSS:var(--color-yellow-shade)

CSS (Fixed):var(--color-yellow-600)

OKLCH:oklch(78.38% 0.1686 96.19deg)

HEX:#d9b700

Name:yellow

Class:--color-yellow

Class (Fixed):--color-yellow

CSS:var(--color-yellow)

CSS (Fixed):var(--color-yellow)

OKLCH:oklch(89.07% 0.1833 96.19deg)

HEX:#ffd900

Name:yellowTint

Class:--color-yellow-tint

Class (Fixed):--color-yellow-400

CSS:var(--color-yellow-tint)

CSS (Fixed):var(--color-yellow-400)

OKLCH:oklch(91.47% 0.1686 96.19deg)

HEX:#ffe245

Name:yellowLight

Class:--color-yellow-light

Class (Fixed):--color-yellow-300

CSS:var(--color-yellow-light)

CSS (Fixed):var(--color-yellow-300)

OKLCH:oklch(93.66% 0.1356 96.19deg)

HEX:#ffea79

Name:yellowLighter

Class:--color-yellow-lighter

Class (Fixed):--color-yellow-200

CSS:var(--color-yellow-lighter)

CSS (Fixed):var(--color-yellow-200)

OKLCH:oklch(95.85% 0.0916 96.19deg)

HEX:#fff2aa

Name:yellowLightest

Class:--color-yellow-lightest

Class (Fixed):--color-yellow-100

CSS:var(--color-yellow-lightest)

CSS (Fixed):var(--color-yellow-100)

OKLCH:oklch(97.81% 0.0513 96.19deg)

HEX:#fff9d2

Name:yellowBright

Class:--color-yellow-bright

Class (Fixed):--color-yellow-50

CSS:var(--color-yellow-bright)

CSS (Fixed):var(--color-yellow-50)

OKLCH:oklch(99.13% 0.0257 96.19deg)

HEX:#fffde9

Name:greenDim

Class:--color-green-dim

Class (Fixed):--color-green-950

CSS:var(--color-green-dim)

CSS (Fixed):var(--color-green-950)

OKLCH:oklch(18.29% 0.073 159deg)

HEX:#001b05

Name:greenDarkest

Class:--color-green-darkest

Class (Fixed):--color-green-900

CSS:var(--color-green-darkest)

CSS (Fixed):var(--color-green-900)

OKLCH:oklch(25.37% 0.0883 159deg)

HEX:#002e11

Name:greenDarker

Class:--color-green-darker

Class (Fixed):--color-green-800

CSS:var(--color-green-darker)

CSS (Fixed):var(--color-green-800)

OKLCH:oklch(33.63% 0.119 159deg)

HEX:#00481e

Name:greenDark

Class:--color-green-dark

Class (Fixed):--color-green-700

CSS:var(--color-green-dark)

CSS (Fixed):var(--color-green-700)

OKLCH:oklch(42.48% 0.1498 159deg)

HEX:#00652d

Name:greenShade

Class:--color-green-shade

Class (Fixed):--color-green-600

CSS:var(--color-green-shade)

CSS (Fixed):var(--color-green-600)

OKLCH:oklch(51.92% 0.1766 159deg)

HEX:#008540

Name:green

Class:--color-green

Class (Fixed):--color-green

CSS:var(--color-green)

CSS (Fixed):var(--color-green)

OKLCH:oklch(59% 0.192 159deg)

HEX:#009d50

Name:greenTint

Class:--color-green-tint

Class (Fixed):--color-green-400

CSS:var(--color-green-tint)

CSS (Fixed):var(--color-green-400)

OKLCH:oklch(68.02% 0.1766 159deg)

HEX:#00b86f

Name:greenLight

Class:--color-green-light

Class (Fixed):--color-green-300

CSS:var(--color-green-light)

CSS (Fixed):var(--color-green-300)

OKLCH:oklch(76.22% 0.1421 159deg)

HEX:#50cd90

Name:greenLighter

Class:--color-green-lighter

Class (Fixed):--color-green-200

CSS:var(--color-green-lighter)

CSS (Fixed):var(--color-green-200)

OKLCH:oklch(84.42% 0.096 159deg)

HEX:#94dfb5

Name:greenLightest

Class:--color-green-lightest

Class (Fixed):--color-green-100

CSS:var(--color-green-lightest)

CSS (Fixed):var(--color-green-100)

OKLCH:oklch(91.8% 0.0538 159deg)

HEX:#c7f0d7

Name:greenBright

Class:--color-green-bright

Class (Fixed):--color-green-50

CSS:var(--color-green-bright)

CSS (Fixed):var(--color-green-50)

OKLCH:oklch(96.72% 0.0269 159deg)

HEX:#e6faee

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.