01 — The problem

Fast site. Rushed colors.

Astro sites are fast and content-focused. The performance is dialed. The Lighthouse score is perfect. But the colors? Grabbed from a random generator at 2am. Or worse — the defaults from whatever template you started with.

Your content deserves a color system that was actually designed. Not inherited.

02 — The fix

Export once. Use everywhere.

Export CSS custom properties or a Tailwind config from Paletter. Add to your global stylesheet. Every Astro component, every island, every layout — same tokens. Whether you use React, Svelte, Vue, or plain Astro components, the colors come from one place.

03 — Setup

Three steps. Any integration.

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.

Add

Paste into src/styles/global.css and import in your layout. Or add the @theme block to your Tailwind CSS file.

04 — Two paths

Pick your approach

Vanilla CSS

For non-Tailwind Astro projects. Paste :root variables into src/styles/global.css. Reference with var(--color-*) in any component or layout.

Tailwind v4 @theme

For Astro + Tailwind projects. Paste the @theme block into your CSS. bg-background, text-ink, border-accent — all generated automatically.

05 — The export format

What goes in global.css

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

Import this stylesheet in your base layout. Every page, every component, every island gets the same tokens. Use var(--color-accent) in an Astro component and var(--color-ink) in a React island. Same values. Same source.

06 — Built for Astro

Colors that match how Astro works

Framework agnostic

CSS custom properties work in Astro components, React islands, Svelte islands, Vue islands. One palette, every framework.

Zero JavaScript

Colors are pure CSS. No runtime. No hydration. No bundle size. Exactly what Astro is built for.

Content collection ready

Style your blog posts, docs, and landing pages with the same tokens. Consistent branding across every content type.

Island compatible

Interactive islands inherit the same CSS variables as static content. No prop drilling colors through component boundaries.

Generate your Astro palette

CSS tokens or Tailwind @theme. Works with every island framework. Zero runtime.

Generate a palette View all integrations