Slate and Emerald color palette
slategray · 0.04
seagreen · 0.01
Reach for this pair when an interface needs a clear status color that does not fight the rest of the UI. Slate #64748B handles structure: borders, body text, secondary buttons, the calm backbone of a dashboard. Emerald #1F8A5B then carries meaning, marking success states, confirmations, positive deltas, or premium tiers, without shouting over the layout.
The two sit at almost the same perceived lightness, so the text needs to stay readable">WCAG contrast between them is only 1.1 to 1. Do not place emerald text on a slate background or vice versa. They are meant to coexist on a white or near-white surface, where each has its own job. The 98 degree gap keeps them clearly different (a cool gray next to a true green) while their shared coolness stops the combination from feeling busy. Blended, they meet at a muted green-gray (#4B8074), which is a useful hover or muted-state tone.
In Tailwind terms, the 50-900 ramps for both give you room for backgrounds, dividers, hover states, and dark mode equivalents from the same family.
See Slate and Emerald in use
better
Slate Tailwind scale (50-900)
Emerald Tailwind scale (50-900)
Slate to Emerald blend
A continuous interpolation from Slate to Emerald, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Slate and Emerald 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 Slate text on Emerald (or the reverse) for body copy. For readable text, pair a dark scale step such as slate-800 or emerald-900 with a light one like emerald-50.
Contrast pairing grid
Rows are Slate steps, columns are Emerald steps. Each mark is a Slate step shown on a Emerald 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-slate-50: #F5F6F8;
--color-slate-100: #EBEDF1;
--color-slate-200: #DBDFE5;
--color-slate-300: #C4CBD4;
--color-slate-400: #A7B0BE;
--color-slate-500: #64748B;
--color-slate-600: #505E71;
--color-slate-700: #3B4554;
--color-slate-800: #20262F;
--color-slate-900: #090C11;
--color-emerald-50: #F3F8F5;
--color-emerald-100: #E6F1EA;
--color-emerald-200: #D1E5D9;
--color-emerald-300: #B5D4C1;
--color-emerald-400: #8DBEA2;
--color-emerald-500: #1F8A5B;
--color-emerald-600: #177049;
--color-emerald-700: #0F5335;
--color-emerald-800: #052F1C;
--color-emerald-900: #011108;
}
Tailwind v3 — tailwind.config.js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'slate': {
50: '#F5F6F8',
100: '#EBEDF1',
200: '#DBDFE5',
300: '#C4CBD4',
400: '#A7B0BE',
500: '#64748B',
600: '#505E71',
700: '#3B4554',
800: '#20262F',
900: '#090C11',
},
'emerald': {
50: '#F3F8F5',
100: '#E6F1EA',
200: '#D1E5D9',
300: '#B5D4C1',
400: '#8DBEA2',
500: '#1F8A5B',
600: '#177049',
700: '#0F5335',
800: '#052F1C',
900: '#011108',
},
},
},
},
};
CSS variables
:root {
--slate-50: #F5F6F8;
--slate-100: #EBEDF1;
--slate-200: #DBDFE5;
--slate-300: #C4CBD4;
--slate-400: #A7B0BE;
--slate-500: #64748B;
--slate-600: #505E71;
--slate-700: #3B4554;
--slate-800: #20262F;
--slate-900: #090C11;
--emerald-50: #F3F8F5;
--emerald-100: #E6F1EA;
--emerald-200: #D1E5D9;
--emerald-300: #B5D4C1;
--emerald-400: #8DBEA2;
--emerald-500: #1F8A5B;
--emerald-600: #177049;
--emerald-700: #0F5335;
--emerald-800: #052F1C;
--emerald-900: #011108;
}SCSS variables
$slate-50: #F5F6F8; $slate-100: #EBEDF1; $slate-200: #DBDFE5; $slate-300: #C4CBD4; $slate-400: #A7B0BE; $slate-500: #64748B; $slate-600: #505E71; $slate-700: #3B4554; $slate-800: #20262F; $slate-900: #090C11; $emerald-50: #F3F8F5; $emerald-100: #E6F1EA; $emerald-200: #D1E5D9; $emerald-300: #B5D4C1; $emerald-400: #8DBEA2; $emerald-500: #1F8A5B; $emerald-600: #177049; $emerald-700: #0F5335; $emerald-800: #052F1C; $emerald-900: #011108;
JSON tokens
{
"slate": {
"50": "#F5F6F8",
"100": "#EBEDF1",
"200": "#DBDFE5",
"300": "#C4CBD4",
"400": "#A7B0BE",
"500": "#64748B",
"600": "#505E71",
"700": "#3B4554",
"800": "#20262F",
"900": "#090C11"
},
"emerald": {
"50": "#F3F8F5",
"100": "#E6F1EA",
"200": "#D1E5D9",
"300": "#B5D4C1",
"400": "#8DBEA2",
"500": "#1F8A5B",
"600": "#177049",
"700": "#0F5335",
"800": "#052F1C",
"900": "#011108"
}
}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, Slate and Emerald); 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.