Skip to content
Docs Theme

Color Pallete

The full range of our color palette is used in graphics and illustrations, exploring unique and modern combinations as well as monochromatic contrasts. It can be used to highlight a specific topic or point of emphasis.

Cloud palette uses seven primary brand colors plus black and white, each with four tint/shade variants for a total of 45 colors. This page is the single source of truth for mapping brand colors to Starlight CSS custom properties during theme development.

Primary Colors

Section titled “Primary Colors”
#e4002b
Cloud Red—cloud-red
#f29a36
Tangerine—cloud-tangerine
#0e41aa
River—cloud-river
#ab2782
Raspberry—cloud-raspberry
#009639
Jade—cloud-jade
#62228b
Eggplant—cloud-eggplant
#0072b0
Bay—cloud-bay
#ffffff
White—cloud-white
#000000
Black—cloud-black
NameHEXRGBCMYKLESSPMSCSS Variable
Cloud Red#e4002b228, 0, 430, 100, 81, 11monza185--cloud-red
Tangerine#f29a36242, 154, 540, 36, 78, 5carrot-orange1375--cloud-tangerine
River#0e41aa14, 65, 17092, 62, 0, 33tory-blue293--cloud-river
Raspberry#ab2782171, 39, 1300, 77, 24, 33—241--cloud-raspberry
Jade#0096390, 150, 57100, 0, 62, 41fun-green355--cloud-jade
Eggplant#62228b98, 34, 13929, 76, 0, 45honey-flower2617--cloud-eggplant
Bay#0072b00, 114, 176100, 35, 0, 31—7461--cloud-bay
White#ffffff255, 255, 2550, 0, 0, 0alabaster—--cloud-white
Black#0000000, 0, 060, 50, 40, 100blackBlack--cloud-black

Note on LESS names: The Brand Center shows Raspberry as tory-blue and Bay as honey-flower — these are copy-paste errors from the River and Eggplant entries respectively. They are marked — above to avoid propagating incorrect values.

Secondary Colors (Tints & Shades)

Section titled “Secondary Colors (Tints & Shades)”

Each primary color has four variants ordered from lightest (Level 1) to darkest (Level 4).

The Brand Center assigns LESS variable names to secondary colors. Cloud Red and Tangerine variants have unique, meaningful names. All other color groups display the same placeholder names (wewak, froly, carmine, venetian-red) — these are template defaults from the brand platform and are included below for completeness but should not be relied upon as canonical identifiers.

Cloud Red

Section titled “Cloud Red”
#e4002b
Cloud Red (base)—cloud-red
#f7b2bf
Level 1—cloud-red-1
#f06680
Level 2—cloud-red-2
#a70020
Level 3—cloud-red-3
#720016
Level 4—cloud-red-4
LevelHEXRGBCMYKLESS
1 (lightest)#f7b2bf247, 178, 1910, 28, 23, 3wewak
2#f06680240, 102, 1280, 57, 47, 6froly
3#a70020167, 0, 320, 100, 81, 35carmine
4 (darkest)#720016114, 0, 220, 100, 81, 55venetian-red

Tangerine

Section titled “Tangerine”
#f29a36
Tangerine (base)—cloud-tangerine
#ffe4c4
Level 1—cloud-tangerine-1
#ffbd61
Level 2—cloud-tangerine-2
#a35700
Level 3—cloud-tangerine-3
#7a4100
Level 4—cloud-tangerine-4
LevelHEXRGBCMYKLESS
1 (lightest)#ffe4c4255, 228, 1960, 11, 23, 0tequila
2#ffbd61255, 189, 970, 26, 62, 0koromiko
3#a35700163, 87, 00, 47, 100, 36chelsea-gem
4 (darkest)#7a4100122, 65, 00, 47, 100, 52cinnamon

River

Section titled “River”
#0e41aa
River (base)—cloud-river
#b7c6e5
Level 1—cloud-river-1
#6e8dcc
Level 2—cloud-river-2
#0b3180
Level 3—cloud-river-3
#072155
Level 4—cloud-river-4
LevelHEXRGBCMYKLESS
1 (lightest)#b7c6e5183, 198, 2290, 28, 23, 3wewak
2#6e8dcc110, 141, 2040, 58, 47, 6froly
3#0b318011, 49, 1280, 100, 81, 35carmine
4 (darkest)#0721557, 33, 850, 100, 81, 55venetian-red

Raspberry

Section titled “Raspberry”
#ab2782
Raspberry (base)—cloud-raspberry
#e6bed9
Level 1—cloud-raspberry-1
#cd7db4
Level 2—cloud-raspberry-2
#801d62
Level 3—cloud-raspberry-3
#561441
Level 4—cloud-raspberry-4
LevelHEXRGBCMYKLESS
1 (lightest)#e6bed9230, 190, 2170, 28, 23, 3wewak
2#cd7db4205, 125, 1800, 58, 47, 6froly
3#801d62128, 29, 980, 100, 81, 35carmine
4 (darkest)#56144186, 20, 650, 100, 81, 55venetian-red

Jade

Section titled “Jade”
#009639
Jade (base)—cloud-jade
#b2dfc4
Level 1—cloud-jade-1
#66c088
Level 2—cloud-jade-2
#00712b
Level 3—cloud-jade-3
#004b1d
Level 4—cloud-jade-4
LevelHEXRGBCMYKLESS
1 (lightest)#b2dfc4178, 223, 1960, 28, 23, 3wewak
2#66c088102, 192, 1360, 58, 47, 6froly
3#00712b0, 113, 430, 100, 81, 35carmine
4 (darkest)#004b1d0, 75, 290, 100, 81, 55venetian-red

Eggplant

Section titled “Eggplant”
#62228b
Eggplant (base)—cloud-eggplant
#cdabe3
Level 1—cloud-eggplant-1
#9c59c9
Level 2—cloud-eggplant-2
#822cb8
Level 3—cloud-eggplant-3
#41175d
Level 4—cloud-eggplant-4
LevelHEXRGBCMYKLESS
1 (lightest)#cdabe3205, 171, 2270, 28, 23, 3wewak
2#9c59c9156, 89, 2010, 58, 47, 6froly
3#822cb8130, 44, 1840, 100, 81, 35carmine
4 (darkest)#41175d65, 23, 930, 100, 81, 55venetian-red

Bay

Section titled “Bay”
#0072b0
Bay (base)—cloud-bay
#b2d7eb
Level 1—cloud-bay-1
#66afd7
Level 2—cloud-bay-2
#005c8d
Level 3—cloud-bay-3
#003d5f
Level 4—cloud-bay-4
LevelHEXRGBCMYKLESS
1 (lightest)#b2d7eb178, 215, 2350, 28, 23, 3wewak
2#66afd7102, 175, 2150, 58, 47, 6froly
3#005c8d0, 92, 1410, 100, 81, 35carmine
4 (darkest)#003d5f0, 61, 950, 100, 81, 55venetian-red

White (Neutrals)

Section titled “White (Neutrals)”
#ffffff
White (base)—cloud-white
#faf9f7
Level 1—cloud-white-1
#f5f5f5
Level 2—cloud-white-2
#e6e6e6
Level 3—cloud-white-3
#cccccc
Level 4—cloud-white-4
LevelHEXRGBCMYKLESS
1 (lightest)#faf9f7250, 249, 2470, 28, 23, 3wewak
2#f5f5f5245, 245, 2450, 58, 47, 6froly
3#e6e6e6230, 230, 2300, 100, 81, 35carmine
4 (darkest)#cccccc204, 204, 2040, 100, 81, 55venetian-red

Black (Grays)

Section titled “Black (Grays)”
#000000
Black (base)—cloud-black
#999999
Level 1—cloud-black-1
#666666
Level 2—cloud-black-2
#343434
Level 3—cloud-black-3
#222222
Level 4—cloud-black-4
LevelHEXRGBCMYKLESS
1 (lightest)#999999153, 153, 1530, 28, 23, 3wewak
2#666666102, 102, 1020, 58, 47, 6froly
3#34343452, 52, 520, 100, 81, 35carmine
4 (darkest)#22222234, 34, 340, 100, 81, 55venetian-red

Mapping to Starlight CSS Custom Properties

Section titled “Mapping to Starlight CSS Custom Properties”

Starlight exposes --sl-color-* variables for theming. Below is the mapping from the F5 palette to Starlight’s semantic color slots, implemented in styles/custom.css.

How Starlight theming works: In Starlight, dark mode is the bare :root default — there is no data-theme="dark" selector. Light mode uses :root[data-theme='light']. The gray scale variables are semantic, not brightness-ordered: gray-1 is always “primary text” and gray-6/gray-7 are always “subtle backgrounds,” regardless of mode. Their actual brightness values swap between modes. Similarly, accent-high is always the high-visibility accent text color and accent-low is always the subtle accent background — their brightness inverts between modes.

/* Dark mode — Starlight default (:root) */
:root {
  --sl-color-white: #ffffff;      /* Heading text (brightest) */
  --sl-color-gray-1: #f5f5f5;    /* Primary text — White Level 2 */
  --sl-color-gray-2: #cccccc;    /* Body text — White Level 4 */
  --sl-color-gray-3: #999999;    /* Dim/muted text — Black Level 1 */
  --sl-color-gray-4: #666666;    /* Borders — Black Level 2 */
  --sl-color-gray-5: #343434;    /* Inline code bg — Black Level 3 */
  --sl-color-gray-6: #222222;    /* Sidebar bg — Black Level 4 */
  --sl-color-black: #000000;     /* Page background */
  --sl-color-accent-low: #720016;   /* Subtle accent bg — Cloud Red Level 4 */
  --sl-color-accent: #f06680;       /* Links, active — Cloud Red Level 2 */
  --sl-color-accent-high: #f7b2bf;  /* Accent text — Cloud Red Level 1 */
}


/* Light mode — inverted gray scale and accent brightness */
:root[data-theme='light'] {
  --sl-color-white: #222222;      /* Heading text (darkest) — Black Level 4 */
  --sl-color-gray-1: #222222;    /* Primary text — Black Level 4 */
  --sl-color-gray-2: #343434;    /* Body text — Black Level 3 */
  --sl-color-gray-3: #666666;    /* Dim text — Black Level 2 */
  --sl-color-gray-4: #999999;    /* Borders — Black Level 1 */
  --sl-color-gray-5: #cccccc;    /* Light borders — White Level 4 */
  --sl-color-gray-6: #f5f5f5;    /* Sidebar bg — White Level 2 */
  --sl-color-gray-7: #faf9f7;    /* Nav bg — White Level 1 */
  --sl-color-black: #ffffff;     /* Page background */
  --sl-color-accent-low: #f7b2bf;   /* Subtle accent bg — Cloud Red Level 1 (inverted) */
  --sl-color-accent: #e4002b;       /* Links, active — Cloud Red */
  --sl-color-accent-high: #720016;  /* Accent text — Cloud Red Level 4 (inverted) */
}

Visual Token Preview

Section titled “Visual Token Preview”

Toggle the theme switcher to see these semantic tokens change between dark and light mode.

Gray Scale Tokens

Section titled “Gray Scale Tokens”
white
Heading text—sl-color-white
gray-1
Primary text—sl-color-gray-1
gray-2
Body text—sl-color-gray-2
gray-3
Dim text—sl-color-gray-3
gray-4
Borders—sl-color-gray-4
gray-5
Inline code bg—sl-color-gray-5
gray-6
Sidebar bg—sl-color-gray-6
black
Page background—sl-color-black

Accent Tokens

Section titled “Accent Tokens”
accent-low
Subtle accent bg—sl-color-accent-low
accent
Links, active—sl-color-accent
accent-high
Accent text—sl-color-accent-high

Badge Tokens

Section titled “Badge Tokens”
default
Default badge—sl-color-bg-badge-default
note
Note badge—sl-color-bg-badge-note
danger
Danger badge—sl-color-bg-badge-danger
success
Success badge—sl-color-bg-badge-success
caution
Caution badge—sl-color-bg-badge-caution
tip
Tip badge—sl-color-bg-badge-tip

Contrast verification (WCAG AA)

Section titled “Contrast verification (WCAG AA)”

Dark mode (text on #000000 page background):

  • Body text #cccccc → 16.3:1 (AAA)
  • Dim text #999999 → 10:1 (AAA)
  • Accent link #f06680 → 5.6:1 (AA)

Light mode (text on #ffffff page background):

  • Body text #343434 → 11.6:1 (AAA)
  • Dim text #666666 → 5.7:1 (AA)
  • Accent link #e4002b → 4.6:1 (AA)

Semantic color suggestions

Section titled “Semantic color suggestions”
Starlight VariableF5 ColorUse Case
--sl-color-accentCloud Red #e4002bLinks, buttons, active states
--sl-color-text-accentCloud Red Level 2 #f06680Hover states in dark mode
--sl-color-bg-accentCloud Red Level 4 #720016Accent backgrounds
Custom: --sl-color-infoBay #0072b0Informational callouts
Custom: --sl-color-successJade #009639Success messages
Custom: --sl-color-warningTangerine #f29a36Warning callouts
Custom: --sl-color-dangerCloud Red #e4002bError/danger callouts

Color Contrast

Section titled “Color Contrast”

To ensure everyone can access and understand our communications, use background and text color combinations that meet accessibility standards. Select color pairs with a minimum contrast ratio of 3:1 for large text and 4.5:1 for regular text.

All color pairings must meet WCAG AA contrast requirements:

  • Regular text (< 18pt / 14pt bold): minimum 4.5:1 contrast ratio
  • Large text (≥ 18pt / 14pt bold): minimum 3:1 contrast ratio
  • UI components and graphical objects: minimum 3:1 contrast ratio
Section titled “Recommended safe pairings”
ForegroundBackgroundContrast RatioPasses
White #ffffffCloud Red #e4002b4.6:1AA
White #ffffffRiver #0e41aa6.4:1AA / AAA
White #ffffffBay #0072b04.6:1AA
White #ffffffJade #0096394.2:1AA (large text)
White #ffffffEggplant #62228b6.5:1AA / AAA
White #ffffffRaspberry #ab27824.7:1AA
Black #000000Tangerine #f29a367.8:1AA / AAA
Black #000000Cloud Red Level 1 #f7b2bf10.1:1AA / AAA
Black #222222White Level 1 #faf9f715.8:1AA / AAA

Tip: Always verify contrast ratios with a tool like WebAIM Contrast Checker when creating new color combinations.

Usage Guidelines

Section titled “Usage Guidelines”
Color FamilyRoleWhen to Use
Cloud RedBrand identity, primary CTAsHero sections, primary buttons, brand marks, error states
RiverInformational, trustNavigation links, informational banners, data visualizations
BayInformational, secondarySecondary links, info callouts, code block accents
JadeSuccess, positiveSuccess messages, confirmation states, progress indicators
TangerineWarning, attentionWarning callouts, attention-needed states, highlight markers
RaspberryAccent, decorativeTags, badges, secondary accents, category markers
EggplantAccent, premiumFeature highlights, premium indicators, decorative accents
White / NeutralsBackgrounds, surfacesPage backgrounds, card surfaces, dividers, subtle borders
Black / GraysText, structureBody text, headings, borders, shadow layers