Colors

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:

https://assets.soracom.io/sds/latest/ds-color/index.mjs

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

WCAG contrast results compare each swatch’s HEX value with white (#ffffff) and black (#000000). Each result shows the highest passing contrast level: AAA, AA, or an X for failure. AAA also meets AA. Use the Preview button in each table’s header to preview the text and background colors.

Normal text needs 4.5:1 for AA or 7:1 for AAA. Large text (at least 24px regular or 18⅔px bold) needs 3:1 for AA or 4.5:1 for AAA. Ratings use the unrounded ratio. See the WCAG AA and AAA guidance.

Celeste dim

Class: --color-celeste-dim

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

OKLCH: oklch(24.08% 0.0463 201.68deg)

HEX: #002629

**WCAG Guidelines**
	Ratio	Normal	Large
White text	16.04:1	AAA	AAA
Black text	1.31:1
Celeste dim text	16.04:1	AAA	AAA

Celeste darkest

Class: --color-celeste-darkest

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

OKLCH: oklch(33.4% 0.056 201.68deg)

HEX: #023f43

**WCAG Guidelines**
	Ratio	Normal	Large
White text	11.70:1	AAA	AAA
Black text	1.79:1
Celeste darkest text	11.70:1	AAA	AAA

Celeste darker

Class: --color-celeste-darker

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

OKLCH: oklch(44.27% 0.0755 201.68deg)

HEX: #005f65

**WCAG Guidelines**
	Ratio	Normal	Large
White text	7.43:1	AAA	AAA
Black text	2.82:1
Celeste darker text	7.43:1	AAA	AAA

Celeste dark

Class: --color-celeste-dark

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

OKLCH: oklch(55.92% 0.095 201.68deg)

HEX: #01848c

**WCAG Guidelines**
	Ratio	Normal	Large
White text	4.49:1		AA
Black text	4.68:1	AA	AAA
Celeste dark text	4.49:1		AA

Celeste shade

Class: --color-celeste-shade

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

OKLCH: oklch(68.35% 0.1121 201.68deg)

HEX: #1badb6

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.73:1
Black text	7.70:1	AAA	AAA
Celeste shade text	2.73:1

Celeste

Class: --color-celeste

OKLCH: oklch(77.67% 0.1218 201.68deg)

HEX: #34cdd7

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.93:1
Black text	10.86:1	AAA	AAA
Celeste text	1.93:1

Celeste tint

Class: --color-celeste-tint

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

OKLCH: oklch(82.58% 0.1121 201.68deg)

HEX: #5cdce5

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.64:1
Black text	12.82:1	AAA	AAA
Celeste tint text	1.64:1

Celeste light

Class: --color-celeste-light

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

OKLCH: oklch(87.05% 0.0901 201.68deg)

HEX: #88e6ed

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.44:1
Black text	14.59:1	AAA	AAA
Celeste light text	1.44:1

Celeste lighter

Class: --color-celeste-lighter

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

OKLCH: oklch(91.51% 0.0609 201.68deg)

HEX: #b3f0f4

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.26:1
Black text	16.69:1	AAA	AAA
Celeste lighter text	1.26:1

Celeste lightest

Class: --color-celeste-lightest

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

OKLCH: oklch(95.53% 0.0341 201.68deg)

HEX: #d7f8fa

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.12:1
Black text	18.70:1	AAA	AAA
Celeste lightest text	1.12:1

Celeste bright

Class: --color-celeste-bright

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

OKLCH: oklch(98.21% 0.0171 201.68deg)

HEX: #edfdfe

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.05:1
Black text	20.08:1	AAA	AAA
Celeste bright text	1.05:1

Ink dim

Class: --color-ink-dim

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

OKLCH: oklch(19.41% 0.0146 248.46deg)

HEX: #10151b

**WCAG Guidelines**
	Ratio	Normal	Large
White text	18.34:1	AAA	AAA
Black text	1.15:1
Ink dim text	18.34:1	AAA	AAA

Ink darkest

Class: --color-ink-darkest

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

OKLCH: oklch(26.92% 0.0177 248.46deg)

HEX: #20272f

**WCAG Guidelines**
	Ratio	Normal	Large
White text	15.08:1	AAA	AAA
Black text	1.39:1
Ink darkest text	15.08:1	AAA	AAA

Ink darker

Class: --color-ink-darker

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

OKLCH: oklch(35.68% 0.0238 248.46deg)

HEX: #333e48

**WCAG Guidelines**
	Ratio	Normal	Large
White text	10.92:1	AAA	AAA
Black text	1.92:1
Ink darker text	10.92:1	AAA	AAA

Ink dark

Class: --color-ink-dark

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

OKLCH: oklch(45.07% 0.03 248.46deg)

HEX: #495766

**WCAG Guidelines**
	Ratio	Normal	Large
White text	7.40:1	AAA	AAA
Black text	2.84:1
Ink dark text	7.40:1	AAA	AAA

Ink shade

Class: --color-ink-shade

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

OKLCH: oklch(55.09% 0.0353 248.46deg)

HEX: #627486

**WCAG Guidelines**
	Ratio	Normal	Large
White text	4.81:1	AA	AAA
Black text	4.36:1		AA
Ink shade text	4.81:1	AA	AAA

Ink

Class: --color-ink

OKLCH: oklch(62.6% 0.0384 248.46deg)

HEX: #768a9f

**WCAG Guidelines**
	Ratio	Normal	Large
White text	3.56:1		AA
Black text	5.91:1	AA	AAA
Ink text	3.56:1		AA

Ink tint

Class: --color-ink-tint

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

OKLCH: oklch(70.83% 0.0353 248.46deg)

HEX: #90a3b7

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.59:1
Black text	8.11:1	AAA	AAA
Ink tint text	2.59:1

Ink light

Class: --color-ink-light

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

OKLCH: oklch(78.31% 0.0284 248.46deg)

HEX: #abbaca

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.98:1
Black text	10.61:1	AAA	AAA
Ink light text	1.98:1

Ink lighter

Class: --color-ink-lighter

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

OKLCH: oklch(85.79% 0.0192 248.46deg)

HEX: #c7d2dd

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.53:1
Black text	13.69:1	AAA	AAA
Ink lighter text	1.53:1

Ink lightest

Class: --color-ink-lightest

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

OKLCH: oklch(92.52% 0.0108 248.46deg)

HEX: #e1e7ed

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.25:1
Black text	16.85:1	AAA	AAA
Ink lightest text	1.25:1

Ink bright

Class: --color-ink-bright

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

OKLCH: oklch(97.01% 0.0054 248.46deg)

HEX: #f2f5f9

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.09:1
Black text	19.20:1	AAA	AAA
Ink bright text	1.09:1

Gray dim

Class: --color-gray-dim

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

OKLCH: oklch(16.86% 0.0066 298.27deg)

HEX: #0f0f12

**WCAG Guidelines**
	Ratio	Normal	Large
White text	19.14:1	AAA	AAA
Black text	1.10:1
Gray dim text	19.14:1	AAA	AAA

Gray darkest

Class: --color-gray-darkest

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

OKLCH: oklch(23.39% 0.008 298.27deg)

HEX: #1e1d21

**WCAG Guidelines**
	Ratio	Normal	Large
White text	16.76:1	AAA	AAA
Black text	1.25:1
Gray darkest text	16.76:1	AAA	AAA

Gray darker

Class: --color-gray-darker

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

OKLCH: oklch(31.01% 0.0108 298.27deg)

HEX: #312f35

**WCAG Guidelines**
	Ratio	Normal	Large
White text	13.22:1	AAA	AAA
Black text	1.59:1
Gray darker text	13.22:1	AAA	AAA

Gray dark

Class: --color-gray-dark

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

OKLCH: oklch(39.17% 0.0136 298.27deg)

HEX: #46444c

**WCAG Guidelines**
	Ratio	Normal	Large
White text	9.58:1	AAA	AAA
Black text	2.19:1
Gray dark text	9.58:1	AAA	AAA

Gray shade

Class: --color-gray-shade

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

OKLCH: oklch(47.87% 0.016 298.27deg)

HEX: #5e5b65

**WCAG Guidelines**
	Ratio	Normal	Large
White text	6.64:1	AA	AAA
Black text	3.16:1		AA
Gray shade text	6.64:1	AA	AAA

Gray

Class: --color-gray

OKLCH: oklch(54.4% 0.0174 298.27deg)

HEX: #716e79

**WCAG Guidelines**
	Ratio	Normal	Large
White text	4.99:1	AA	AAA
Black text	4.21:1		AA
Gray text	4.99:1	AA	AAA

Gray tint

Class: --color-gray-tint

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

OKLCH: oklch(64.43% 0.016 298.27deg)

HEX: #8e8b96

**WCAG Guidelines**
	Ratio	Normal	Large
White text	3.34:1		AA
Black text	6.28:1	AA	AAA
Gray tint text	3.34:1		AA

Gray light

Class: --color-gray-light

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

OKLCH: oklch(73.55% 0.0129 298.27deg)

HEX: #aaa8b1

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.35:1
Black text	8.95:1	AAA	AAA
Gray light text	2.35:1

Gray lighter

Class: --color-gray-lighter

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

OKLCH: oklch(82.67% 0.0087 298.27deg)

HEX: #c7c5cb

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.71:1
Black text	12.28:1	AAA	AAA
Gray lighter text	1.71:1

Gray lightest

Class: --color-gray-lightest

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

OKLCH: oklch(90.88% 0.0049 298.27deg)

HEX: #e1e0e4

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.31:1
Black text	15.98:1	AAA	AAA
Gray lightest text	1.31:1

Gray bright

Class: --color-gray-bright

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

OKLCH: oklch(96.35% 0.0024 298.27deg)

HEX: #f3f2f4

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.12:1
Black text	18.82:1	AAA	AAA
Gray bright text	1.12:1

Mauve dim

Class: --color-mauve-dim

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

OKLCH: oklch(16.62% 0.0175 299deg)

HEX: #100d15

**WCAG Guidelines**
	Ratio	Normal	Large
White text	19.26:1	AAA	AAA
Black text	1.09:1
Mauve dim text	19.26:1	AAA	AAA

Mauve darkest

Class: --color-mauve-darkest

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

OKLCH: oklch(23.05% 0.0212 299deg)

HEX: #1e1b26

**WCAG Guidelines**
	Ratio	Normal	Large
White text	16.94:1	AAA	AAA
Black text	1.24:1
Mauve darkest text	16.94:1	AAA	AAA

Mauve darker

Class: --color-mauve-darker

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

OKLCH: oklch(30.55% 0.0285 299deg)

HEX: #312c3c

**WCAG Guidelines**
	Ratio	Normal	Large
White text	13.50:1	AAA	AAA
Black text	1.56:1
Mauve darker text	13.50:1	AAA	AAA

Mauve dark

Class: --color-mauve-dark

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

OKLCH: oklch(38.59% 0.0359 299deg)

HEX: #464055

**WCAG Guidelines**
	Ratio	Normal	Large
White text	9.88:1	AAA	AAA
Black text	2.12:1
Mauve dark text	9.88:1	AAA	AAA

Mauve shade

Class: --color-mauve-shade

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

OKLCH: oklch(47.17% 0.0423 299deg)

HEX: #5e5670

**WCAG Guidelines**
	Ratio	Normal	Large
White text	6.91:1	AA	AAA
Black text	3.04:1		AA
Mauve shade text	6.91:1	AA	AAA

Mauve

Class: --color-mauve

OKLCH: oklch(53.6% 0.046 299deg)

HEX: #716885

**WCAG Guidelines**
	Ratio	Normal	Large
White text	5.22:1	AA	AAA
Black text	4.02:1		AA
Mauve text	5.22:1	AA	AAA

Mauve tint

Class: --color-mauve-tint

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

OKLCH: oklch(63.81% 0.0423 299deg)

HEX: #8f86a2

**WCAG Guidelines**
	Ratio	Normal	Large
White text	3.44:1		AA
Black text	6.10:1	AA	AAA
Mauve tint text	3.44:1		AA

Mauve light

Class: --color-mauve-light

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

OKLCH: oklch(73.09% 0.034 299deg)

HEX: #aba4bb

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.40:1
Black text	8.76:1	AAA	AAA
Mauve light text	2.40:1

Mauve lighter

Class: --color-mauve-lighter

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

OKLCH: oklch(82.37% 0.023 299deg)

HEX: #c7c2d3

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.74:1
Black text	12.09:1	AAA	AAA
Mauve lighter text	1.74:1

Mauve lightest

Class: --color-mauve-lightest

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

OKLCH: oklch(90.72% 0.0129 299deg)

HEX: #e1dfe8

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.32:1
Black text	15.92:1	AAA	AAA
Mauve lightest text	1.32:1

Mauve bright

Class: --color-mauve-bright

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

OKLCH: oklch(96.29% 0.0064 299deg)

HEX: #f3f2f7

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.11:1
Black text	18.85:1	AAA	AAA
Mauve bright text	1.11:1

Blue dim

Class: --color-blue-dim

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

OKLCH: oklch(17.85% 0.0935 261deg)

HEX: #000a39

**WCAG Guidelines**
	Ratio	Normal	Large
White text	19.05:1	AAA	AAA
Black text	1.10:1
Blue dim text	19.05:1	AAA	AAA

Blue darkest

Class: --color-blue-darkest

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

OKLCH: oklch(24.76% 0.1132 261deg)

HEX: #001a56

**WCAG Guidelines**
	Ratio	Normal	Large
White text	16.38:1	AAA	AAA
Black text	1.28:1
Blue darkest text	16.38:1	AAA	AAA

Blue darker

Class: --color-blue-darker

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

OKLCH: oklch(32.82% 0.1525 261deg)

HEX: #002b81

**WCAG Guidelines**
	Ratio	Normal	Large
White text	12.63:1	AAA	AAA
Black text	1.66:1
Blue darker text	12.63:1	AAA	AAA

Blue dark

Class: --color-blue-dark

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

OKLCH: oklch(41.45% 0.1919 261deg)

HEX: #003eb1

**WCAG Guidelines**
	Ratio	Normal	Large
White text	9.04:1	AAA	AAA
Black text	2.32:1
Blue dark text	9.04:1	AAA	AAA

Blue shade

Class: --color-blue-shade

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

OKLCH: oklch(50.66% 0.2263 261deg)

HEX: #0055e3

**WCAG Guidelines**
	Ratio	Normal	Large
White text	6.16:1	AA	AAA
Black text	3.41:1		AA
Blue shade text	6.16:1	AA	AAA

Blue

Class: --color-blue

OKLCH: oklch(57.5712% 0.246 261deg)

HEX: #0469ff

**WCAG Guidelines**
	Ratio	Normal	Large
White text	4.70:1	AA	AAA
Black text	4.47:1		AA
Blue text	4.70:1	AA	AAA

Blue tint

Class: --color-blue-tint

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

OKLCH: oklch(66.91% 0.2263 261deg)

HEX: #3a8cff

**WCAG Guidelines**
	Ratio	Normal	Large
White text	3.29:1		AA
Black text	6.38:1	AA	AAA
Blue tint text	3.29:1		AA

Blue light

Class: --color-blue-light

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

OKLCH: oklch(75.39% 0.182 261deg)

HEX: #6aacff

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.34:1
Black text	8.96:1	AAA	AAA
Blue light text	2.34:1

Blue lighter

Class: --color-blue-lighter

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

OKLCH: oklch(83.88% 0.123 261deg)

HEX: #9ccbff

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.69:1
Black text	12.40:1	AAA	AAA
Blue lighter text	1.69:1

Blue lightest

Class: --color-blue-lightest

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

OKLCH: oklch(91.52% 0.0689 261deg)

HEX: #c9e4ff

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.31:1
Black text	16.02:1	AAA	AAA
Blue lightest text	1.31:1

Blue bright

Class: --color-blue-bright

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

OKLCH: oklch(96.61% 0.0344 261deg)

HEX: #e7f5ff

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.11:1
Black text	18.90:1	AAA	AAA
Blue bright text	1.11:1

Purple dim

Class: --color-purple-dim

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

OKLCH: oklch(15.56% 0.0589 299deg)

HEX: #100521

**WCAG Guidelines**
	Ratio	Normal	Large
White text	19.71:1	AAA	AAA
Black text	1.07:1
Purple dim text	19.71:1	AAA	AAA

Purple darkest

Class: --color-purple-darkest

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

OKLCH: oklch(21.58% 0.0713 299deg)

HEX: #1f0f35

**WCAG Guidelines**
	Ratio	Normal	Large
White text	17.83:1	AAA	AAA
Black text	1.18:1
Purple darkest text	17.83:1	AAA	AAA

Purple darker

Class: --color-purple-darker

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

OKLCH: oklch(28.6% 0.0961 299deg)

HEX: #321b52

**WCAG Guidelines**
	Ratio	Normal	Large
White text	14.85:1	AAA	AAA
Black text	1.41:1
Purple darker text	14.85:1	AAA	AAA

Purple dark

Class: --color-purple-dark

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

OKLCH: oklch(36.13% 0.1209 299deg)

HEX: #472a73

**WCAG Guidelines**
	Ratio	Normal	Large
White text	11.37:1	AAA	AAA
Black text	1.85:1
Purple dark text	11.37:1	AAA	AAA

Purple shade

Class: --color-purple-shade

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

OKLCH: oklch(44.16% 0.1426 299deg)

HEX: #5f3b95

**WCAG Guidelines**
	Ratio	Normal	Large
White text	8.25:1	AAA	AAA
Black text	2.55:1
Purple shade text	8.25:1	AAA	AAA

Purple

Class: --color-purple

OKLCH: oklch(50.18% 0.155 299deg)

HEX: #714aae

**WCAG Guidelines**
	Ratio	Normal	Large
White text	6.38:1	AA	AAA
Black text	3.29:1		AA
Purple text	6.38:1	AA	AAA

Purple tint

Class: --color-purple-tint

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

OKLCH: oklch(61.14% 0.1426 299deg)

HEX: #906dcc

**WCAG Guidelines**
	Ratio	Normal	Large
White text	4.00:1		AA
Black text	5.25:1	AA	AAA
Purple tint text	4.00:1		AA

Purple light

Class: --color-purple-light

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

OKLCH: oklch(71.1% 0.1147 299deg)

HEX: #ac91df

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.67:1
Black text	7.87:1	AAA	AAA
Purple light text	2.67:1

Purple lighter

Class: --color-purple-lighter

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

OKLCH: oklch(81.07% 0.0775 299deg)

HEX: #c8b7ed

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.83:1
Black text	11.45:1	AAA	AAA
Purple lighter text	1.83:1

Purple lightest

Class: --color-purple-lightest

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

OKLCH: oklch(90.04% 0.0434 299deg)

HEX: #e2d8f8

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.36:1
Black text	15.41:1	AAA	AAA
Purple lightest text	1.36:1

Purple bright

Class: --color-purple-bright

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

OKLCH: oklch(96.01% 0.0217 299deg)

HEX: #f3efff

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.13:1
Black text	18.60:1	AAA	AAA
Purple bright text	1.13:1

Magenta dim

Class: --color-magenta-dim

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

OKLCH: oklch(19.02% 0.0868 341.38deg)

HEX: #2a001f

**WCAG Guidelines**
	Ratio	Normal	Large
White text	18.78:1	AAA	AAA
Black text	1.12:1
Magenta dim text	18.78:1	AAA	AAA

Magenta darkest

Class: --color-magenta-darkest

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

OKLCH: oklch(26.38% 0.105 341.38deg)

HEX: #430533

**WCAG Guidelines**
	Ratio	Normal	Large
White text	16.05:1	AAA	AAA
Black text	1.31:1
Magenta darkest text	16.05:1	AAA	AAA

Magenta darker

Class: --color-magenta-darker

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

OKLCH: oklch(34.98% 0.1415 341.38deg)

HEX: #660a4f

**WCAG Guidelines**
	Ratio	Normal	Large
White text	12.20:1	AAA	AAA
Black text	1.72:1
Magenta darker text	12.20:1	AAA	AAA

Magenta dark

Class: --color-magenta-dark

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

OKLCH: oklch(44.18% 0.1781 341.38deg)

HEX: #8e126f

**WCAG Guidelines**
	Ratio	Normal	Large
White text	8.52:1	AAA	AAA
Black text	2.47:1
Magenta dark text	8.52:1	AAA	AAA

Magenta shade

Class: --color-magenta-shade

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

OKLCH: oklch(54% 0.21 341.38deg)

HEX: #b82391

**WCAG Guidelines**
	Ratio	Normal	Large
White text	5.70:1	AA	AAA
Black text	3.69:1		AA
Magenta shade text	5.70:1	AA	AAA

Magenta

Class: --color-magenta

OKLCH: oklch(61.36% 0.2283 341.38deg)

HEX: #d734ab

**WCAG Guidelines**
	Ratio	Normal	Large
White text	4.23:1		AA
Black text	4.97:1	AA	AAA
Magenta text	4.23:1		AA

Magenta tint

Class: --color-magenta-tint

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

OKLCH: oklch(69.86% 0.21 341.38deg)

HEX: #ef5dc3

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.99:1
Black text	7.02:1	AAA	AAA
Magenta tint text	2.99:1

Magenta light

Class: --color-magenta-light

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

OKLCH: oklch(77.59% 0.1689 341.38deg)

HEX: #fd87d5

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.19:1
Black text	9.60:1	AAA	AAA
Magenta light text	2.19:1

Magenta lighter

Class: --color-magenta-lighter

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

OKLCH: oklch(85.32% 0.1142 341.38deg)

HEX: #ffb1e5

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.66:1
Black text	12.67:1	AAA	AAA
Magenta lighter text	1.66:1

Magenta lightest

Class: --color-magenta-lightest

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

OKLCH: oklch(92.27% 0.0639 341.38deg)

HEX: #ffd5f2

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.31:1
Black text	16.05:1	AAA	AAA
Magenta lightest text	1.31:1

Magenta bright

Class: --color-magenta-bright

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

OKLCH: oklch(96.91% 0.032 341.38deg)

HEX: #ffedfb

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.12:1
Black text	18.76:1	AAA	AAA
Magenta bright text	1.12:1

Red dim

Class: --color-red-dim

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

OKLCH: oklch(18.25% 0.079 28.23deg)

HEX: #2d0000

**WCAG Guidelines**
	Ratio	Normal	Large
White text	18.89:1	AAA	AAA
Black text	1.11:1
Red dim text	18.89:1	AAA	AAA

Red darkest

Class: --color-red-darkest

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

OKLCH: oklch(25.31% 0.0957 28.23deg)

HEX: #460504

**WCAG Guidelines**
	Ratio	Normal	Large
White text	16.36:1	AAA	AAA
Black text	1.28:1
Red darkest text	16.36:1	AAA	AAA

Red darker

Class: --color-red-darker

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

OKLCH: oklch(33.56% 0.129 28.23deg)

HEX: #6a0908

**WCAG Guidelines**
	Ratio	Normal	Large
White text	12.69:1	AAA	AAA
Black text	1.66:1
Red darker text	12.69:1	AAA	AAA

Red dark

Class: --color-red-dark

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

OKLCH: oklch(42.39% 0.1622 28.23deg)

HEX: #931110

**WCAG Guidelines**
	Ratio	Normal	Large
White text	9.02:1	AAA	AAA
Black text	2.33:1
Red dark text	9.02:1	AAA	AAA

Red shade

Class: --color-red-shade

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

OKLCH: oklch(51.81% 0.1914 28.23deg)

HEX: #be221d

**WCAG Guidelines**
	Ratio	Normal	Large
White text	6.11:1	AA	AAA
Black text	3.44:1		AA
Red shade text	6.11:1	AA	AAA

Red

Class: --color-red

OKLCH: oklch(58.87% 0.208 28.23deg)

HEX: #dd322b

**WCAG Guidelines**
	Ratio	Normal	Large
White text	4.60:1	AA	AAA
Black text	4.57:1	AA	AAA
Red text	4.60:1	AA	AAA

Red tint

Class: --color-red-tint

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

OKLCH: oklch(67.92% 0.1914 28.23deg)

HEX: #f85d50

**WCAG Guidelines**
	Ratio	Normal	Large
White text	3.15:1		AA
Black text	6.67:1	AA	AAA
Red tint text	3.15:1		AA

Red light

Class: --color-red-light

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

OKLCH: oklch(76.14% 0.1539 28.23deg)

HEX: #ff8879

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.32:1
Black text	9.05:1	AAA	AAA
Red light text	2.32:1

Red lighter

Class: --color-red-lighter

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

OKLCH: oklch(84.37% 0.104 28.23deg)

HEX: #ffb2a6

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.73:1
Black text	12.17:1	AAA	AAA
Red lighter text	1.73:1

Red lightest

Class: --color-red-lightest

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

OKLCH: oklch(91.77% 0.0582 28.23deg)

HEX: #ffd6ce

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.33:1
Black text	15.76:1	AAA	AAA
Red lightest text	1.33:1

Red bright

Class: --color-red-bright

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

OKLCH: oklch(96.71% 0.0291 28.23deg)

HEX: #ffede9

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.13:1
Black text	18.54:1	AAA	AAA
Red bright text	1.13:1

Orange dim

Class: --color-orange-dim

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

OKLCH: oklch(22.41% 0.0878 64deg)

HEX: #350d00

**WCAG Guidelines**
	Ratio	Normal	Large
White text	17.37:1	AAA	AAA
Black text	1.21:1
Orange dim text	17.37:1	AAA	AAA

Orange darkest

Class: --color-orange-darkest

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

OKLCH: oklch(31.09% 0.1063 64deg)

HEX: #531f00

**WCAG Guidelines**
	Ratio	Normal	Large
White text	13.43:1	AAA	AAA
Black text	1.56:1
Orange darkest text	13.43:1	AAA	AAA

Orange darker

Class: --color-orange-darker

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

OKLCH: oklch(41.21% 0.1432 64deg)

HEX: #7d3200

**WCAG Guidelines**
	Ratio	Normal	Large
White text	9.02:1	AAA	AAA
Black text	2.33:1
Orange darker text	9.02:1	AAA	AAA

Orange dark

Class: --color-orange-dark

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

OKLCH: oklch(52.06% 0.1802 64deg)

HEX: #ac4800

**WCAG Guidelines**
	Ratio	Normal	Large
White text	5.70:1	AA	AAA
Black text	3.68:1		AA
Orange dark text	5.70:1	AA	AAA

Orange shade

Class: --color-orange-shade

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

OKLCH: oklch(63.62% 0.2125 64deg)

HEX: #de6200

**WCAG Guidelines**
	Ratio	Normal	Large
White text	3.59:1		AA
Black text	5.85:1	AA	AAA
Orange shade text	3.59:1		AA

Orange

Class: --color-orange

OKLCH: oklch(72.3% 0.231 64deg)

HEX: #ff7900

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.63:1
Black text	7.99:1	AAA	AAA
Orange text	2.63:1

Orange tint

Class: --color-orange-tint

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

OKLCH: oklch(78.39% 0.2125 64deg)

HEX: #ff9300

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.23:1
Black text	9.43:1	AAA	AAA
Orange tint text	2.23:1

Orange light

Class: --color-orange-light

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

OKLCH: oklch(83.93% 0.1709 64deg)

HEX: #ffaf3a

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.83:1
Black text	11.45:1	AAA	AAA
Orange light text	1.83:1

Orange lighter

Class: --color-orange-lighter

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

OKLCH: oklch(89.47% 0.1155 64deg)

HEX: #ffcc89

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.47:1
Black text	14.25:1	AAA	AAA
Orange lighter text	1.47:1

Orange lightest

Class: --color-orange-lightest

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

OKLCH: oklch(94.46% 0.0647 64deg)

HEX: #ffe4c0

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.23:1
Black text	17.11:1	AAA	AAA
Orange lightest text	1.23:1

Orange bright

Class: --color-orange-bright

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

OKLCH: oklch(97.78% 0.0323 64deg)

HEX: #fff4e2

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.09:1
Black text	19.29:1	AAA	AAA
Orange bright text	1.09:1

Yellow dim

Class: --color-yellow-dim

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

OKLCH: oklch(27.61% 0.0697 96.19deg)

HEX: #322700

**WCAG Guidelines**
	Ratio	Normal	Large
White text	14.73:1	AAA	AAA
Black text	1.43:1
Yellow dim text	14.73:1	AAA	AAA

Yellow darkest

Class: --color-yellow-darkest

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

OKLCH: oklch(38.3% 0.0843 96.19deg)

HEX: #514200

**WCAG Guidelines**
	Ratio	Normal	Large
White text	9.86:1	AAA	AAA
Black text	2.13:1
Yellow darkest text	9.86:1	AAA	AAA

Yellow darker

Class: --color-yellow-darker

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

OKLCH: oklch(50.77% 0.1136 96.19deg)

HEX: #796400

**WCAG Guidelines**
	Ratio	Normal	Large
White text	5.78:1	AA	AAA
Black text	3.64:1		AA
Yellow darker text	5.78:1	AA	AAA

Yellow dark

Class: --color-yellow-dark

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

OKLCH: oklch(64.13% 0.143 96.19deg)

HEX: #a68b00

**WCAG Guidelines**
	Ratio	Normal	Large
White text	3.33:1		AA
Black text	6.31:1	AA	AAA
Yellow dark text	3.33:1		AA

Yellow shade

Class: --color-yellow-shade

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

OKLCH: oklch(78.38% 0.1686 96.19deg)

HEX: #d9b700

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.96:1
Black text	10.72:1	AAA	AAA
Yellow shade text	1.96:1

Yellow

Class: --color-yellow

OKLCH: oklch(89.07% 0.1833 96.19deg)

HEX: #ffd900

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.38:1
Black text	15.18:1	AAA	AAA
Yellow text	1.38:1

Yellow tint

Class: --color-yellow-tint

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

OKLCH: oklch(91.47% 0.1686 96.19deg)

HEX: #ffe245

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.29:1
Black text	16.22:1	AAA	AAA
Yellow tint text	1.29:1

Yellow light

Class: --color-yellow-light

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

OKLCH: oklch(93.66% 0.1356 96.19deg)

HEX: #ffea79

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.21:1
Black text	17.30:1	AAA	AAA
Yellow light text	1.21:1

Yellow lighter

Class: --color-yellow-lighter

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

OKLCH: oklch(95.85% 0.0916 96.19deg)

HEX: #fff2aa

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.13:1
Black text	18.53:1	AAA	AAA
Yellow lighter text	1.13:1

Yellow lightest

Class: --color-yellow-lightest

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

OKLCH: oklch(97.81% 0.0513 96.19deg)

HEX: #fff9d2

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.06:1
Black text	19.73:1	AAA	AAA
Yellow lightest text	1.06:1

Yellow bright

Class: --color-yellow-bright

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

OKLCH: oklch(99.13% 0.0257 96.19deg)

HEX: #fffde9

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.03:1
Black text	20.48:1	AAA	AAA
Yellow bright text	1.03:1

Green dim

Class: --color-green-dim

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

OKLCH: oklch(18.29% 0.073 159deg)

HEX: #001b05

**WCAG Guidelines**
	Ratio	Normal	Large
White text	18.12:1	AAA	AAA
Black text	1.16:1
Green dim text	18.12:1	AAA	AAA

Green darkest

Class: --color-green-darkest

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

OKLCH: oklch(25.37% 0.0883 159deg)

HEX: #002e11

**WCAG Guidelines**
	Ratio	Normal	Large
White text	15.01:1	AAA	AAA
Black text	1.40:1
Green darkest text	15.01:1	AAA	AAA

Green darker

Class: --color-green-darker

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

OKLCH: oklch(33.63% 0.119 159deg)

HEX: #00481e

**WCAG Guidelines**
	Ratio	Normal	Large
White text	10.79:1	AAA	AAA
Black text	1.95:1
Green darker text	10.79:1	AAA	AAA

Green dark

Class: --color-green-dark

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

OKLCH: oklch(42.48% 0.1498 159deg)

HEX: #00652d

**WCAG Guidelines**
	Ratio	Normal	Large
White text	7.24:1	AAA	AAA
Black text	2.90:1
Green dark text	7.24:1	AAA	AAA

Green shade

Class: --color-green-shade

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

OKLCH: oklch(51.92% 0.1766 159deg)

HEX: #008540

**WCAG Guidelines**
	Ratio	Normal	Large
White text	4.74:1	AA	AAA
Black text	4.43:1		AA
Green shade text	4.74:1	AA	AAA

Green

Class: --color-green

OKLCH: oklch(59% 0.192 159deg)

HEX: #009d50

**WCAG Guidelines**
	Ratio	Normal	Large
White text	3.54:1		AA
Black text	5.94:1	AA	AAA
Green text	3.54:1		AA

Green tint

Class: --color-green-tint

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

OKLCH: oklch(68.02% 0.1766 159deg)

HEX: #00b86f

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.60:1
Black text	8.09:1	AAA	AAA
Green tint text	2.60:1

Green light

Class: --color-green-light

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

OKLCH: oklch(76.22% 0.1421 159deg)

HEX: #50cd90

**WCAG Guidelines**
	Ratio	Normal	Large
White text	2.00:1
Black text	10.48:1	AAA	AAA
Green light text	2.00:1

Green lighter

Class: --color-green-lighter

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

OKLCH: oklch(84.42% 0.096 159deg)

HEX: #94dfb5

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.56:1
Black text	13.48:1	AAA	AAA
Green lighter text	1.56:1

Green lightest

Class: --color-green-lightest

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

OKLCH: oklch(91.8% 0.0538 159deg)

HEX: #c7f0d7

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.24:1
Black text	16.87:1	AAA	AAA
Green lightest text	1.24:1

Green bright

Class: --color-green-bright

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

OKLCH: oklch(96.72% 0.0269 159deg)

HEX: #e6faee

**WCAG Guidelines**
	Ratio	Normal	Large
White text	1.09:1
Black text	19.27:1	AAA	AAA
Green bright text	1.09:1

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.

Use the contrast results on each swatch to choose a pairing marked AA or AAA for the intended text size. Check the actual foreground and background colors when using other pairings or dynamic color names in dark mode.