Night Owl color palette
Built for people who work past midnight. #1A1035 is a deep indigo-violet, close to black, and the shades climb through #2E1B6B and #4B2FA8 to a medium violet and a soft periwinkle, #B09EF0. Everything shares one blue-violet hue, so screens stay calm and easy on tired eyes. Code editor themes and reading apps are its home turf.
Night Owl palette in use
Body text in #B09EF0 reads well on a #1A1035 background, with #2E1B6B for panels. #7B5FDB makes the button color, and #4B2FA8 suits selected rows and borders.
This pair measures 7.69:1, so it works for body text too. The button uses #7B5FDB with white text.
ButtonGood for
- Code editor theme
- Reading app night mode
- Meditation app
- Bedtime story app
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 |
|---|---|---|---|
#1A1035 | #B09EF0 | 7.69:1 | AAA |
#2E1B6B | #B09EF0 | 6.05:1 | AA |
#4B2FA8 | #B09EF0 | 3.96:1 | AA large |
#1A1035 | #7B5FDB | 3.84:1 | AA large |
#2E1B6B | #7B5FDB | 3.03:1 | AA large |
Night Owl palette as code
CSS variables
:root {
--night-owl-1: #1A1035;
--night-owl-2: #2E1B6B;
--night-owl-3: #4B2FA8;
--night-owl-4: #7B5FDB;
--night-owl-5: #B09EF0;
}Tailwind v4
@theme {
--color-night-owl-1: #1A1035;
--color-night-owl-2: #2E1B6B;
--color-night-owl-3: #4B2FA8;
--color-night-owl-4: #7B5FDB;
--color-night-owl-5: #B09EF0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'night-owl': {
100: '#1A1035',
200: '#2E1B6B',
300: '#4B2FA8',
400: '#7B5FDB',
500: '#B09EF0',
},SCSS
$night-owl-1: #1A1035;
$night-owl-2: #2E1B6B;
$night-owl-3: #4B2FA8;
$night-owl-4: #7B5FDB;
$night-owl-5: #B09EF0;JSON
["#1A1035","#2E1B6B","#4B2FA8","#7B5FDB","#B09EF0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.