Salesforce
Salesforce's design-token palette, sourced from the public Salesforce Lightning Design System (SLDS) repository (`salesforce-ux/design-system`). Twelve chromatic families (Blue, Cloud Blue, Green, Hot Orange, Indigo, Orange, Pink, Purple, Red, Teal, Violet, Yellow) plus warm-gray and cool-gray neutrals. Each family runs 10 → 95 in non-uniform stops; the 10/15/20-band is the darkest, the 90/95-band is the lightest. The documented Salesforce brand-primary color resolves to Palette Blue 50 (#0176D3) — the canonical SLDS interactive blue that ships in the Aloha and Lightning themes. Warm Gray is Salesforce's default neutral scale; Cool Gray is the alternate.
50 swatches 15 light roles 15 dark roles
Swatches
warm-gray
warm-gray-1
#FFFFFF
warm-gray-2
#FAFAF9
warm-gray-3
#F3F2F2
warm-gray-4
#ECEBEA
warm-gray-5
#DDDBDA
warm-gray-6
#C9C7C5
warm-gray-7
#B0ADAB
warm-gray-8
#969492
warm-gray-9
#706E6B
warm-gray-10
#514F4D
warm-gray-11
#3E3E3C
warm-gray-12
#2B2826
warm-gray-13
#080707
cool-gray
cool-gray-2
#F9F9FA
cool-gray-9
#6B6D70
cool-gray-13
#070808
blue
blue-20
#032D60
blue-30
#014486
blue-40
#0B5CAB
blue-50
#0176D3
blue-60
#1B96FF
blue-90
#D8E6FE
blue-95
#EEF4FF
green
green-20
#1C3326
green-50
#2E844A
green-60
#3BA755
green-90
#CDEFC4
red
red-40
#BA0517
red-50
#EA001E
red-60
#FE5C4C
red-90
#FFCDC9
yellow
yellow-40
#8C4B02
yellow-50
#A86403
yellow-60
#CA8501
yellow-90
#FCEAB3
orange
orange-50
#A96404
orange-60
#DD7A01
orange-70
#FE9339
cloud-blue
cloud-blue-50
#107CAD
cloud-blue-70
#1AB9FF
teal
teal-50
#0B827C
teal-60
#06A59A
pink
pink-50
#E3066A
pink-60
#FF538A
indigo
indigo-50
#5867E8
indigo-60
#7F8CED
purple
purple-50
#9050E9
purple-60
#AD7BEE
violet
violet-50
#BA01FF
violet-60
#CB65FF
Mode role mappings
Light mode (15 roles)
accent
→ blue-50 accent-hover
→ blue-40 background
→ warm-gray-1 border
→ warm-gray-5 error
→ red-50 primary
→ blue-50 primary-hover
→ blue-40 success
→ green-50 surface
→ warm-gray-2 surface-elevated
→ warm-gray-1 text-primary
→ warm-gray-13 text-secondary
→ warm-gray-9 text-tertiary
→ warm-gray-10 warning
→ yellow-50 warning-hover
→ yellow-40 Dark mode (15 roles)
accent
→ blue-60 accent-hover
→ blue-50 background
→ warm-gray-13 border
→ warm-gray-11 error
→ red-60 primary
→ blue-60 primary-hover
→ blue-50 success
→ green-60 surface
→ warm-gray-12 surface-elevated
→ warm-gray-11 text-primary
→ warm-gray-2 text-secondary
→ warm-gray-6 text-tertiary
→ warm-gray-7 warning
→ yellow-60 warning-hover
→ yellow-50 Provenance
- Source
- https://github.com/salesforce-ux/design-system/blob/main/design-tokens/aliases/color-palettes.yml
- License
BSD-3-Clause- Attribution
- Salesforce Lightning Design System color tokens, Copyright salesforce.com inc., licensed under BSD-3-Clause. Hex values mirrored from `design-tokens/aliases/color-palettes.yml` on the `main` branch. Salesforce, Lightning Design System, SLDS, and associated marks are property of salesforce.com inc.
- Imported
-
2026-05-19(upstream version salesforce-ux/design-system main@2026-05) - Notes
- SLDS's `BRAND_PRIMARY` token resolves to PALETTE_BLUE_50 (#0176D3); `BRAND_PRIMARY_ACTIVE` resolves to PALETTE_BLUE_50 again under the renamed alias (the older guidance had it at blue-30); `BRAND_LIGHT` is `#F4F6FE`. The catalogue captures the anchor stops (20 / 50 / 60 / 90 / 95) across each chromatic family and the full Warm Gray scale that drives canvas, surface, and text.