Seafoam color palette
Seafoam green #A8E6CF and pale lime are the cool side, and peach #FFD3B6, salmon and coral pink #FF8B94 are the warm one. All five are soft and light, and the green-and-coral pairing has a beach-house freshness. You'll need a dark teal or charcoal for text. Beach cafes and baby product brands will find it easy to work with.
Seafoam palette in use
Use #DCEDC1 or #A8E6CF as the background, and #FF8B94 for buttons and badges with dark charcoal text. #FFD3B6 and #FFAAA5 work for cards and illustrations.
This pair measures 16.92:1, so it works for body text too. The button uses #FF8B94 with black text.
ButtonGood for
- Beach cafe menu
- Baby product packaging
- Gift shop website
- Summer wedding invite
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Seafoam palette as code
CSS variables
:root {
--seafoam-1: #A8E6CF;
--seafoam-2: #DCEDC1;
--seafoam-3: #FFD3B6;
--seafoam-4: #FFAAA5;
--seafoam-5: #FF8B94;
}Tailwind v4
@theme {
--color-seafoam-1: #A8E6CF;
--color-seafoam-2: #DCEDC1;
--color-seafoam-3: #FFD3B6;
--color-seafoam-4: #FFAAA5;
--color-seafoam-5: #FF8B94;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'seafoam': {
100: '#A8E6CF',
200: '#DCEDC1',
300: '#FFD3B6',
400: '#FFAAA5',
500: '#FF8B94',
},SCSS
$seafoam-1: #A8E6CF;
$seafoam-2: #DCEDC1;
$seafoam-3: #FFD3B6;
$seafoam-4: #FFAAA5;
$seafoam-5: #FF8B94;JSON
["#A8E6CF","#DCEDC1","#FFD3B6","#FFAAA5","#FF8B94"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.