What are the hex codes in the Scarlet Ruby & Coral palette?

The Scarlet Ruby & Coral color palette consists of Ruby #D3235A, Coral #FF744A, Melon #FFBA7A, Wheat #F4DEB7.

How should I use the Scarlet Ruby & Coral palette on a website?

Use Wheat #F4DEB7 as the background, Ruby #D3235A for text, Coral #FF744A for buttons and links, and Melon #FFBA7A for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Scarlet Ruby & Coral have enough contrast for text?

The highest-contrast pair is #D3235A on #F4DEB7 with a ratio of 3.84:1, which passes WCAG AA for large text only.

#D3235ARuby

#FF744ACoral

#FFBA7AMelon

#F4DEB7Wheat

Scarlet Ruby & Coral color palette

Retro Vibrant Warm Orange Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Ruby	`#D3235A`	`rgb(211, 35, 90)`	`hsl(341, 72%, 48%)`	`oklch(56.7% 0.208 10)`
Coral	`#FF744A`	`rgb(255, 116, 74)`	`hsl(14, 100%, 65%)`	`oklch(71.9% 0.179 37)`
Melon	`#FFBA7A`	`rgb(255, 186, 122)`	`hsl(29, 100%, 74%)`	`oklch(84.0% 0.114 63)`
Wheat	`#F4DEB7`	`rgb(244, 222, 183)`	`hsl(38, 73%, 84%)`	`oklch(90.9% 0.057 82)`

Why it works and how to use it

Scarlet Ruby & Coral is a vivid analogous color palette tagged retro, vibrant, warm. Analogous neighbors on the wheel (Ruby, Coral, Melon) give it a natural, low-tension flow. 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 48% to 84%. Well suited to websites, presentations and branding.

Background: Wheat (#F4DEB7) is the lightest color, so it belongs on large surfaces.
Text: Ruby (#D3235A) on #F4DEB7 gives 3.84:1, enough for large headings only.
Primary: Coral (#FF744A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Melon (#FFBA7A) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Scarlet Ruby & Coral

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

#D3235A

#FF744A

#FFBA7A

#F4DEB7

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
`#D3235A` on `#F4DEB7`	Aa	3.84:1	AA large only
`#D3235A` on `#FFBA7A`	Aa	3.02:1	AA large only
`#FF744A` on `#F4DEB7`	Aa	2.04:1	Fail
`#D3235A` on `#FF744A`	Aa	1.89:1	Fail
`#FF744A` on `#FFBA7A`	Aa	1.6:1	Fail
`#FFBA7A` on `#F4DEB7`	Aa	1.27:1	Fail

Similar palettes 24 more in this mood