Blue and Amber color palette
dodgerblue · 0.036
orange · 0.027
Dashboards and product UIs lean on this pairing all the time. The blue (#3B82F6) handles primary buttons, links, and selected states. The amber (#F0A202) steps in for warnings, pending statuses, and highlights that need to pull the eye away from the blue without competing for the same job.
The two sit 174 degrees apart on the wheel, so they read as true opposites in temperature. But they share similar brightness and saturation, both vibrant and mid-toned, which is why the measured between them is only 1.73 to 1. Place them directly on top of each other and the edges feel soft. They need white, near-white, or a dark neutral between them to do real work.
For Tailwind projects, the 50-900 scales give you the surfaces and text colors that make this combination usable. Their blended midpoint is a cool gray (#9D9CA6), useful for borders or muted text.
See Blue and Amber in use
better
Blue Tailwind scale (50-900)
Amber Tailwind scale (50-900)
Blue to Amber blend
A continuous interpolation from Blue to Amber, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Blue 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 Blue text on Amber (or the reverse) for body copy. For readable text, pair a dark scale step such as blue-800 or amber-900 with a light one like amber-50.
Contrast pairing grid
Rows are Blue steps, columns are Amber steps. Each mark is a Blue 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-blue-50: #F3F8FF;
--color-blue-100: #E7F1FF;
--color-blue-200: #D4E5FF;
--color-blue-300: #B9D4FF;
--color-blue-400: #94BDFE;
--color-blue-500: #3B82F6;
--color-blue-600: #2E69C9;
--color-blue-700: #214E98;
--color-blue-800: #0F2C5A;
--color-blue-900: #030F27;
--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: {
'blue': {
50: '#F3F8FF',
100: '#E7F1FF',
200: '#D4E5FF',
300: '#B9D4FF',
400: '#94BDFE',
500: '#3B82F6',
600: '#2E69C9',
700: '#214E98',
800: '#0F2C5A',
900: '#030F27',
},
'amber': {
50: '#FFFAF3',
100: '#FEF4E8',
200: '#FDEBD5',
300: '#FBDFB9',
400: '#F9CD93',
500: '#F0A202',
600: '#C48401',
700: '#956301',
800: '#573800',
900: '#261600',
},
},
},
},
};
CSS variables
:root {
--blue-50: #F3F8FF;
--blue-100: #E7F1FF;
--blue-200: #D4E5FF;
--blue-300: #B9D4FF;
--blue-400: #94BDFE;
--blue-500: #3B82F6;
--blue-600: #2E69C9;
--blue-700: #214E98;
--blue-800: #0F2C5A;
--blue-900: #030F27;
--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
$blue-50: #F3F8FF; $blue-100: #E7F1FF; $blue-200: #D4E5FF; $blue-300: #B9D4FF; $blue-400: #94BDFE; $blue-500: #3B82F6; $blue-600: #2E69C9; $blue-700: #214E98; $blue-800: #0F2C5A; $blue-900: #030F27; $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
{
"blue": {
"50": "#F3F8FF",
"100": "#E7F1FF",
"200": "#D4E5FF",
"300": "#B9D4FF",
"400": "#94BDFE",
"500": "#3B82F6",
"600": "#2E69C9",
"700": "#214E98",
"800": "#0F2C5A",
"900": "#030F27"
},
"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, Blue 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.