Hypercolor

87 named Tailwind gradients plus mesh, grainy and world-flag generators

Tier B · UsefulColor ToolGeneratorGalleryhypercolor.dev

Hypercolor is an open-source gallery of 87 named gradients (Hyper, Oceanic, Cotton Candy, Gotham, Sunset, Mojave, Borealis and so on) built entirely from Tailwind's own colour palette. Each gradient offers 26 directions — 8 linear, 9 conic, 9 radial — and copies out as Tailwind class names, plain CSS, or a saved image. Alongside the collection sit four generators: a custom gradient builder, a mesh gradient generator, a grainy gradient generator, and 38 country flags rendered purely in Tailwind classes. Built with Nuxt by Jordi Hales and Mark Mead, MIT-licensed.

For an agent

Watch the syntax version before you paste: the site is built on Tailwind 3.4.1 and emits bg-gradient-to-br, which Tailwind v4 renamed to bg-linear-to-br — translate the class or take the plain-CSS copy instead. Prefer the /grainy and /mesh generators over hand-rolling a noise overlay; they output the full class string including the SVG noise layer. For a hero or marketing section, pick a named gradient from the list rather than inventing colour stops, because every stop is a real Tailwind palette token and stays consistent with the rest of the theme.

Why it is here. The reference gradient collection for Tailwind projects — everything is expressed in palette tokens, so the output survives a theme change instead of hard-coding hex.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: Not applicable
Styling: Tailwind CSS v3, Tailwind CSS, Vanilla CSS
Distribution: Web app / online tool, Copy-paste snippet, GitHub repository
Platform: Web
Content type: Code, Images / textures / backgrounds
Agent readiness: Copy-paste ready code, Readable open source
Accessibility: Not applicable
Maturity: Stable
GitHub stars: 688

Components it ships

Gradient Background

Notable for

87 named gradients, all Tailwind palette colours
26 directions each: linear, conic, radial
grainy and mesh gradient generators
38 country flags in pure Tailwind
MIT, Nuxt, 688 stars

Provenance

Verified 2026-08-15. HTTP 200. https://hypercolor.dev/ (parsed 2.9 MB prerendered HTML, counted 87 gradient cards), https://hypercolor.dev/flags (counted 38 flags), /generator, /mesh, /grainy (all 200), https://github.com/jordihales/hypercolor. WebFetch truncated the homepage; counts come from raw HTML.

Also in Color

hypercolor.devTier B