Salmon & Sage color palette
Two warm pinks, salmon #FA8072 and a softer #E9967A, sit against three greens that run from sage to deep olive, #556B2F. Pink and green are complementary, and keeping the greens earthy stops the pairing from looking like candy. It reads fresh and a little Mediterranean. Farm-to-table restaurants and garden weddings suit it well.
Salmon & Sage palette in use
On a cream or white page, use #556B2F for text and #FA8072 for buttons. #8FBC8F suits section backgrounds and tags, and #6B8E23 works for icons and dividers.
This pair measures 9.75:1, so it works for body text too. The button uses #FA8072 with black text.
ButtonGood for
- Farm-to-table restaurant
- Garden wedding invite
- Botanical print shop
- Home goods store
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.
Salmon & Sage palette as code
CSS variables
:root {
--salmon-and-sage-1: #FA8072;
--salmon-and-sage-2: #E9967A;
--salmon-and-sage-3: #8FBC8F;
--salmon-and-sage-4: #6B8E23;
--salmon-and-sage-5: #556B2F;
}Tailwind v4
@theme {
--color-salmon-and-sage-1: #FA8072;
--color-salmon-and-sage-2: #E9967A;
--color-salmon-and-sage-3: #8FBC8F;
--color-salmon-and-sage-4: #6B8E23;
--color-salmon-and-sage-5: #556B2F;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'salmon-and-sage': {
100: '#FA8072',
200: '#E9967A',
300: '#8FBC8F',
400: '#6B8E23',
500: '#556B2F',
},SCSS
$salmon-and-sage-1: #FA8072;
$salmon-and-sage-2: #E9967A;
$salmon-and-sage-3: #8FBC8F;
$salmon-and-sage-4: #6B8E23;
$salmon-and-sage-5: #556B2F;JSON
["#FA8072","#E9967A","#8FBC8F","#6B8E23","#556B2F"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.