Color reference | Pathfinder

Choose a scale by its role, then check the foreground and background together. Each swatch below uses the actual exported color.

100–300 are fills; 400–600 are borders; 700–800 are solid fills; 900–1000 are text and icons. Check contrast for the actual foreground/background pair. Amber and orange solid fills require dark text; a scale step alone does not guarantee accessible contrast.

--pf-color-background-subtle aliases Soft Pearl 100. Dark values are not defined yet.

Background surfaces

Subtle#fcfbf8

Background#ffffff

Use white for surfaces and Soft Pearl 100 for a subtle canvas. Keep text outside decorative swatches so the reference stays readable.

Soft pearl

100#fcfbf8

200#f8f6f1

300#edeae3

400#dedbd4

500#c8c4be

600#a6a29c

700#8f8b85

800#6d6963

900#57524d

1000#14120f

Token values and CSS variables

Token	CSS variable	Hex
soft-pearl-100	`--pf-color-soft-pearl-100`	`#fcfbf8`
soft-pearl-200	`--pf-color-soft-pearl-200`	`#f8f6f1`
soft-pearl-300	`--pf-color-soft-pearl-300`	`#edeae3`
soft-pearl-400	`--pf-color-soft-pearl-400`	`#dedbd4`
soft-pearl-500	`--pf-color-soft-pearl-500`	`#c8c4be`
soft-pearl-600	`--pf-color-soft-pearl-600`	`#a6a29c`
soft-pearl-700	`--pf-color-soft-pearl-700`	`#8f8b85`
soft-pearl-800	`--pf-color-soft-pearl-800`	`#6d6963`
soft-pearl-900	`--pf-color-soft-pearl-900`	`#57524d`
soft-pearl-1000	`--pf-color-soft-pearl-1000`	`#14120f`

Blue

100#f1f8ff

200#e5f2ff

300#d4e9ff

400#bcddff

500#93c8fd

600#63aaed

700#026eb9

800#005a9c

900#014679

1000#012543

Token values and CSS variables

Token	CSS variable	Hex
blue-100	`--pf-color-blue-100`	`#f1f8ff`
blue-200	`--pf-color-blue-200`	`#e5f2ff`
blue-300	`--pf-color-blue-300`	`#d4e9ff`
blue-400	`--pf-color-blue-400`	`#bcddff`
blue-500	`--pf-color-blue-500`	`#93c8fd`
blue-600	`--pf-color-blue-600`	`#63aaed`
blue-700	`--pf-color-blue-700`	`#026eb9`
blue-800	`--pf-color-blue-800`	`#005a9c`
blue-900	`--pf-color-blue-900`	`#014679`
blue-1000	`--pf-color-blue-1000`	`#012543`

Red

100#fff4f2

200#feebe8

300#feded8

400#ffcbc2

500#ffa99b

600#f77a68

700#c93829

800#b01b0f

900#920a02

1000#520d07

Token values and CSS variables

Token	CSS variable	Hex
red-100	`--pf-color-red-100`	`#fff4f2`
red-200	`--pf-color-red-200`	`#feebe8`
red-300	`--pf-color-red-300`	`#feded8`
red-400	`--pf-color-red-400`	`#ffcbc2`
red-500	`--pf-color-red-500`	`#ffa99b`
red-600	`--pf-color-red-600`	`#f77a68`
red-700	`--pf-color-red-700`	`#c93829`
red-800	`--pf-color-red-800`	`#b01b0f`
red-900	`--pf-color-red-900`	`#920a02`
red-1000	`--pf-color-red-1000`	`#520d07`

Amber

100#fff5ed

200#feedde

300#fde0c8

400#fbd0ab

500#f1b47e

600#de9145

700#d87e09

800#bb6c07

900#864c02

1000#452501

Token values and CSS variables

Token	CSS variable	Hex
amber-100	`--pf-color-amber-100`	`#fff5ed`
amber-200	`--pf-color-amber-200`	`#feedde`
amber-300	`--pf-color-amber-300`	`#fde0c8`
amber-400	`--pf-color-amber-400`	`#fbd0ab`
amber-500	`--pf-color-amber-500`	`#f1b47e`
amber-600	`--pf-color-amber-600`	`#de9145`
amber-700	`--pf-color-amber-700`	`#d87e09`
amber-800	`--pf-color-amber-800`	`#bb6c07`
amber-900	`--pf-color-amber-900`	`#864c02`
amber-1000	`--pf-color-amber-1000`	`#452501`

Green

100#f1f9f1

200#e7f5e6

300#d6eed6

400#c1e4c0

500#a0d29f

600#75b876

700#36863a

800#1e7125

900#0f5b18

1000#0c320f

Token values and CSS variables

Token	CSS variable	Hex
green-100	`--pf-color-green-100`	`#f1f9f1`
green-200	`--pf-color-green-200`	`#e7f5e6`
green-300	`--pf-color-green-300`	`#d6eed6`
green-400	`--pf-color-green-400`	`#c1e4c0`
green-500	`--pf-color-green-500`	`#a0d29f`
green-600	`--pf-color-green-600`	`#75b876`
green-700	`--pf-color-green-700`	`#36863a`
green-800	`--pf-color-green-800`	`#1e7125`
green-900	`--pf-color-green-900`	`#0f5b18`
green-1000	`--pf-color-green-1000`	`#0c320f`

Purple

100#f9f5fe

200#f5ecfc

300#eee0fa

400#e4cff7

500#d3b4ec

600#b991d8

700#8c5eae

800#774a98

900#61397d

1000#372147

Token values and CSS variables

Token	CSS variable	Hex
purple-100	`--pf-color-purple-100`	`#f9f5fe`
purple-200	`--pf-color-purple-200`	`#f5ecfc`
purple-300	`--pf-color-purple-300`	`#eee0fa`
purple-400	`--pf-color-purple-400`	`#e4cff7`
purple-500	`--pf-color-purple-500`	`#d3b4ec`
purple-600	`--pf-color-purple-600`	`#b991d8`
purple-700	`--pf-color-purple-700`	`#8c5eae`
purple-800	`--pf-color-purple-800`	`#774a98`
purple-900	`--pf-color-purple-900`	`#61397d`
purple-1000	`--pf-color-purple-1000`	`#372147`

Rose

100#fff3f6

200#ffeaef

300#fedce4

400#ffc8d5

500#fda5bc

600#eb7d9d

700#ce507a

800#b63966

900#982b53

1000#50152a

Token values and CSS variables

Token	CSS variable	Hex
rose-100	`--pf-color-rose-100`	`#fff3f6`
rose-200	`--pf-color-rose-200`	`#ffeaef`
rose-300	`--pf-color-rose-300`	`#fedce4`
rose-400	`--pf-color-rose-400`	`#ffc8d5`
rose-500	`--pf-color-rose-500`	`#fda5bc`
rose-600	`--pf-color-rose-600`	`#eb7d9d`
rose-700	`--pf-color-rose-700`	`#ce507a`
rose-800	`--pf-color-rose-800`	`#b63966`
rose-900	`--pf-color-rose-900`	`#982b53`
rose-1000	`--pf-color-rose-1000`	`#50152a`

Orange

100#fff4f0

200#feece4

300#fedfd2

400#ffccb7

500#feab88

600#f3804c

700#ef6820

800#d35502

900#983b02

1000#501b00

Token values and CSS variables

Token	CSS variable	Hex
orange-100	`--pf-color-orange-100`	`#fff4f0`
orange-200	`--pf-color-orange-200`	`#feece4`
orange-300	`--pf-color-orange-300`	`#fedfd2`
orange-400	`--pf-color-orange-400`	`#ffccb7`
orange-500	`--pf-color-orange-500`	`#feab88`
orange-600	`--pf-color-orange-600`	`#f3804c`
orange-700	`--pf-color-orange-700`	`#ef6820`
orange-800	`--pf-color-orange-800`	`#d35502`
orange-900	`--pf-color-orange-900`	`#983b02`
orange-1000	`--pf-color-orange-1000`	`#501b00`

Background: --pf-color-background: #ffffff. Subtle: --pf-color-background-subtle → --pf-color-soft-pearl-100.

Avatar tones

Only for avatar initials; these are matched background/foreground pairs, not general-purpose status colors.

Clay#fee0d8#804536

Apricot#fae3d1#7a4b21

Ochre#f3e7ce#6e5414

Olive#e7ebd1#575d1f

Sage#d8efdc#31653e

Dusk#d5ebfe#2a5c84

Plum#f3e1f7#6d4875

Rose#fedfe2#80424d

Tone	Background	Foreground
clay	#fee0d8	#804536
apricot	#fae3d1	#7a4b21
ochre	#f3e7ce	#6e5414
olive	#e7ebd1	#575d1f
sage	#d8efdc	#31653e
dusk	#d5ebfe	#2a5c84
plum	#f3e1f7	#6d4875
rose	#fedfe2	#80424d

CSS variables: --pf-color-avatar-{tone}-bg and --pf-color-avatar-{tone}-fg.

Design guidance

Read Design principles for shared usage guidance and motion recipes.

Source: The System. Snapshot: 2026-10-12.

Background surfacesCopy Anchor Link

Soft pearlCopy Anchor Link

BlueCopy Anchor Link

RedCopy Anchor Link

AmberCopy Anchor Link

GreenCopy Anchor Link

PurpleCopy Anchor Link

RoseCopy Anchor Link

OrangeCopy Anchor Link

Avatar tonesCopy Anchor Link

Design guidanceCopy Anchor Link

On this page

Background surfaces

Soft pearl

Blue

Red

Amber

Green

Purple

Rose

Orange

Avatar tones

Design guidance