What are the hex codes in the Cherry Terracotta & Seafoam palette?

The Cherry Terracotta & Seafoam color palette consists of Terracotta #D16764, Seafoam #97EFAF, Obsidian #0B0B0D, Buttercream #F9F2CF.

How should I use the Cherry Terracotta & Seafoam palette on a website?

Use Buttercream #F9F2CF as the background, Obsidian #0B0B0D for text, Seafoam #97EFAF for buttons and links, and Terracotta #D16764 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Buttercream at 17.45:1.

Which colors in Cherry Terracotta & Seafoam have enough contrast for text?

The highest-contrast pair is #0B0B0D on #F9F2CF with a ratio of 17.45:1, which passes WCAG AA for normal text.

#D16764Terracotta

#97EFAFSeafoam

#0B0B0DObsidian

#F9F2CFButtercream

Cherry Terracotta & Seafoam color palette

Modern Green Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Terracotta	`#D16764`	`rgb(209, 103, 100)`	`hsl(2, 54%, 61%)`	`oklch(63.9% 0.135 23)`
Seafoam	`#97EFAF`	`rgb(151, 239, 175)`	`hsl(136, 73%, 76%)`	`oklch(88.0% 0.123 152)`
Obsidian	`#0B0B0D`	`rgb(11, 11, 13)`	`hsl(240, 8%, 5%)`	`oklch(15.1% 0.004 286)`
Buttercream	`#F9F2CF`	`rgb(249, 242, 207)`	`hsl(50, 78%, 89%)`	`oklch(95.8% 0.046 98)`

Why it works and how to use it

Cherry Terracotta & Seafoam is a complementary color palette tagged modern, green, black. Terracotta and Buttercream sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

With 3 chromatic colors, Seafoam takes the lead while the rest support. Lightness runs from 5% to 89%. Well suited to websites, presentations and branding.

Background: Buttercream (#F9F2CF) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#0B0B0D) on #F9F2CF gives 17.45:1, passing WCAG AAA.
Primary: Seafoam (#97EFAF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Terracotta (#D16764) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Buttercream at 17.45:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Cherry Terracotta & Seafoam

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

#D16764

#97EFAF

#0B0B0D

#F9F2CF

Color-blind check: under protanopia and deuteranopia, Seafoam and Buttercream become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#0B0B0D` on `#F9F2CF`	Aa	17.45:1	AAA
`#97EFAF` on `#0B0B0D`	Aa	14.31:1	AAA
`#D16764` on `#0B0B0D`	Aa	5.46:1	AA
`#D16764` on `#F9F2CF`	Aa	3.19:1	AA large only
`#D16764` on `#97EFAF`	Aa	2.62:1	Fail
`#97EFAF` on `#F9F2CF`	Aa	1.22:1	Fail

:root {
  --terracotta: #D16764;
  --seafoam: #97EFAF;
  --obsidian: #0B0B0D;
  --buttercream: #F9F2CF;
}

$terracotta: #D16764;
$seafoam: #97EFAF;
$obsidian: #0B0B0D;
$buttercream: #F9F2CF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'terracotta': '#D16764',
        'seafoam': '#97EFAF',
        'obsidian': '#0B0B0D',
        'buttercream': '#F9F2CF',
      },
    },
  },
};

{
  "name": "Cherry Terracotta & Seafoam",
  "colors": [
    "#D16764",
    "#97EFAF",
    "#0B0B0D",
    "#F9F2CF"
  ]
}

background: linear-gradient(135deg, #D16764, #97EFAF, #0B0B0D, #F9F2CF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-09-15 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood