What are the hex codes in the Purple & Coral Field palette?

The Purple & Coral Field color palette consists of Purple #9A1B8A, Taupe #4A4600, Petal #FFE0D8, Coral #FD936C.

How should I use the Purple & Coral Field palette on a website?

Use Petal #FFE0D8 as the background, Taupe #4A4600 for text, Coral #FD936C for buttons and links, and Purple #9A1B8A for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Petal at 7.8:1.

Which colors in Purple & Coral Field have enough contrast for text?

The highest-contrast pair is #4A4600 on #FFE0D8 with a ratio of 7.8:1, which passes WCAG AA for normal text.

#9A1B8APurple

#4A4600Taupe

#FFE0D8Petal

#FD936CCoral

Purple & Coral Field color palette

Warm Purple Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Purple	`#9A1B8A`	`rgb(154, 27, 138)`	`hsl(308, 70%, 35%)`	`oklch(48.2% 0.196 334)`
Taupe	`#4A4600`	`rgb(74, 70, 0)`	`hsl(57, 100%, 15%)`	`oklch(38.6% 0.082 106)`
Petal	`#FFE0D8`	`rgb(255, 224, 216)`	`hsl(12, 100%, 92%)`	`oklch(93.0% 0.036 35)`
Coral	`#FD936C`	`rgb(253, 147, 108)`	`hsl(16, 97%, 71%)`	`oklch(76.7% 0.139 41)`

Why it works and how to use it

Purple & Coral Field is a vivid split color palette tagged warm, purple, orange. A split scheme: Purple plays against Coral across roughly 109° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.

With 4 chromatic colors, Coral takes the lead while the rest support. Lightness runs from 15% to 92%. Well suited to websites, presentations and branding.

Background: Petal (#FFE0D8) is the lightest color, so it belongs on large surfaces.
Text: Taupe (#4A4600) on #FFE0D8 gives 7.8:1, passing WCAG AAA.
Primary: Coral (#FD936C) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Purple (#9A1B8A) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Taupe on Petal at 7.8:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Purple & Coral Field

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

#9A1B8A

#4A4600

#FFE0D8

#FD936C

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
`#4A4600` on `#FFE0D8`	Aa	7.8:1	AAA
`#9A1B8A` on `#FFE0D8`	Aa	5.83:1	AA
`#4A4600` on `#FD936C`	Aa	4.41:1	AA large only
`#9A1B8A` on `#FD936C`	Aa	3.3:1	AA large only
`#FFE0D8` on `#FD936C`	Aa	1.77:1	Fail
`#9A1B8A` on `#4A4600`	Aa	1.34:1	Fail

Similar palettes 24 more in this mood