What are the hex codes in the Scarlet Bold palette?

The Scarlet Bold color palette consists of Cranberry #B00020, Scarlet #FF3B30, Melon #FFB4AB, White #FFFFFF.

How should I use the Scarlet Bold palette on a website?

Use White #FFFFFF as the background, Cranberry #B00020 for text, Scarlet #FF3B30 for buttons and links, and Melon #FFB4AB for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cranberry on White at 7.33:1.

Which colors in Scarlet Bold have enough contrast for text?

The highest-contrast pair is #B00020 on #FFFFFF with a ratio of 7.33:1, which passes WCAG AA for normal text.

#B00020Cranberry

#FF3B30Scarlet

#FFB4ABMelon

#FFFFFFWhite

Scarlet Bold color palette

Modern Vibrant Neon Warm Red White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cranberry	`#B00020`	`rgb(176, 0, 32)`	`hsl(349, 100%, 35%)`	`oklch(47.8% 0.193 24)`
Scarlet	`#FF3B30`	`rgb(255, 59, 48)`	`hsl(3, 100%, 59%)`	`oklch(65.4% 0.232 29)`
Melon	`#FFB4AB`	`rgb(255, 180, 171)`	`hsl(6, 100%, 84%)`	`oklch(83.8% 0.089 27)`
White	`#FFFFFF`	`rgb(255, 255, 255)`	`hsl(0, 0%, 100%)`	`oklch(100.0% 0.000 0)`

Why it works and how to use it

Scarlet Bold is a vivid monochromatic color palette tagged modern, vibrant, neon. All four colors sit within 17° 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 3 chromatic colors, Scarlet takes the lead while the rest support. Lightness runs from 35% to 100%. Well suited to websites, presentations and branding.

Background: White (#FFFFFF) is the lightest color, so it belongs on large surfaces.
Text: Cranberry (#B00020) on #FFFFFF gives 7.33:1, passing WCAG AAA.
Primary: Scarlet (#FF3B30) is the most saturated mid-tone; use it for buttons and links (3.55:1 against the background, fine for UI elements).
Accent: Melon (#FFB4AB) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cranberry on White at 7.33:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Scarlet Bold

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

#B00020

#FF3B30

#FFB4AB

#FFFFFF

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
`#B00020` on `#FFFFFF`	Aa	7.33:1	AAA
`#B00020` on `#FFB4AB`	Aa	4.31:1	AA large only
`#FF3B30` on `#FFFFFF`	Aa	3.55:1	AA large only
`#FF3B30` on `#FFB4AB`	Aa	2.09:1	Fail
`#B00020` on `#FF3B30`	Aa	2.07:1	Fail
`#FFB4AB` on `#FFFFFF`	Aa	1.7:1	Fail

Similar palettes 24 more in this mood