Developer Tool

UI Color System Generator

Pick a color from the bar below and watch it apply live across real buttons, forms, links, badges, nav and more — so you know exactly how it'll look before you ship it.

Live Preview

Live Component Previews

See how your palette looks on real UI components

8 component types

Primary Buttons

Default

Hover State

Active State

Disabled State

Secondary & Outline

Secondary

Outline

Ghost

Icon Button

More tools you might like

CSS Gradient Generator

Build linear, radial, and conic gradients with unlimited color stops, live preview on real UI components, and export as CSS or Tailwind - no signup required.

SEO Meta Tag Generator

Generate SEO meta tags, Open Graph tags, and Twitter Card tags with a live Google, Facebook, and X preview. Export as HTML or Next.js Metadata.

Typography Playground

Create professional type systems with perfect scales and font pairings. Preview on components and export to Tailwind, CSS, or Figma.