Purple and Pink color palette
Beauty brands, music streaming apps, and Gen Z fashion labels reach for this pairing constantly, and the Tailwind defaults are a big reason why. Purple #A855F7 and Pink #EC4899 are both pulled straight from the Tailwind 500 row, so dropping them into a project takes one class name each.
The two sit only 50 degrees apart on the color wheel, and their OKLCH lightness values are almost identical (0.627 and 0.656). That closeness is why the text needs to stay readable">WCAG contrast between them measures just 1.12 to 1. Do not stack pink text on purple or the other way around, it will not be readable. Instead, treat them as a tonal duo: run them as a gradient, where they melt through a vivid mid-tone pink-purple (#CA55C9), or use one as a background and the other as an accent shape rather than text.
For buttons, headings, and CTAs, pair both against white or a near-black for the actual contrast work.
See Purple and Pink in use
better
Purple Tailwind scale (50-900)
Pink Tailwind scale (50-900)
Purple to Pink blend
A continuous interpolation from Purple to Pink, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Purple and Pink 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 Purple text on Pink (or the reverse) for body copy. For readable text, pair a dark scale step such as purple-800 or pink-900 with a light one like pink-50.
Contrast pairing grid
Rows are Purple steps, columns are Pink steps. Each mark is a Purple step shown on a Pink 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-purple-50: #F9F6FF;
--color-purple-100: #F4ECFF;
--color-purple-200: #EBDCFF;
--color-purple-300: #DEC6FF;
--color-purple-400: #CEA7FF;
--color-purple-500: #A855F7;
--color-purple-600: #8944CA;
--color-purple-700: #673199;
--color-purple-800: #3B1A5A;
--color-purple-900: #170727;
--color-pink-50: #FFF5F9;
--color-pink-100: #FFEBF2;
--color-pink-200: #FFDAE8;
--color-pink-300: #FFC2D9;
--color-pink-400: #FCA1C6;
--color-pink-500: #EC4899;
--color-pink-600: #C1397C;
--color-pink-700: #92295D;
--color-pink-800: #561435;
--color-pink-900: #250514;
}
Tailwind v3 — tailwind.config.js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'purple': {
50: '#F9F6FF',
100: '#F4ECFF',
200: '#EBDCFF',
300: '#DEC6FF',
400: '#CEA7FF',
500: '#A855F7',
600: '#8944CA',
700: '#673199',
800: '#3B1A5A',
900: '#170727',
},
'pink': {
50: '#FFF5F9',
100: '#FFEBF2',
200: '#FFDAE8',
300: '#FFC2D9',
400: '#FCA1C6',
500: '#EC4899',
600: '#C1397C',
700: '#92295D',
800: '#561435',
900: '#250514',
},
},
},
},
};
CSS variables
:root {
--purple-50: #F9F6FF;
--purple-100: #F4ECFF;
--purple-200: #EBDCFF;
--purple-300: #DEC6FF;
--purple-400: #CEA7FF;
--purple-500: #A855F7;
--purple-600: #8944CA;
--purple-700: #673199;
--purple-800: #3B1A5A;
--purple-900: #170727;
--pink-50: #FFF5F9;
--pink-100: #FFEBF2;
--pink-200: #FFDAE8;
--pink-300: #FFC2D9;
--pink-400: #FCA1C6;
--pink-500: #EC4899;
--pink-600: #C1397C;
--pink-700: #92295D;
--pink-800: #561435;
--pink-900: #250514;
}SCSS variables
$purple-50: #F9F6FF; $purple-100: #F4ECFF; $purple-200: #EBDCFF; $purple-300: #DEC6FF; $purple-400: #CEA7FF; $purple-500: #A855F7; $purple-600: #8944CA; $purple-700: #673199; $purple-800: #3B1A5A; $purple-900: #170727; $pink-50: #FFF5F9; $pink-100: #FFEBF2; $pink-200: #FFDAE8; $pink-300: #FFC2D9; $pink-400: #FCA1C6; $pink-500: #EC4899; $pink-600: #C1397C; $pink-700: #92295D; $pink-800: #561435; $pink-900: #250514;
JSON tokens
{
"purple": {
"50": "#F9F6FF",
"100": "#F4ECFF",
"200": "#EBDCFF",
"300": "#DEC6FF",
"400": "#CEA7FF",
"500": "#A855F7",
"600": "#8944CA",
"700": "#673199",
"800": "#3B1A5A",
"900": "#170727"
},
"pink": {
"50": "#FFF5F9",
"100": "#FFEBF2",
"200": "#FFDAE8",
"300": "#FFC2D9",
"400": "#FCA1C6",
"500": "#EC4899",
"600": "#C1397C",
"700": "#92295D",
"800": "#561435",
"900": "#250514"
}
}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, Purple and Pink); 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.