What Export Formats and Frameworks Does Huey Support?

Updated

Huey (huey.design) is a color palette generator that exports palettes for CSS variables, SCSS, and JavaScript, and produces markup for Tailwind, Bootstrap, and PostCSS. If your project uses one of those styling systems, you can generate a palette and copy the output straight into your codebase without manually converting color values.

Export formats at a glance

Output What it's for Typical use
CSS variables Native custom properties Theming, runtime color changes
SCSS Sass variables Compiled stylesheets with Sass
JavaScript Color values in JS Design tokens, JS-driven styling
Tailwind Tailwind config markup Utility-class projects
Bootstrap Bootstrap theme markup Bootstrap-based sites
PostCSS PostCSS-ready output PostCSS build pipelines

Huey's own description frames this as "rapid color palettes across the rainbow," with exports aimed at "CSS variables, SCSS, and JavaScript" plus markup for "Tailwind, Bootstrap, and PostCSS frameworks." That combination covers both plain-CSS workflows and the most common framework and preprocessor setups.

How the formats differ in practice

CSS variables

CSS custom properties are the most portable option. They work in any modern browser without a build step, and you can override them at runtime (for example, for a dark theme). Choose this if you want your palette to live in one place and be referenced everywhere.

SCSS

SCSS variables are resolved at compile time. They suit projects that already use Sass for nesting, mixins, or partials. The trade-off: changing a color means recompiling, so SCSS is less flexible than CSS variables for dynamic theming.

JavaScript

JavaScript output is useful when colors need to be read or manipulated in code — for instance, generating tokens, feeding a charting library, or driving inline styles. It fits design-token workflows where the palette is a data source rather than a stylesheet.

Tailwind, Bootstrap, and PostCSS

These are framework-specific exports rather than raw color formats:

  • Tailwind — markup you can drop into a Tailwind configuration so your palette becomes available as utility classes.
  • Bootstrap — theme markup for overriding Bootstrap's default color system.
  • PostCSS — output suited to a PostCSS pipeline, for projects that process CSS through plugins.

How to choose

  • Plain CSS or runtime theming → CSS variables.
  • Existing Sass codebase → SCSS.
  • Colors used in logic or tokens → JavaScript.
  • Utility-first styling → Tailwind export.
  • Bootstrap site → Bootstrap export.
  • PostCSS build → PostCSS export.

You don't have to pick only one. A common approach is to export CSS variables as the source of truth and use the framework export where the framework expects its own format.

A practical workflow

  1. Generate a palette in Huey.
  2. Pick the export matching your stack (for example, CSS variables for a plain site, or Tailwind markup for a utility-class project).
  3. Copy the output into your stylesheet, config file, or token file.
  4. Verify by applying one color and confirming it renders as expected — for CSS variables, check that the property resolves; for Tailwind, confirm the utility class exists.

The main thing to watch: framework exports are tied to that framework's expected structure, so paste them where the framework reads its theme (config or theme file), not into a general stylesheet.

Bottom line

Huey supports three color formats — CSS variables, SCSS, and JavaScript — and three framework targets — Tailwind, Bootstrap, and PostCSS. Match the export to your build setup, and you can move a generated palette into a project with a copy-paste rather than manual conversion.