Export website colors as CSS, Tailwind or DTCG design tokens

Choose an export for the next person or tool in the workflow. A stylesheet, a token pipeline and an editable backup need different information.

Reviewed 7 October 2026 · 4 min read

Choose by what happens next

For a website, start with CSS

The CSS export keeps your original brand in --color-brand. Applied roles such as --color-primary may differ to meet the selected contrast target. Its default follows the operating system’s preferred theme; setting data-theme="light" or data-theme="dark" on your HTML element makes that choice explicit. Read the paired-theme worked example for component styles.

The Tailwind v4 export keeps the same theme behavior and maps the roles through @theme inline. Append it to the stylesheet that imports Tailwind. Use utilities such as bg-background, text-text and border-border. These are v4 theme declarations, not a Tailwind v3 configuration file. See the official theme-variable documentation.

For a token pipeline, use structured colors

The studio’s DTCG export follows the 2025.10 color module: a color value carries a color space and numeric components, plus opacity and a hex fallback. Its sRGB components are encoded channel values divided by 255. They are not the linear-light values used in contrast calculations. For the original brand #6750A4, the actual exported token is:

{
  "$type": "color",
  "$description": "Original brand reference; interface roles may adapt for contrast.",
  "$value": {
    "colorSpace": "srgb",
    "components": [
      0.403921568627451,
      0.3137254901960784,
      0.6431372549019608
    ],
    "alpha": 1,
    "hex": "#6750A4"
  }
}

The file contains one original-brand token and twelve roles in each of the two themes: 25 color tokens. The optional eleven-step brand scale raises that to 36. Scale values are exploration colors; they are not extra audited component roles. Custom edits, including failing combinations, remain exactly as edited. A namespaced extension records the contrast target and failure count; use the separate report for the full pair evidence.

color.light and color.dark are ordinary groups. A consuming tool must map them to its own theme or variable-collection system. The file does not promise automatic Figma modes or a universal one-click import. DTCG is a published Community Group specification, not a W3C Recommendation. Its format module defines the interchange structure.

A tested Style Dictionary handoff

Save the export as color-system.tokens.json. In a project using Node.js 22 or later, install style-dictionary@5.6.0 as a development dependency. Save this as config.json, then run npx style-dictionary build --config config.json:

{
  "source": [
    "color-system.tokens.json"
  ],
  "usesDtcg": true,
  "platforms": {
    "css": {
      "transforms": [
        "name/kebab",
        "color/hex"
      ],
      "buildPath": "build/",
      "files": [
        {
          "destination": "tokens.css",
          "format": "css/variables"
        }
      ]
    }
  }
}

This produces build/tokens.css, with variables such as --color-brand, --color-light-background and --color-dark-background. Map the light or dark group into your component variables according to your application’s theme choice. If you only need automatic website theme switching, the studio’s direct CSS export already provides it.

Our integration check fed eight exported files into Style Dictionary 5.6.0, covering four starting colors with and without the scale. All 244 resulting color values matched the originals, including a deliberate role edit. That verifies this consumer and configuration; it does not certify every design application. Consult Style Dictionary’s configuration reference when adapting the build.

Keep a backup and the evidence

DTCG exports carry colors for other tools. They do not carry this editor’s complete history or lock/settings state. Save Project JSON to resume editing here; a share link also preserves the current project. Keep the contrast report alongside the handoff when another person needs to see exactly which values were checked.

Copy and download contain the same text. If a browser prevents a file download, use “Copy code” or select the visible export text and save it with the displayed format’s extension. Recheck your actual interface after adding opacity, gradients, different backgrounds or additional states.

Our examples use original palette values and the WCAG 2.2 calculation. Full methodology and primary sources.