Sage and Mauve color palette
darkseagreen · 0.036
For a wedding that wants romance without full pink and nature without full forest green, this pair solves it. Sage #9CAF88 is the soft herbal green of dried eucalyptus; Mauve #B784A7 is a dusty purple-pink that reads grown-up rather than girly. They sit close in lightness, so the is only 1.3 to 1 and they blend rather than compete. Their are 150 degrees apart, far enough to feel like a real pairing, and the midpoint is a soft gray-mauve (#AB9A99) that works as a neutral.
On a tablescape, sage napkins under mauve menu cards feel layered, not loud. In interiors, use sage on walls and mauve as an accent in cushions or velvet drapery.
See Sage and Mauve in use
Sage Tailwind scale (50-900)
Mauve Tailwind scale (50-900)
Sage to Mauve blend
A continuous interpolation from Sage to Mauve, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Sage and Mauve blend best in OKLab
The same two colors blended three ways. This site uses OKLab, which keeps the blend smooth and evenly lit. The other two are shown so you can see what to avoid: sRGB darkens and muddies the middle, and HSL detours through colors that are not in your palette.
Accessibility
Do not place Sage text on Mauve (or the reverse) for body copy. For readable text, pair a dark scale step such as sage-800 or mauve-900 with a light one like mauve-50.
Contrast pairing grid
Rows are Sage steps, columns are Mauve steps. Each mark is a Sage step shown on a Mauve step: a check means it clears WCAG AA for text (4.5:1). If you can read the mark, the pairing is legible.
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |
|---|---|---|---|---|---|---|---|---|---|---|
| 50 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 100 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 200 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 300 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 400 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 500 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 600 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ |
| 700 | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ |
| 800 | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ |
| 900 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ |
✓ passes AA ✗ fails AA
Copy for Tailwind
Tailwind v4 — @theme (paste into your CSS)
@theme {
--color-sage-50: #F9FAF8;
--color-sage-100: #F3F5F0;
--color-sage-200: #E9EDE4;
--color-sage-300: #DAE2D3;
--color-sage-400: #C7D3BD;
--color-sage-500: #9CAF88;
--color-sage-600: #7F8F6E;
--color-sage-700: #5F6B52;
--color-sage-800: #363D2E;
--color-sage-900: #151811;
--color-mauve-50: #FBF7FA;
--color-mauve-100: #F7F0F4;
--color-mauve-200: #F0E3EB;
--color-mauve-300: #E6D2DF;
--color-mauve-400: #D8BACE;
--color-mauve-500: #B784A7;
--color-mauve-600: #956B88;
--color-mauve-700: #704F66;
--color-mauve-800: #412C3A;
--color-mauve-900: #1A1017;
}
Tailwind v3 — tailwind.config.js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'sage': {
50: '#F9FAF8',
100: '#F3F5F0',
200: '#E9EDE4',
300: '#DAE2D3',
400: '#C7D3BD',
500: '#9CAF88',
600: '#7F8F6E',
700: '#5F6B52',
800: '#363D2E',
900: '#151811',
},
'mauve': {
50: '#FBF7FA',
100: '#F7F0F4',
200: '#F0E3EB',
300: '#E6D2DF',
400: '#D8BACE',
500: '#B784A7',
600: '#956B88',
700: '#704F66',
800: '#412C3A',
900: '#1A1017',
},
},
},
},
};
CSS variables
:root {
--sage-50: #F9FAF8;
--sage-100: #F3F5F0;
--sage-200: #E9EDE4;
--sage-300: #DAE2D3;
--sage-400: #C7D3BD;
--sage-500: #9CAF88;
--sage-600: #7F8F6E;
--sage-700: #5F6B52;
--sage-800: #363D2E;
--sage-900: #151811;
--mauve-50: #FBF7FA;
--mauve-100: #F7F0F4;
--mauve-200: #F0E3EB;
--mauve-300: #E6D2DF;
--mauve-400: #D8BACE;
--mauve-500: #B784A7;
--mauve-600: #956B88;
--mauve-700: #704F66;
--mauve-800: #412C3A;
--mauve-900: #1A1017;
}SCSS variables
$sage-50: #F9FAF8; $sage-100: #F3F5F0; $sage-200: #E9EDE4; $sage-300: #DAE2D3; $sage-400: #C7D3BD; $sage-500: #9CAF88; $sage-600: #7F8F6E; $sage-700: #5F6B52; $sage-800: #363D2E; $sage-900: #151811; $mauve-50: #FBF7FA; $mauve-100: #F7F0F4; $mauve-200: #F0E3EB; $mauve-300: #E6D2DF; $mauve-400: #D8BACE; $mauve-500: #B784A7; $mauve-600: #956B88; $mauve-700: #704F66; $mauve-800: #412C3A; $mauve-900: #1A1017;
JSON tokens
{
"sage": {
"50": "#F9FAF8",
"100": "#F3F5F0",
"200": "#E9EDE4",
"300": "#DAE2D3",
"400": "#C7D3BD",
"500": "#9CAF88",
"600": "#7F8F6E",
"700": "#5F6B52",
"800": "#363D2E",
"900": "#151811"
},
"mauve": {
"50": "#FBF7FA",
"100": "#F7F0F4",
"200": "#F0E3EB",
"300": "#E6D2DF",
"400": "#D8BACE",
"500": "#B784A7",
"600": "#956B88",
"700": "#704F66",
"800": "#412C3A",
"900": "#1A1017"
}
}How we name colors
There is no single official authority for naming colors. We use the common, widely recognized name as the primary label for each color (here, Sage and Mauve); many common names are themselves W3C CSS named colors. For transparency we also show the nearest W3C CSS named color and the perceptual distance, ΔE, measured in OKLab. A small ΔE means the name is essentially exact; a larger one means it is the closest standard name rather than a perfect match.
Sources: W3C CSS Color Module Level 4 and the open color-name-list dataset, used to verify every color sits near a recognized name.