Firework Haze themePro
Firework Haze: a balanced mono palette around hue 337, bordered surfaces, sharp corners, default density, standard contrast. cool, minimal. A fuchsia theme. Radius 0.25rem.
Live preview
Install
The CLI writes these variables into your global stylesheet. Every component reads them, so the whole app changes at once.
Firework Haze is a Pro theme pack
Preview it freely. The CSS, Tailwind file, design tokens and the CLI install come with a tealmac UI Pro licence.
Export the tokens
The same theme as Tailwind v4 CSS, plain CSS variables, SCSS, JavaScript, TypeScript, DTCG design tokens, Figma variables and starter files for Swift, Android, Jetpack Compose and Flutter.
Exports of a Pro theme need an active licence.
Contrast report
This theme passes every theme gate: text contrast (WCAG 2.2 AA), chart colours that stay apart, and matching light and dark modes.
| Pair | Ratio | Result |
|---|---|---|
| Text on background | 13.33:1 / 4.5:1 | Pass |
| Text on cards | 13.89:1 / 4.5:1 | Pass |
| Popover text | 13.89:1 / 4.5:1 | Pass |
| Muted text on muted | 5.49:1 / 4.5:1 | Pass |
| Muted text on background | 6.12:1 / 4.5:1 | Pass |
| Primary button text | 4.85:1 / 4.5:1 | Pass |
| Secondary button text | 11.57:1 / 4.5:1 | Pass |
| Accent label | 11.29:1 / 4.5:1 | Pass |
| Sidebar text | 12.71:1 / 4.5:1 | Pass |
| Sidebar active item | 4.85:1 / 4.5:1 | Pass |
| Sidebar hover item | 11.29:1 / 4.5:1 | Pass |
| Primary on background | 4.61:1 / 3:1 | Pass |
| Focus ring on background | 4.03:1 / 3:1 | Pass |
| Destructive on background | 4.62:1 / 4.5:1 | Pass |
| Destructive on cards | 4.81:1 / 4.5:1 | Pass |
| Pair | Ratio | Result |
|---|---|---|
| Text on background | 15.5:1 / 4.5:1 | Pass |
| Text on cards | 14.35:1 / 4.5:1 | Pass |
| Popover text | 13.68:1 / 4.5:1 | Pass |
| Muted text on muted | 7.03:1 / 4.5:1 | Pass |
| Muted text on background | 7.66:1 / 4.5:1 | Pass |
| Primary button text | 6.37:1 / 4.5:1 | Pass |
| Secondary button text | 13.81:1 / 4.5:1 | Pass |
| Accent label | 13.61:1 / 4.5:1 | Pass |
| Sidebar text | 14.91:1 / 4.5:1 | Pass |
| Sidebar active item | 6.37:1 / 4.5:1 | Pass |
| Sidebar hover item | 13.61:1 / 4.5:1 | Pass |
| Primary on background | 6.45:1 / 3:1 | Pass |
| Focus ring on background | 5.78:1 / 3:1 | Pass |
| Destructive on background | 6.58:1 / 4.5:1 | Pass |
| Destructive on cards | 6.09:1 / 4.5:1 | Pass |
Similar themes
The closest themes by colour, measured in OKLab across the key tokens in light and dark.