Skip to main content
CodeAlchemy

Palette → Tokens

Turn a color palette into CSS variables, Tailwind config, and Token Studio JSON.

client-sidefree

Drop an image to extract palettePNG, JPG, SVG — up to 10 MB

3/10 colors
AA-largeAA
failAAA
failAAA
brand
accent
warning
Loading editor…

How to use Palette → Tokens

01

Add or extract colors

Type hex values, click swatches to use the color picker, or drop an image to auto-extract up to 6 dominant colors.

02

Name and reorder

Give each color a semantic name (brand, accent, neutral). Drag to reorder. WCAG contrast badges appear automatically.

03

Export any format

Switch tabs for CSS variables, Tailwind config, Style Dictionary, Tokens Studio, SCSS, or Figma Variables. Copy or download.

Frequently asked questions

Is Palette to Tokens free?↓

Yes, completely free. No sign-up, no limits.

Does my image get uploaded to a server?↓

No. All color extraction happens directly in your browser using the HTML canvas API. Your image never leaves your machine.

What is the scale generation algorithm?↓

Each base color is mixed with white (for steps 50–400) and black (for steps 600–950) using perceptual blending. The 500 step is always the exact input color.

What formats are supported?↓

CSS custom properties, Tailwind config (v3/v4 compatible), Style Dictionary (W3C format), Tokens Studio JSON, SCSS maps, and Figma Variables JSON.

Try other tools

View all

Figma → Code

Turn Figma frames into React, Vue, or Svelte components instantly.

client-sidefree

Tailwind ↔ CSS

Convert Tailwind classes to vanilla CSS and back. Instant. Client-side.

client-sidefree

SQL → ORM

Convert SQL DDL to Prisma or Drizzle schema definitions instantly.

client-sidefree

Long-form guide

Turn a color palette into design tokens, in every format that matters

Palette → Tokens is the tool for the moment between "we have brand colors" and "we have a design system." Drop in 1–10 hex values (or an image to auto-extract them), name each swatch semantically, and the tool generates a 50–950 perceptual scale, runs WCAG contrast checks, and exports the whole thing in every token format your team might use.

How to use it

  1. Add or extract colors. Type hex values into the input field, click each swatch to use the color picker, or drop an image to auto-extract up to six dominant colors. Image extraction is client-side via canvas — your file never leaves your browser.
  2. Name semantically. Click a swatch's label to rename it. Use names that match how you'll reference the color in code: brand, accent, neutral, success, error. The names flow through every export, so a brand color becomes --color-brand-500 in CSS, brand.500 in Tailwind, and {brand.500} in Tokens Studio.
  3. Generate the scale. Toggle "Generate full 50–950 scale" to expand each color into eleven steps. The 500 step is always your exact input. Steps 50–400 are perceptually lightened versions; 600–950 are perceptually darkened. The math runs in OKLCH so the spacing feels even instead of muddy.
  4. Check contrast. Each scale step displays two WCAG badges: contrast against white (top) and against black (bottom). AAA is the highest contrast, suitable for body text. AA passes regular text. AA Large only passes for large text. FAIL is unreadable for body text — useful for backgrounds, not for foregrounds.
  5. Export. Switch tabs to see your palette in six formats: CSS custom properties, Tailwind config (v3 or v4), Style Dictionary (W3C DTCG), Tokens Studio JSON, SCSS maps, or Figma Variables JSON. Copy the active tab to clipboard or download as a file.

What the scale actually contains

Each scale follows the same pattern: 50 (very light), 100, 200, 300, 400 (lighter than base), 500 (your input), 600, 700, 800, 900, 950 (very dark). The lightening and darkening happen in OKLCH color space, which keeps perceived contrast roughly even between steps — so 100 looks the same distance from 200 as 800 looks from 900, instead of the bunched-up mid-tones you get from naive RGB blending.

For Tailwind v4 the export uses @theme blocks with OKLCH custom properties — you can drop the file straight into a project's main CSS. For v3 the export uses tailwind.config.js-compatible objects. For Style Dictionary the export follows the W3C Design Token Community Group format, the new lingua franca for cross-tool tokens. For Tokens Studio it follows their JSON shape exactly, ready to paste into the plugin.

When to reach for it

Two cases dominate. First: a brand sends you a few hex codes and you need a complete palette to design with. Drop the codes in, generate scales, and you have eleven steps per color in 90 seconds. Second: you've been using ad-hoc hex values across a project and want to consolidate into named tokens. Paste each color, give it a semantic name, export the right format for your stack, and you're suddenly maintainable.

A third smaller case: extracting a palette from a moodboard, screenshot, or photograph. Drop the image, get six representative colors, refine them by hand, ship the scale.

Examples

Two-color palette to CSS variables
Input · hex
brand: #3dc96c
accent: #f59e0b
Output · css
:root {
  --color-brand-500: oklch(0.70 0.22 142);
  --color-brand-600: oklch(0.62 0.19 142);
  --color-brand-400: oklch(0.76 0.20 142);
  --color-accent-500: oklch(0.74 0.16 85);
  --color-accent-700: oklch(0.55 0.12 85);
  --color-accent-300: oklch(0.85 0.12 85);
}
Tailwind v4 config snippet
Input · hex
brand: #3dc96c
Output · css
@theme {
  --color-brand-50: oklch(0.97 0.03 142);
  --color-brand-500: oklch(0.70 0.22 142);
  --color-brand-950: oklch(0.18 0.05 142);
}
Tokens Studio JSON
Input · hex
primary: #3b82f6
Output · json
{
  "primary": {
    "500": { "value": "#3b82f6", "type": "color" },
    "600": { "value": "#2563eb", "type": "color" },
    "400": { "value": "#60a5fa", "type": "color" }
  }
}

Frequently asked questions

Yes. No sign-up, no rate limit, no upload to a server. Image extraction uses the browser's canvas API; scale generation is pure math. Your input never leaves the browser.