Exporting

Export Formats

WebShades supports multiple export formats. Choose the one that fits your workflow:

• CSS Variables → For most web projects
• Tailwind Config → For Tailwind users
• JSON Tokens → For design systems & tooling
• SCSS Variables → For Sass projects
• Design Tokens (W3C) → For Figma & system tools

CSS Variables

CSS variables are the most common way to use WebShades palettes. They provide flexibility and enable theme switching.

Example Output

:root {
  --color-primary-50: 239 246 255;
  --color-primary-100: 219 234 254;
  --color-primary-500: 59 130 246;
  --color-primary-900: 30 58 138;
  --color-text-default: 15 23 42;
  --color-surface-50: 248 250 252;
  --color-border-default: 226 232 240;
}

.dark {
  --color-primary-50: 30 58 138;
  --color-primary-500: 59 130 246;
  --color-primary-900: 239 246 255;
  --color-text-default: 248 250 252;
  --color-surface-50: 15 23 42;
}

How to Use

• Copy the exported CSS and paste it into your main CSS file
• Use variables with rgb(): background: rgb(var(--color-primary-500)); or in Tailwind: bg-[rgb(var(--color-primary-500))]

Tailwind Config

Ready-to-use Tailwind configuration that integrates your palette directly into Tailwind's color system.

Example Output

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: 'rgb(var(--color-primary-50))',
          100: 'rgb(var(--color-primary-100))',
          500: 'rgb(var(--color-primary-500))',
          900: 'rgb(var(--color-primary-900))',
        },
        text: {
          default: 'rgb(var(--color-text-default))',
          muted: 'rgb(var(--color-text-muted))',
        },
        surface: {
          50: 'rgb(var(--color-surface-50))',
          100: 'rgb(var(--color-surface-100))',
        },
      },
    },
  },
}

How to Use

• Merge the exported colors into your tailwind.config.js theme.extend.colors object
• Make sure you've also included the CSS variables export in your CSS file
• Restart your development server

Once configured, use semantic roles directly: bg-primary-500, text-text-default, bg-surface-100, border-border-default

JSON & Design Tokens

Structured JSON export perfect for design systems, design tools, and programmatic use. Also available in W3C Design Tokens format for Figma and Sketch integration.

Example Output

{
  "scales": {
    "primary": {
      "50": "239 246 255",
      "100": "219 234 254",
      "500": "59 130 246",
      "900": "30 58 138"
    }
  },
  "semantic": {
    "light": {
      "text": {
        "default": "15 23 42",
        "muted": "100 116 139"
      },
      "surface": {
        "50": "248 250 252",
        "100": "241 245 249"
      }
    },
    "dark": {
      "text": {
        "default": "248 250 252",
        "muted": "148 163 184"
      },
      "surface": {
        "50": "15 23 42",
        "100": "30 41 59"
      }
    }
  },
  "metadata": {
    "controlColor": "#3b82f6",
    "generatedAt": "2024-01-15T10:30:00Z"
  }
}

When to Choose

Use JSON exports when you need structured data for design systems, build tools, or integration with design tools like Figma and Sketch.

How Exports Are Structured

WebShades exports include two types of tokens:

Use semantic tokens in components so you don't have to change colors later. If you need to adjust your text color, change --color-text-default rather than hunting through all the places you used --color-primary-900.