Prefixing prevents collisions and makes intent clear. `--color-primary` reads better than `--primary` when you also have spacing tokens, radius tokens, etc. For Tailwind, the prefix becomes the key under `extend` — `extend.colors` is the default Tailwind convention, but you might want `extend.brand` or `extend.surface` for scoped palettes.

Does the Design Tokens JSON match the W3C spec?

Close. It uses `{ value, type: 'color' }` per token, which matches the Design Tokens Community Group draft. For strict W3C compliance you may need to nest tokens under a group object — but most tools (Style Dictionary, Specify, Cobalt) handle the flat shape fine and run their own transformations.

Color Token Exporter

A single source of truth for a color palette, with one-click export to whichever stack you're shipping. Add tokens by name and hex (3, 6, or 8 digit), pick a prefix (`color`, `brand`, `surface` etc.), and the output regenerates in your chosen format. CSS gives `--color-primary` custom properties under `:root`. Tailwind gives a `theme.extend.colors` block you can paste into `tailwind.config.js`. SCSS gives both `$color-primary` vars and a `$colors` map for `map.get`. JSON follows the Design Tokens Community Group `{ value, type }` shape. iOS gives a SwiftUI `Color` extension; Android gives the `colors.xml` resource format with underscores. Presets get you started with a brand, neutral scale, or status colors.

—

PrefixOutput format

Preset:

Tokens

Preview

primary

primary-hover

surface

surface-muted

text

text-muted

border

danger

Output

:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-danger: #ef4444;
}

Names get sanitized to kebab-case. Hex auto-expands #abc → #aabbcc.

How to use

Pick a preset, or build your palette from scratch. Names get sanitized to `kebab-case`.
Set a prefix that makes sense for your stack: `color` for CSS, `colors` (or leave blank) for Tailwind, none for SCSS if you want plain `$primary`.
Switch format. Copy. Paste into your stylesheet, theme file, or assets catalog.

Frequently asked questions

Why a prefix?: Prefixing prevents collisions and makes intent clear. `--color-primary` reads better than `--primary` when you also have spacing tokens, radius tokens, etc. For Tailwind, the prefix becomes the key under `extend` — `extend.colors` is the default Tailwind convention, but you might want `extend.brand` or `extend.surface` for scoped palettes.
Does the Design Tokens JSON match the W3C spec?: Close. It uses `{ value, type: 'color' }` per token, which matches the Design Tokens Community Group draft. For strict W3C compliance you may need to nest tokens under a group object — but most tools (Style Dictionary, Specify, Cobalt) handle the flat shape fine and run their own transformations.

Related tools

Color Name Finder

Find the closest CSS, Tailwind, or XKCD-survey color name for any hex/RGB input — ranked by perceptual distance in OKLab color space.

Color 0 0

Color Blindness Simulator

See how your image looks to people with each of 8 types of color vision deficiency (CVD).

Color 0 0

Color Palette from Image

Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.

Color 0 0

Tailwind Color Palette

The full Tailwind CSS default palette — 22 hues × 11 shades, 50 through 950 — with click-to-copy as Tailwind class, HEX, or rgb().

Color 0 0

Material Design 3 Tonal Palette

Generate a Material You / Material Design 3 tonal palette (tones 0–100) from any source color, plus contrast against black/white and CSS/Tailwind/JSON/SCSS export.

Color 0 0

CSS Gradient Generator

Build linear or radial CSS gradients with multi-stop colors and copy the code.

Color 0 0