How to Export Color Palettes to CSS and SCSS Variables

If you’re a web developer, designer, or anyone building modern websites, you know that consistent, maintainable color systems are essential. Manually typing HEX codes across your CSS files leads to errors, inconsistencies, and a maintenance nightmare.

The solution? CSS and SCSS variables. By defining your color palette once and reusing it throughout your project, you create a clean, scalable design system. But how do you go from a beautiful palette to properly exported variables?

In this comprehensive guide, you’ll learn exactly how to export color palettes to CSS and SCSS variables — step by step. We’ll cover:

• ✅ What CSS and SCSS variables are (and why they matter)
• ✅ How to generate a professional color palette
• ✅ How to export to :root CSS variables
• ✅ How to export to SCSS maps and variables
• ✅ Best tools for exporting (including Uniteez, Coolors, and more)
• ✅ How to integrate variables into your project
• ✅ Tips for naming, organizing, and maintaining your color system

Whether you’re using plain CSS, Sass, Tailwind, or a design system in Figma, this guide will help you streamline your workflow and build better, more consistent UIs.

What Are CSS and SCSS Variables?

Before we dive into exporting, let’s clarify what we mean by CSS and SCSS variables.

CSS Custom Properties (CSS Variables)

CSS variables, also known as custom properties, are defined using the -- prefix and accessed with the var() function. They are native to the browser and work in all modern browsers.

Example:

:root {
  --primary: #3b82f6;
  --secondary: #6b7280;
  --success: #10b981;
}

.button {
  background-color: var(--primary);
  color: white;
}

The :root selector makes variables globally available. This is the standard way to define design tokens in modern CSS.

SCSS Variables and Maps

SCSS (Sass) is a CSS preprocessor that adds powerful features like variables, nesting, and functions. SCSS variables use the $ symbol and are compiled into plain CSS.

Example:

$primary: #3b82f6;
$secondary: #6b7280;
$success: #10b981;

.button {
  background-color: $primary;
  color: white;
}

For more complex systems, SCSS supports maps — key-value collections perfect for color scales:

$colors: (
  "primary": #3b82f6,
  "secondary": #6b7280,
  "success": #10b981
);

.button {
  background-color: map-get($colors, "primary");
}

SCSS gives you more power, but requires a build step. CSS variables work natively but lack some advanced features.

Step 1: Generate Your Color Palette

Before you can export, you need a well-structured color palette. A professional palette typically includes:

• ✅ A base color (your primary brand color)
• ✅ Tints (base + white)
• ✅ Shades (base + black)
• ✅ Complementary (opposite on the color wheel)
• ✅ Neutral tones (grays, text, backgrounds)

You can generate this manually using HSL adjustments, or use a tool like:

• • Uniteez – Free color palette generator with CSS/SCSS export
• • Coolors – Professional color scheme designer
• • UI Colors – Tailwind-style 9-shade scales
• • Paletton – Advanced color theory and simulation

For this guide, we’ll use Uniteez — a fast, free tool that generates 6-color harmonious schemes from any base color.

Step 2: Export to CSS Variables

Once you’ve generated your palette, it’s time to export to CSS custom properties. Here’s how to do it in Uniteez:

1. Generate your palette using the color picker.
2. Click “Export” in the modal.
3. Select “CSS Variables” from the popup.
4. The tool will generate code like this:

:root {
  --palette-1: #3b82f6;
  --palette-2: #60a5fa;
  --palette-3: #1d4ed8;
  --palette-4: #a78bfa;
  --palette-5: #60a5fa;
  --palette-6: #1e40af;
}

You can then paste this into your styles.css or variables.css file.

Pro Tip: Rename generic names like --palette-1 to semantic ones like --primary, --primary-light, --primary-dark, etc.

Step 3: Export to SCSS Variables

If you’re using Sass, you can export your palette as SCSS variables or maps. In Uniteez:

1. Generate your palette.
2. Click “Export”.
3. Select “SCSS Map”.
4. You’ll get output like this:

$colors: (
  "base": #3b82f6,
  "light": #60a5fa,
  "dark": #1d4ed8,
  "complement": #a78bfa,
  "tint": #93c5fd,
  "shade": #1e40af
);

You can then use map-get($colors, "base") in your SCSS files, or define individual variables:

$primary: map-get($colors, "base");
$primary-light: map-get($colors, "light");
$primary-dark: map-get($colors, "dark");

Step 4: Integrate Into Your Project

Now that you’ve exported your variables, it’s time to use them in your project.

For CSS Projects

Save your variables in a file like variables.css and import it first:

/* variables.css */
:root {
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --primary-dark: #1d4ed8;
  --text: #111827;
  --background: #ffffff;
}

/* main.css */
@import 'variables.css';

body {
  background-color: var(--background);
  color: var(--text);
}

.button {
  background-color: var(--primary);
  color: white;
}

For SCSS Projects

Save your SCSS variables in _variables.scss and import into your main file:

// _variables.scss
$primary: #3b82f6;
$primary-light: #60a5fa;
$primary-dark: #1d4ed8;
$text: #111827;
$background: #ffffff;

// main.scss
@import 'variables';

body {
  background-color: $background;
  color: $text;
}

.button {
  background-color: $primary;
  color: white;
}

Best Practices for Naming & Organizing Variables

A well-named color system is easier to maintain and scale. Follow these best practices:

1. Use Semantic Names

❌ Avoid:

$blue: #3b82f6;

✅ Use:

$primary: #3b82f6;

2. Group by Purpose

Organize variables by role:

// Theme
$primary: #3b82f6;
$secondary: #6b7280;
$success: #10b981;
$warning: #f59e0b;
$danger: #ef4444;

// UI
$text: #111827;
$text-muted: #6b7280;
$border: #e5e7eb;
$background: #f9fafb;
$card-bg: #ffffff;

3. Use Prefixes for SCSS Maps

If using maps, group by type:

$color-primary: (
  "50":  #eff6ff,
  "100": #dbeafe,
  "200": #bfdbfe,
  "300": #93c5fd,
  "400": #60a5fa,
  "500": #3b82f6,
  "600": #2563eb,
  "700": #1d4ed8,
  "800": #1e40af,
  "900": #1e3a8a
);

Why This Workflow Matters

Exporting color palettes to CSS and SCSS variables isn’t just about convenience — it’s about building a professional, maintainable design system. Benefits include:

• ✅ Consistency: All components use the same color definitions.
• ✅ Efficiency: Change one variable to update your entire UI.
• ✅ Team Collaboration: Designers and developers share the same language.
• ✅ Scalability: Easy to extend for dark mode, themes, or branding updates.
• ✅ Accessibility: Easier to audit and adjust contrast ratios.

Tools like Uniteez make this workflow fast and accessible — no more guessing HEX codes or copying from Figma.