Slate and Amber color palette
slategray · 0.04
orange · 0.027
Dashboard interfaces for finance, logistics, and developer tools reach for this combination often. Slate carries the cool, professional structure of the UI, while amber lights up the spots that need attention: a warning toast, a pending status, a primary call-to-action against a neutral background.
The two sit 177 degrees apart on the color wheel, so amber reads as a true accent against slate rather than a competing color. between them measures 2.24 to 1, which is low. That means you should not put amber text on slate or slate text on amber for body copy. Use amber on white or near-white surfaces, and use slate for text on light backgrounds. Their blended midpoint lands at a muted olive-brown (#AA8E69), which can work as a subtle border or divider color if you need a bridge tone.
In Tailwind, the slate and amber scales (50-900) are built to be mixed directly, so this pairing plugs into existing component libraries with little fuss.
See Slate and Amber in use
better
Slate Tailwind scale (50-900)
Amber Tailwind scale (50-900)
Slate to Amber blend
A continuous interpolation from Slate to Amber, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Slate and Amber 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 Amber (or the reverse) for body copy. For readable text, pair a dark scale step such as slate-800 or amber-900 with a light one like amber-50.
Contrast pairing grid
Rows are Slate steps, columns are Amber steps. Each mark is a Slate step shown on a Amber 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-amber-50: #FFFAF3;
--color-amber-100: #FEF4E8;
--color-amber-200: #FDEBD5;
--color-amber-300: #FBDFB9;
--color-amber-400: #F9CD93;
--color-amber-500: #F0A202;
--color-amber-600: #C48401;
--color-amber-700: #956301;
--color-amber-800: #573800;
--color-amber-900: #261600;
}
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',
},
'amber': {
50: '#FFFAF3',
100: '#FEF4E8',
200: '#FDEBD5',
300: '#FBDFB9',
400: '#F9CD93',
500: '#F0A202',
600: '#C48401',
700: '#956301',
800: '#573800',
900: '#261600',
},
},
},
},
};
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;
--amber-50: #FFFAF3;
--amber-100: #FEF4E8;
--amber-200: #FDEBD5;
--amber-300: #FBDFB9;
--amber-400: #F9CD93;
--amber-500: #F0A202;
--amber-600: #C48401;
--amber-700: #956301;
--amber-800: #573800;
--amber-900: #261600;
}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; $amber-50: #FFFAF3; $amber-100: #FEF4E8; $amber-200: #FDEBD5; $amber-300: #FBDFB9; $amber-400: #F9CD93; $amber-500: #F0A202; $amber-600: #C48401; $amber-700: #956301; $amber-800: #573800; $amber-900: #261600;
JSON tokens
{
"slate": {
"50": "#F5F6F8",
"100": "#EBEDF1",
"200": "#DBDFE5",
"300": "#C4CBD4",
"400": "#A7B0BE",
"500": "#64748B",
"600": "#505E71",
"700": "#3B4554",
"800": "#20262F",
"900": "#090C11"
},
"amber": {
"50": "#FFFAF3",
"100": "#FEF4E8",
"200": "#FDEBD5",
"300": "#FBDFB9",
"400": "#F9CD93",
"500": "#F0A202",
"600": "#C48401",
"700": "#956301",
"800": "#573800",
"900": "#261600"
}
}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 Amber); 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.