Firefly color palette
A dark field on a June night with small lights blinking over it. Black #0A0A0A and dark moss #1A2F1A are the night, and pure green #00FF00, yellow-green #ADFF2F and a soft glowing yellow, #FFFF99, are the fireflies. The bright three look almost luminous against the darks. Night markets and outdoor summer concerts are made for it.
Firefly palette in use
#0A0A0A is the background and #1A2F1A the card color. #FFFF99 handles body text, #ADFF2F headings, and #00FF00 buttons and small glowing accents.
This pair measures 18.87:1, so it works for body text too. The button uses #00FF00 with black text.
ButtonGood for
- Summer night market
- Outdoor concert poster
- Nature app dark theme
- Glow product packaging
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 |
|---|---|---|---|
#0A0A0A | #FFFF99 | 18.87:1 | AAA |
#0A0A0A | #ADFF2F | 16.14:1 | AAA |
#0A0A0A | #00FF00 | 14.42:1 | AAA |
#1A2F1A | #FFFF99 | 13.65:1 | AAA |
#1A2F1A | #ADFF2F | 11.68:1 | AAA |
#1A2F1A | #00FF00 | 10.44:1 | AAA |
Firefly palette as code
CSS variables
:root {
--firefly-1: #0A0A0A;
--firefly-2: #1A2F1A;
--firefly-3: #00FF00;
--firefly-4: #ADFF2F;
--firefly-5: #FFFF99;
}Tailwind v4
@theme {
--color-firefly-1: #0A0A0A;
--color-firefly-2: #1A2F1A;
--color-firefly-3: #00FF00;
--color-firefly-4: #ADFF2F;
--color-firefly-5: #FFFF99;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'firefly': {
100: '#0A0A0A',
200: '#1A2F1A',
300: '#00FF00',
400: '#ADFF2F',
500: '#FFFF99',
},SCSS
$firefly-1: #0A0A0A;
$firefly-2: #1A2F1A;
$firefly-3: #00FF00;
$firefly-4: #ADFF2F;
$firefly-5: #FFFF99;JSON
["#0A0A0A","#1A2F1A","#00FF00","#ADFF2F","#FFFF99"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.