Generating CSS Variables from Image Palettes

CSS Variables from Image Palettes

CSS custom properties (variables) are the modern standard for managing colors in web projects. By extracting a palette from an image and exporting it as CSS variables, you get production-ready code that integrates directly into your stylesheet.

Generating the Variables

The palette extractor produces a :root block with numbered variables:

:root {
  --color-1: #2c5f7c; /* 32.4% - dominant */
  --color-2: #e8c9a0; /* 24.1% - secondary */
  --color-3: #1a3a4f; /* 18.7% - dark accent */
  --color-4: #d4956b; /* 12.3% - warm accent */
  --color-5: #8fb4cc; /* 8.2% - light accent */
  --color-6: #f5f0e8; /* 4.3% - highlight */
}

Semantic Naming Conventions

For production use, rename the generic numbered variables to semantic names:

:root {
  /* Primary brand colors */
  --color-primary: #2c5f7c;
  --color-primary-light: #8fb4cc;
  --color-primary-dark: #1a3a4f;

  /* Accent and supporting */
  --color-accent: #d4956b;
  --color-surface: #e8c9a0;
  --color-highlight: #f5f0e8;

  /* Semantic assignments */
  --color-background: var(--color-highlight);
  --color-text: var(--color-primary-dark);
  --color-link: var(--color-primary);
  --color-cta: var(--color-accent);
}

Dark Mode Variants

Generate dark mode colors by adjusting the extracted palette:

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1a1a2e;
    --color-text: #e8c9a0;
    --color-surface: #2c2c44;
    --color-link: #8fb4cc;
    --color-cta: #d4956b;
  }
}

Integration Patterns

Direct usage:

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

With opacity modifiers:

.overlay {
  background-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}

Component-level tokens:

.card {
  --card-bg: var(--color-surface);
  --card-border: color-mix(in srgb, var(--color-primary) 20%, transparent);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

Best Practices

1. Always include the distribution percentage as a comment — it guides which colors to use where
2. Test contrast ratios between text and background variable pairs
3. Create both light and dark mode mappings from the same base palette
4. Use CSS color-mix() for opacity variations instead of adding more variables
5. Document which image the palette was extracted from for future reference