How to Export a Color Palette to CSS

Updated

To export a color palette to CSS means converting a set of hex or RGB swatches into reusable stylesheet declarations—most commonly CSS custom properties on the :root selector—that components reference via var(--token-name) instead of hardcoded color literals scattered through markup and JavaScript.

Why CSS Custom Properties Beat Inline Hex

Hardcoding #2563eb across dozens of components creates drift the moment brand refreshes a single accent. CSS custom properties centralize palette values in one authoritative block. Changing --color-primary propagates everywhere that variable is referenced—including pseudo-elements, media queries, and nested component scopes.

Custom properties also unlock runtime theming. Toggle a data-theme="dark" attribute on <html> and swap an entire palette without recompiling Sass or rebuilding Tailwind. This pattern aligns with modern design-system architecture documented in the design tokens from image workflow.

Step 1 — Extract Swatches From Your Reference

Start at the PhotoTones generator with a JPG, PNG, or WebP reference image. Vibrant.js identifies up to six perceptual swatches in under 1 second—all processing runs locally in your browser. Assign semantic names mentally (primary, surface, accent, muted) before export so generated variable names map to real UI roles.

For extended ramps, PhotoTones Pro extracts 8, 10, or 12 colors using ColorThief k-means supplementation—useful when you need separate hover, active, and disabled states without manual HSL nudging.

Step 2 — Generate the CSS Output

PhotoTones Pro includes a one-click CSS Custom Properties export from the Export Palette menu. The downloaded file contains a :root block structured like this:

:root {
  --palette-vibrant: #2563eb;
  --palette-dark-vibrant: #1d4ed8;
  --palette-light-vibrant: #eff6ff;
  --palette-muted: #64748b;
  --palette-dark-muted: #0f172a;
  --palette-light-muted: #f1f5f9;
}

Rename tokens to match your design-system vocabulary (--color-primary-500, --surface-elevated) before committing. PhotoTones uses Vibrant.js swatch names as defaults; your semantic layer sits on top.

Step 3 — Integrate Into Your Project

Import the generated file at the top of your global stylesheet or load it as a separate tokens.css module. Reference variables in component CSS:

.button-primary {
  background-color: var(--palette-vibrant);
  color: var(--palette-light-muted);
}

.card {
  background-color: var(--palette-light-muted);
  border: 1px solid var(--palette-muted);
}

For Sass-based codebases, PhotoTones Pro also exports SCSS variables ($palette-vibrant: #2563eb;) that compile at build time. Choose custom properties when you need runtime switching; choose SCSS when your pipeline predates native CSS variables.

Dark Mode and Theme Variants

Duplicate your palette block under a dark-theme selector. Sample shadow regions from nighttime photography—or darken extracted swatches by reducing lightness while preserving hue—to populate [data-theme="dark"] overrides. PhotoTones Pro's light/dark theme CSS export automates this pairing from a single source image.

Verify contrast after theme swaps. Saturated photo accents that pass WCAG on light backgrounds may fail on dark surfaces—run the contrast grid in PhotoTones Pro or consult our WCAG palette guide.

Bridging CSS Variables to Design Tokens

Enterprise teams often store canonical colors in W3C design-token JSON before generating CSS. PhotoTones Pro exports W3C tokens, Style Dictionary JSON, and Tokens Studio formats alongside raw CSS—keeping Figma variables, Storybook decorators, and production stylesheets synchronized on identical hex values.

When pairing with Tailwind, either extend theme.colors with your exported hex map or use the dedicated Tailwind config export. See how to extract colors for Tailwind CSS for the full integration path.

Manual Export on the Free Tier

Free PhotoTones users copy hex, RGB, or HSL values via the bulk-copy buttons and paste them into a hand-authored CSS block. This works for quick prototypes but lacks the naming consistency and multi-format bundles Pro provides. For production design systems shipping multiple surfaces, the $7/month Pro subscription pays for itself in reduced handoff friction.

Export your palette to CSS

Extract colors free; Pro unlocks CSS, SCSS, and design-token exports.

Open the Color Palette from Image Generator

FAQ

What is the best way to export a color palette to CSS?

Extract hex codes from your reference image in PhotoTones, then export CSS custom properties via PhotoTones Pro. The output is a :root block with --palette-{name} variables ready to paste into your stylesheet or design-token pipeline.

Should I use CSS custom properties or SCSS variables for palettes?

CSS custom properties enable runtime theming and dark-mode toggles without recompiling. SCSS variables suit build-time palettes in legacy Sass projects. PhotoTones Pro exports both formats from the same extracted swatches.

Can I export a palette to CSS for free?

PhotoTones free tier lets you copy all hex, RGB, and HSL values manually into a CSS file. One-click CSS custom property export, SCSS variables, and W3C design tokens require PhotoTones Pro at $7/month.

How do CSS variables from a photo palette integrate with Tailwind?

Map exported CSS custom properties to Tailwind theme extensions, or use PhotoTones Pro's direct Tailwind config and Tailwind v4 @theme exports. See the Tailwind extraction guide for a full workflow.

Related Guides