Design preview
Color details
01Primary
ContrastAa 8.5Aa 2.5
02Secondary
ContrastAa 6.6Aa 3.2
03Accent
ContrastAa 6.0Aa 3.5
04Background
ContrastAa 3.8Aa 5.6
Use this palette
CSS variables
:root {
--berry-blend-1: #8B008B;
--berry-blend-2: #9400D3;
--berry-blend-3: #8A2BE2;
--berry-blend-4: #9370DB;
}Tailwind colors
module.exports = {
theme: {
extend: {
colors: {
'berry-blend': {
100: '#8B008B',
200: '#9400D3',
300: '#8A2BE2',
400: '#9370DB',
},
},
},
},
};Accessible color pairs
Text and background combinations from this palette that meet WCAG AA (4.5:1) for normal text.
No pair in this palette reaches 4.5:1. Use black or white text for body copy.
Named colors in this palette
The closest CSS named color to each swatch.