Ultraviolet color palette
Anyone who has built an Android app will recognize these purples: deep indigo #3700B3, electric violet #6200EE, a magenta-leaning #9C27B0, soft lilac #BB86FC and pale lavender #EDE7F6. The dark three are intense and the pale end is nearly white, so it's a full working set for both light and dark themes. Use it for an Android app theme or a startup landing page.
Ultraviolet palette in use
In light mode, use #EDE7F6 as the background, #3700B3 for text and #6200EE for buttons. In dark mode, #BB86FC takes over buttons and links, and #9C27B0 works as a secondary accent.
This pair measures 9.57:1, so it works for body text too. The button uses #6200EE with white text.
ButtonGood for
- Android app theme
- Startup landing page
- Gaming community site
- Music app interface
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#3700B3 | #EDE7F6 | 9.57:1 | AAA |
#6200EE | #EDE7F6 | 6.30:1 | AA |
#9C27B0 | #EDE7F6 | 5.21:1 | AA |
#3700B3 | #BB86FC | 4.37:1 | AA large |
Ultraviolet palette as code
CSS variables
:root {
--ultraviolet-1: #3700B3;
--ultraviolet-2: #6200EE;
--ultraviolet-3: #9C27B0;
--ultraviolet-4: #BB86FC;
--ultraviolet-5: #EDE7F6;
}Tailwind v4
@theme {
--color-ultraviolet-1: #3700B3;
--color-ultraviolet-2: #6200EE;
--color-ultraviolet-3: #9C27B0;
--color-ultraviolet-4: #BB86FC;
--color-ultraviolet-5: #EDE7F6;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'ultraviolet': {
100: '#3700B3',
200: '#6200EE',
300: '#9C27B0',
400: '#BB86FC',
500: '#EDE7F6',
},SCSS
$ultraviolet-1: #3700B3;
$ultraviolet-2: #6200EE;
$ultraviolet-3: #9C27B0;
$ultraviolet-4: #BB86FC;
$ultraviolet-5: #EDE7F6;JSON
["#3700B3","#6200EE","#9C27B0","#BB86FC","#EDE7F6"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.