#DDDEE2
#00C463
#676C7C
#17191F
#D16764Terracotta
#97EFAFSeafoam
#0B0B0DObsidian
#F9F2CFButtercream
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.
Color codes click any value to copy
| Swatch | 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
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 SecondaryCard title
Card title
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.
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 |
Similar palettes 24 more in this mood
#121826
#00833F
#01FFC6
#F0F0FF
#E2E8CE
#BBDA7F
#6EAE00
#0D1800
#FDFDFD
#E4E4E3
#84CA57
#1C1917
#002318
#00E076
#45DAE9
#E3E3E3
#0F0F0F
#444444
#049C65
#F4EEE8
#E1E1E1
#C5C6CA
#009969
#040815
#FFC7C4
#00A754
#F0F0F7
#0F0B00
#001725
#9BA0FF
#FF99B4
#A6DA7C
#0B0C10
#00AB70
#05D9E8
#D1F7FF
#111111
#424242
#FF3B3B
#FAFAFA
#1A1A1D
#4C4C54
#E8788A
#F4F4F6
#FAFAFA
#E5E7EB
#10B981
#111827
#FFFFFF
#E4E4E3
#F59E0B
#1C1917
#FFF7F9
#EED8E0
#E11D74
#2B1720
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#0A1A1E
#648691
#EED200
#D8E2E5
#00A7D3
#FFB3C1
#7BC96F
#2D6A4F
#211525
#634665
#886B91
#E0E1DD
#8A6800
#84A347
#00C38B
#56E7F4
#E0E4E9
#BC4358
#3E5169
#090E15
#1A3F1E
#475756
#007C5E
#A7CA57
#00818A
#009D8C
#31CA88
#ACE496
#CDFFC8
#3FB063
#2C7040
#004A14