What are the hex codes in the Crimson Tonal palette?

The Crimson Tonal color palette consists of Rosewood #5A0A14, Cranberry #9B1B30, Punch #D64550, Ballet #F9DADD.

How should I use the Crimson Tonal palette on a website?

Use Ballet #F9DADD as the background, Rosewood #5A0A14 for text, Cranberry #9B1B30 for buttons and links, and Punch #D64550 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Rosewood on Ballet at 10.82:1.

Which colors in Crimson Tonal have enough contrast for text?

The highest-contrast pair is #5A0A14 on #F9DADD with a ratio of 10.82:1, which passes WCAG AA for normal text.

#5A0A14Rosewood

#9B1B30Cranberry

#D64550Punch

#F9DADDBallet

Crimson Tonal color palette

Gradient Vibrant Warm Red

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Rosewood	`#5A0A14`	`rgb(90, 10, 20)`	`hsl(353, 80%, 20%)`	`oklch(30.4% 0.111 21)`
Cranberry	`#9B1B30`	`rgb(155, 27, 48)`	`hsl(350, 70%, 36%)`	`oklch(45.1% 0.162 19)`
Punch	`#D64550`	`rgb(214, 69, 80)`	`hsl(355, 64%, 55%)`	`oklch(59.8% 0.181 20)`
Ballet	`#F9DADD`	`rgb(249, 218, 221)`	`hsl(354, 72%, 92%)`	`oklch(91.5% 0.035 11)`

Why it works and how to use it

Crimson Tonal is a vivid monochromatic color palette tagged gradient, vibrant, warm. All four colors sit within 5° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them. The overall temperature is warm.

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

Background: Ballet (#F9DADD) is the lightest color, so it belongs on large surfaces.
Text: Rosewood (#5A0A14) on #F9DADD gives 10.82:1, passing WCAG AAA.
Primary: Cranberry (#9B1B30) is the most saturated mid-tone; use it for buttons and links (6.21:1 against the background, fine for UI elements).
Accent: Punch (#D64550) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Rosewood on Ballet at 10.82:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Crimson Tonal

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

#5A0A14

#9B1B30

#D64550

#F9DADD

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
`#5A0A14` on `#F9DADD`	Aa	10.82:1	AAA
`#9B1B30` on `#F9DADD`	Aa	6.21:1	AA
`#D64550` on `#F9DADD`	Aa	3.34:1	AA large only
`#5A0A14` on `#D64550`	Aa	3.24:1	AA large only
`#9B1B30` on `#D64550`	Aa	1.86:1	Fail
`#5A0A14` on `#9B1B30`	Aa	1.74:1	Fail

Similar palettes 24 more in this mood