What are the hex codes in the Scarlet Terracotta & Brick Red palette?

The Scarlet Terracotta & Brick Red color palette consists of Brick Red #8F413F, Terracotta #D36F63, Baby Pink #E8BFB9, White #FDFDFD.

How should I use the Scarlet Terracotta & Brick Red palette on a website?

Use White #FDFDFD as the background, Brick Red #8F413F for text, Terracotta #D36F63 for buttons and links, and Baby Pink #E8BFB9 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Brick Red on White at 6.89:1.

Which colors in Scarlet Terracotta & Brick Red have enough contrast for text?

The highest-contrast pair is #8F413F on #FDFDFD with a ratio of 6.89:1, which passes WCAG AA for normal text.

#8F413FBrick Red

#D36F63Terracotta

#E8BFB9Baby Pink

#FDFDFDWhite

Scarlet Terracotta & Brick Red color palette

Modern Warm White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Brick Red	`#8F413F`	`rgb(143, 65, 63)`	`hsl(1, 39%, 40%)`	`oklch(47.6% 0.107 23)`
Terracotta	`#D36F63`	`rgb(211, 111, 99)`	`hsl(6, 56%, 61%)`	`oklch(65.4% 0.128 28)`
Baby Pink	`#E8BFB9`	`rgb(232, 191, 185)`	`hsl(8, 51%, 82%)`	`oklch(83.9% 0.048 28)`
White	`#FDFDFD`	`rgb(253, 253, 253)`	`hsl(0, 0%, 99%)`	`oklch(99.4% 0.000 0)`

Why it works and how to use it

Scarlet Terracotta & Brick Red is a monochromatic color palette tagged modern, warm, white. All four colors sit within 7° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

With 3 chromatic colors, Terracotta takes the lead while the rest support. Lightness runs from 40% to 99%. Well suited to websites, presentations and branding.

Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
Text: Brick Red (#8F413F) on #FDFDFD gives 6.89:1, passing WCAG AA.
Primary: Terracotta (#D36F63) is the most saturated mid-tone; use it for buttons and links (3.32:1 against the background, fine for UI elements).
Accent: Baby Pink (#E8BFB9) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Scarlet Terracotta & Brick Red

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

#8F413F

#D36F63

#E8BFB9

#FDFDFD

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
`#8F413F` on `#FDFDFD`	Aa	6.89:1	AA
`#8F413F` on `#E8BFB9`	Aa	4.2:1	AA large only
`#D36F63` on `#FDFDFD`	Aa	3.32:1	AA large only
`#8F413F` on `#D36F63`	Aa	2.08:1	Fail
`#D36F63` on `#E8BFB9`	Aa	2.02:1	Fail
`#E8BFB9` on `#FDFDFD`	Aa	1.64:1	Fail

:root {
  --brick-red: #8F413F;
  --terracotta: #D36F63;
  --baby-pink: #E8BFB9;
  --white: #FDFDFD;
}

$brick-red: #8F413F;
$terracotta: #D36F63;
$baby-pink: #E8BFB9;
$white: #FDFDFD;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brick-red': '#8F413F',
        'terracotta': '#D36F63',
        'baby-pink': '#E8BFB9',
        'white': '#FDFDFD',
      },
    },
  },
};

{
  "name": "Scarlet Terracotta & Brick Red",
  "colors": [
    "#8F413F",
    "#D36F63",
    "#E8BFB9",
    "#FDFDFD"
  ]
}

background: linear-gradient(135deg, #8F413F, #D36F63, #E8BFB9, #FDFDFD);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-06-25 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood