01 — The problem

Every Next.js tutorial uses the same colors

Your app deserves its own identity. But you start with Vercel's default theme or Tailwind's stock palette, and somehow it stays that way. Hex values end up scattered across components. className="text-[#2D1B69]" in one file, a different shade in another. No system. Just vibes.

02 — The fix

CSS tokens in globals.css. Or Tailwind if that's your thing.

Export CSS custom properties from Paletter. Add to globals.css. Every component references the same tokens. Or export a Tailwind @theme block if you're using Tailwind. Either way: one source, every component, zero drift.

03 — Setup

Three steps. Both routers.

Generate

Upload a cover image or build from color theory. Paletter extracts five curated colors with assigned roles.

Export

Hit the Export tab. Choose "CSS Variables" for vanilla CSS or "Tailwind v4" for Tailwind projects.

Paste

Add to app/globals.css (App Router) or styles/globals.css (Pages Router). Reference with var(--color-*) or Tailwind utilities.

04 — Two paths

Pick your approach

CSS custom properties

For CSS Modules users. Paste variables into app/globals.css. Reference with var(--color-background) in any module. Works with App Router and Pages Router.

Tailwind v4 @theme

For Tailwind users. Paste the @theme block into your CSS. Use bg-background, text-ink, border-accent. No tailwind.config.js needed in v4.

05 — The export format

What goes in globals.css

:root {
  --color-background: #F5DBC1;
  --color-ink: #583819;
  --color-accent: #FC6911;
  --color-support: #9A7658;
  --color-neutral: #D9B89D;
}

Use var(--color-background) in CSS Modules, inline styles, or styled-components. Or export the Tailwind version and use bg-background, text-ink as utility classes.

06 — Why it works

Built for how Next.js actually works

App Router ready

CSS custom properties work in Server Components and Client Components. No "use client" needed for colors.

Pages Router compatible

Same globals.css approach works in _app.tsx. Your palette is available across every page.

CSS Modules friendly

Custom properties pierce module scope by default. Define once in globals.css, use in any .module.css file.

Zero runtime cost

CSS custom properties are resolved by the browser. No JavaScript bundle increase. No theme provider wrapper.

Generate your Next.js palette

Color tokens that work with both routers. CSS vars or Tailwind. Your call.

Generate a palette View all integrations