Violet and Amber color palette
orange · 0.027
Creative tech brands and design tools lean on this combination when they want energy without going neon. Violet (#7F3FBF) is a deep cool purple that reads as premium, while amber (#F0A202) brings a warm honey-yellow glow that feels approachable and active.
The two sit 131 degrees apart, so they push against each other on the wheel, but their similar mid-range vibrancy keeps the pair balanced rather than jarring. measures 2.93 to 1, which is too low for body text on either color. Use amber for highlights, badges, and call-to-action buttons against violet surfaces, and keep type in white or near-black.
In a Tailwind setup, the lighter 50-200 steps work as tinted backgrounds, with the 700-900 steps reserved for text and borders.
See Violet and Amber in use
better
Violet Tailwind scale (50-900)
Amber Tailwind scale (50-900)
Violet to Amber blend
A continuous interpolation from Violet to Amber, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Violet 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 Violet text on Amber (or the reverse) for body copy. For readable text, pair a dark scale step such as violet-800 or amber-900 with a light one like amber-50.
Contrast pairing grid
Rows are Violet steps, columns are Amber steps. Each mark is a Violet 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-violet-50: #F7F4FC;
--color-violet-100: #EFE8F9;
--color-violet-200: #E1D5F3;
--color-violet-300: #CFBBEB;
--color-violet-400: #B698DF;
--color-violet-500: #7F3FBF;
--color-violet-600: #67329C;
--color-violet-700: #4C2375;
--color-violet-800: #2A1144;
--color-violet-900: #0F041C;
--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: {
'violet': {
50: '#F7F4FC',
100: '#EFE8F9',
200: '#E1D5F3',
300: '#CFBBEB',
400: '#B698DF',
500: '#7F3FBF',
600: '#67329C',
700: '#4C2375',
800: '#2A1144',
900: '#0F041C',
},
'amber': {
50: '#FFFAF3',
100: '#FEF4E8',
200: '#FDEBD5',
300: '#FBDFB9',
400: '#F9CD93',
500: '#F0A202',
600: '#C48401',
700: '#956301',
800: '#573800',
900: '#261600',
},
},
},
},
};
CSS variables
:root {
--violet-50: #F7F4FC;
--violet-100: #EFE8F9;
--violet-200: #E1D5F3;
--violet-300: #CFBBEB;
--violet-400: #B698DF;
--violet-500: #7F3FBF;
--violet-600: #67329C;
--violet-700: #4C2375;
--violet-800: #2A1144;
--violet-900: #0F041C;
--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
$violet-50: #F7F4FC; $violet-100: #EFE8F9; $violet-200: #E1D5F3; $violet-300: #CFBBEB; $violet-400: #B698DF; $violet-500: #7F3FBF; $violet-600: #67329C; $violet-700: #4C2375; $violet-800: #2A1144; $violet-900: #0F041C; $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
{
"violet": {
"50": "#F7F4FC",
"100": "#EFE8F9",
"200": "#E1D5F3",
"300": "#CFBBEB",
"400": "#B698DF",
"500": "#7F3FBF",
"600": "#67329C",
"700": "#4C2375",
"800": "#2A1144",
"900": "#0F041C"
},
"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, Violet 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.