Export Snippets

Copy production-ready snippets for your project. Shareable via ?hex=.

Base

Selected

#3B82F6

CSS Variables

:root {
  --primary: #3B82F6;
  --primary-rgb: 59, 130, 246;
  --primary-hsl: 217 91% 60%;
}

Tailwind Config

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: "#3B82F6",
      },
    },
  },
};

JSON

{
  "primary": "#3B82F6",
  "primaryRgb": [59, 130, 246],
  "primaryHsl": {"h": 217, "s": 91, "l": 60}
}

SCSS Variables

$primary: #3B82F6;
$primary-rgb: 59, 130, 246;
$primary-hsl: 217 91% 60%;

Export colors into maintainable code

Exporting a color is not only about copying a HEX value. The goal is to create a stable source of truth so the same color can be reused in CSS, Tailwind config, JSON data, or SCSS without format drift.

Step 1

Pick the base color and copy the format that matches your project stack.

Step 2

Use CSS variables when the color will be consumed across plain CSS, components, and themes.

Step 3

Use JSON when a design token file or build step needs machine-readable color data.

Step 4

Paste snippets into a shared token layer instead of scattering raw HEX values across many components.

FAQ

Which export format is best?

Use the format your project already treats as the source of truth. CSS variables are broadly useful, while Tailwind and JSON fit specific build setups.

Should raw HEX values stay inside components?

For prototypes it is fine, but production interfaces are easier to maintain when recurring colors live in a named token.

Can I export palette colors too?

This page exports one selected color. Generate a palette first, then create named tokens for the colors you actually decide to keep.

Why include a share URL?

The URL keeps the exact HEX value available for review, documentation, and repeat exports without relying on a screenshot.