Bold
Fireworks color palette
Bright colors on night blue, like a summer fireworks show.
Open in the palette generatorLock colors, roll new variations with the space bar and export as image or code.
Colors
Click a value to copy it. Each swatch shows its value in the text color that reads best on it.
Color 1
Text in white, contrast 16.5:1
Color 2
Text in black, contrast 5.4:1
Color 3
Text in black, contrast 13.6:1
Color 4
Text in black, contrast 8.8:1
Color 5
Text in white, contrast 4.7:1
Code
The palette as CSS variables for any project and as a theme for Tailwind CSS v4.
CSS variables
:root {
--palette-1: #1b1c36;
--palette-2: #ee2e9b;
--palette-3: #f9cc21;
--palette-4: #17bac8;
--palette-5: #a245d9;
}
Tailwind theme
@theme {
--color-fireworks-1: oklch(24% 0.049 280.3);
--color-fireworks-2: oklch(64% 0.239 352);
--color-fireworks-3: oklch(86% 0.17 92);
--color-fireworks-4: oklch(72.1% 0.12 204.6);
--color-fireworks-5: oklch(58.1% 0.221 310);
}
Gradients from this palette
The same colors as a gradient. Each card opens the editor with these colors.
Keep working with the palette
Edit the palette or build a full scale from its most colorful entry.
How to use this palette
Use the lightest color as the background and the darkest for text. The strong colors in between work for buttons, links and highlights. Always check the contrast for text; the notes on the swatches show whether black or white reads better.
Similar palettes
All color palettesPop Art
Yellow, red and blue with black and white, loud and graphic.
Street Party
Mango, pink, violet and turquoise against a dark ground.
Signal
White, yellow, red and blue with clear contrast, good for notices and warnings.
Hummingbird
Emerald, petrol, magenta and orange, iridescent like feathers.
Workshop
Paper white, mustard, brick red, workwear blue and black.
Night Train
Deep blues and the warm light of a compartment window.