Sage and Cream color palette
darkseagreen · 0.036
lemonchiffon · 0.007
At a spring garden wedding you see this pairing everywhere: cream linen the shade of #FFFDD0, eucalyptus in soft green, place cards in muted tones. Sage #9CAF88 is a dusty, slightly cool green and cream is barely tinted, light and warm. They sit just 24 degrees apart, so they read as a quiet tonal blend rather than a , and their pale yellow-green midpoint (#CDD5AB) shows how related they are.
The contrast is 2.27 to 1, so cream works as a background and sage as a soft accent, but neither should carry body text against the other. For interiors and wellness branding, the pairing reads calm and natural without feeling stark.
See Sage and Cream in use
better
Sage Tailwind scale (50-900)
Cream Tailwind scale (50-900)
Sage to Cream blend
A continuous interpolation from Sage to Cream, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Sage and Cream 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 Cream (or the reverse) for body copy. For readable text, pair a dark scale step such as sage-800 or cream-900 with a light one like cream-50.
Contrast pairing grid
Rows are Sage steps, columns are Cream steps. Each mark is a Sage step shown on a Cream 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-cream-50: #FFFFFC;
--color-cream-100: #FFFFFA;
--color-cream-200: #FFFFF5;
--color-cream-300: #FFFEEE;
--color-cream-400: #FFFEE6;
--color-cream-500: #FFFDD0;
--color-cream-600: #D1CFAA;
--color-cream-700: #9E9D80;
--color-cream-800: #5D5D4B;
--color-cream-900: #29281F;
}
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',
},
'cream': {
50: '#FFFFFC',
100: '#FFFFFA',
200: '#FFFFF5',
300: '#FFFEEE',
400: '#FFFEE6',
500: '#FFFDD0',
600: '#D1CFAA',
700: '#9E9D80',
800: '#5D5D4B',
900: '#29281F',
},
},
},
},
};
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;
--cream-50: #FFFFFC;
--cream-100: #FFFFFA;
--cream-200: #FFFFF5;
--cream-300: #FFFEEE;
--cream-400: #FFFEE6;
--cream-500: #FFFDD0;
--cream-600: #D1CFAA;
--cream-700: #9E9D80;
--cream-800: #5D5D4B;
--cream-900: #29281F;
}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; $cream-50: #FFFFFC; $cream-100: #FFFFFA; $cream-200: #FFFFF5; $cream-300: #FFFEEE; $cream-400: #FFFEE6; $cream-500: #FFFDD0; $cream-600: #D1CFAA; $cream-700: #9E9D80; $cream-800: #5D5D4B; $cream-900: #29281F;
JSON tokens
{
"sage": {
"50": "#F9FAF8",
"100": "#F3F5F0",
"200": "#E9EDE4",
"300": "#DAE2D3",
"400": "#C7D3BD",
"500": "#9CAF88",
"600": "#7F8F6E",
"700": "#5F6B52",
"800": "#363D2E",
"900": "#151811"
},
"cream": {
"50": "#FFFFFC",
"100": "#FFFFFA",
"200": "#FFFFF5",
"300": "#FFFEEE",
"400": "#FFFEE6",
"500": "#FFFDD0",
"600": "#D1CFAA",
"700": "#9E9D80",
"800": "#5D5D4B",
"900": "#29281F"
}
}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 Cream); 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.