What are the hex codes in the Old Orange & Heather palette?

The Old Orange & Heather color palette consists of Lavender #E9E9F5, Orange #FCAF0C, Heather #B8B7D3, Raisin #222132.

How should I use the Old Orange & Heather palette on a website?

Use Lavender #E9E9F5 as the background, Raisin #222132 for text, Orange #FCAF0C for buttons and links, and Heather #B8B7D3 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lavender on Raisin at 13.1:1.

Which colors in Old Orange & Heather have enough contrast for text?

The highest-contrast pair is #E9E9F5 on #222132 with a ratio of 13.1:1, which passes WCAG AA for normal text.

#E9E9F5Lavender

#FCAF0COrange

#B8B7D3Heather

#222132Raisin

Old Orange & Heather color palette

Retro Minimal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Lavender	`#E9E9F5`	`rgb(233, 233, 245)`	`hsl(240, 38%, 94%)`	`oklch(93.8% 0.016 286)`
Orange	`#FCAF0C`	`rgb(252, 175, 12)`	`hsl(41, 98%, 52%)`	`oklch(80.7% 0.167 77)`
Heather	`#B8B7D3`	`rgb(184, 183, 211)`	`hsl(242, 24%, 77%)`	`oklch(78.9% 0.039 287)`
Raisin	`#222132`	`rgb(34, 33, 50)`	`hsl(244, 20%, 16%)`	`oklch(25.7% 0.032 287)`

Why it works and how to use it

Old Orange & Heather is a complementary color palette tagged retro, minimal. Lavender and Raisin sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Orange takes the lead while the rest support. Lightness runs from 16% to 94%. Well suited to websites, presentations and branding.

Background: Lavender (#E9E9F5) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#222132) on #E9E9F5 gives 13.1:1, passing WCAG AAA.
Primary: Orange (#FCAF0C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Heather (#B8B7D3) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Lavender on Raisin at 13.1:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Old Orange & Heather

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#E9E9F5

#FCAF0C

#B8B7D3

#222132

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#E9E9F5` on `#222132`	Aa	13.1:1	AAA
`#FCAF0C` on `#222132`	Aa	8.47:1	AAA
`#B8B7D3` on `#222132`	Aa	8.07:1	AAA
`#E9E9F5` on `#B8B7D3`	Aa	1.62:1	Fail
`#E9E9F5` on `#FCAF0C`	Aa	1.55:1	Fail
`#FCAF0C` on `#B8B7D3`	Aa	1.05:1	Fail

Similar palettes 24 more in this mood