What is a color palette JSON?

A color palette JSON is a structured file that lists colors with their names and values. It might be an array of strings, an object keyed by name, or a nested object with steps like { "primary": { "500": "#4f46e5" } }.

Where can I use palette JSON?

Build scripts, style guide generators, Storybook addons, Figma plugins, design token pipelines, JavaScript and TypeScript apps, Tailwind configs and any tool that consumes structured color data.

How is this different from W3C design tokens?

W3C design tokens use a specific dialect with $type and $value keys designed for cross-tool interoperability. A plain JSON palette is a looser format that many scripts and apps consume directly without transformation.

Does the generator handle shades?

Yes. Enter a base color and the generator creates a full 50–950 shade scale, then exports it as a nested JSON object.

JSON Color Generator — Palette Exports for Code

Base color

Palette name Top-level key in the exported JSON

What does a color palette JSON look like?

There are many shapes. Here are the three most common ones and where they are used.

Flat array of hex strings

[
  "#4f46e5",
  "#6366f1",
  "#818cf8"
]

Best for simple scripts and quick prototypes.

Named object

{
  "primary": "#4f46e5",
  "secondary": "#0ea5e9",
  "accent": "#14b8a6"
}

Best for small palettes with meaningful names.

Nested scale (recommended)

{
  "primary": {
    "50":  "#eef2ff",
    "100": "#e0e7ff",
    "500": "#4f46e5",
    "900": "#312e81",
    "950": "#1e1b4b"
  }
}

Best for design systems, Tailwind configs, and scalable token pipelines. This is what the generator produces.

Consuming the JSON

import palette from './palette.json' assert { type: 'json' };

document.documentElement.style.setProperty(
  '--color-primary-500',
  palette.primary['500'],
);

// Or generate CSS variables dynamically
for (const [step, hex] of Object.entries(palette.primary)) {
  document.documentElement.style.setProperty(
    `--color-primary-${step}`,
    hex,
  );
}

Frequently asked questions

Can I export multiple palettes at once?

The generator exports one color and its shade scale at a time. To combine multiple palettes, generate each one and merge the JSON objects — the top-level key is configurable, so merging is straightforward.

Is the JSON valid for JavaScript import?

Yes. The output is standard JSON that works with JSON.parse, require(), or an ES module import assertion. No comments, no trailing commas.

Can I include RGB or OKLCH values?

Currently the JSON output uses HEX. For richer outputs including RGB, HSL and OKLCH, use the token generator.

Does the generator work offline?

Yes. All generation runs locally in your browser.

Related tools

Token Generator

W3C design tokens JSON.

SVG Generator

Export as SVG for docs and previews.

Developer Toolkit

All exports in one interface.

Shades Generator

Generate the scale before exporting.