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

The Brick Red & Terracotta Shore color palette consists of Brick Red #953A5E, Terracotta #C47D78, Melon #EEC0A1, Bisque #FFE6C3.

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

Use Bisque #FFE6C3 as the background, Brick Red #953A5E for text, Melon #EEC0A1 for buttons and links, and Terracotta #C47D78 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Brick Red on Bisque at 5.7:1.

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

The highest-contrast pair is #953A5E on #FFE6C3 with a ratio of 5.7:1, which passes WCAG AA for normal text.

#953A5EBrick Red

#C47D78Terracotta

#EEC0A1Melon

#FFE6C3Bisque

Brick Red & Terracotta Shore color palette

Warm Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Brick Red	`#953A5E`	`rgb(149, 58, 94)`	`hsl(336, 44%, 41%)`	`oklch(48.4% 0.128 358)`
Terracotta	`#C47D78`	`rgb(196, 125, 120)`	`hsl(4, 39%, 62%)`	`oklch(66.3% 0.089 24)`
Melon	`#EEC0A1`	`rgb(238, 192, 161)`	`hsl(24, 69%, 78%)`	`oklch(84.1% 0.067 56)`
Bisque	`#FFE6C3`	`rgb(255, 230, 195)`	`hsl(35, 100%, 88%)`	`oklch(93.6% 0.053 76)`

Why it works and how to use it

Brick Red & Terracotta Shore is a vivid analogous color palette tagged warm, beige. Analogous neighbors on the wheel (Brick Red, Terracotta, 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, Melon takes the lead while the rest support. Lightness runs from 41% to 88%. Well suited to websites, presentations and branding.

Background: Bisque (#FFE6C3) is the lightest color, so it belongs on large surfaces.
Text: Brick Red (#953A5E) on #FFE6C3 gives 5.7:1, passing WCAG AA.
Primary: Melon (#EEC0A1) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Terracotta (#C47D78) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Brick Red & Terracotta Shore

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

#953A5E

#C47D78

#EEC0A1

#FFE6C3

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
`#953A5E` on `#FFE6C3`	Aa	5.7:1	AA
`#953A5E` on `#EEC0A1`	Aa	4.17:1	AA large only
`#C47D78` on `#FFE6C3`	Aa	2.65:1	Fail
`#953A5E` on `#C47D78`	Aa	2.15:1	Fail
`#C47D78` on `#EEC0A1`	Aa	1.94:1	Fail
`#EEC0A1` on `#FFE6C3`	Aa	1.37:1	Fail

:root {
  --brick-red: #953A5E;
  --terracotta: #C47D78;
  --melon: #EEC0A1;
  --bisque: #FFE6C3;
}

$brick-red: #953A5E;
$terracotta: #C47D78;
$melon: #EEC0A1;
$bisque: #FFE6C3;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brick-red': '#953A5E',
        'terracotta': '#C47D78',
        'melon': '#EEC0A1',
        'bisque': '#FFE6C3',
      },
    },
  },
};

{
  "name": "Brick Red & Terracotta Shore",
  "colors": [
    "#953A5E",
    "#C47D78",
    "#EEC0A1",
    "#FFE6C3"
  ]
}

background: linear-gradient(135deg, #953A5E, #C47D78, #EEC0A1, #FFE6C3);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-01-30 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood