What are design tokens?

Design tokens are named, reusable values that store the visual decisions of a design system — colours, spacing, radius, typography and more. Instead of hard-coding '#4f46e5' everywhere, you reference a token like 'color-primary-500', so a single change updates the whole product consistently.

How is the tint and shade ramp generated?

Your base colour is converted to HSL, then its hue and saturation are kept while the lightness is remapped onto a canonical 11-step scale (50 is lightest, 950 is darkest). Saturation is nudged slightly at the extremes so very light and very dark steps keep the colour's identity instead of going grey or muddy.

What do the numbers 50 to 950 mean?

They are the standard Tailwind-style ramp keys. Lower numbers are lighter tints suitable for backgrounds and hover states; 500-600 sits near most brand colours; higher numbers are darker shades used for text, borders and pressed states. The ringed swatch marks the step closest to the exact colour you entered.

Which export format should I use?

Use CSS variables for any framework via custom properties, JSON for a tool-agnostic token source that build pipelines like Style Dictionary can read, Tailwind for a config theme extension wired to the CSS variables, and SCSS if your project compiles Sass. All four describe the same tokens.

How does the contrast checker work?

It computes the WCAG 2.1 contrast ratio between your text and surface colours using relative luminance. A ratio of 4.5:1 passes AA for normal text, 3:1 passes AA for large text, and 7:1 passes AAA. The badges update live as you change colours so you can fix accessibility issues before shipping.

Is my data uploaded anywhere?

No. Every calculation runs entirely in your browser and your token set is auto-saved to this browser's local storage only. Nothing is ever sent to a server, so you can use it on confidential brand work safely.

Design Tokens Generator

A design tokens generator that turns one or more brand colours into a complete, production-ready token set: full tint and shade ramps, semantic surface and text tokens for light and dark themes, radius and spacing scales, live WCAG contrast checks, and one-click exports as CSS variables, JSON, Tailwind config or SCSS. It is for front-end engineers, design-system maintainers and indie developers who want a consistent colour system without hand-tuning a dozen hex values or wiring up a heavyweight tooling pipeline.

Pick a brand colour and the tool instantly expands it into an 11-step ramp — from a near-white 50 tint down to a near-black 950 shade — so you get backgrounds, hover states, borders, text colours and pressed states that all belong to the same hue. Add as many colours as your system needs (primary, accent, neutral, success, danger and so on), rename them, randomise to explore, and copy any individual swatch with a click. Everything is auto-saved in your browser and works fully offline, so it is safe for confidential brand work.

How it works

Each base colour is converted from hex to HSL. The tool keeps the hue and saturation and remaps the lightness onto a fixed, perceptually-spaced scale of eleven steps. Saturation is gently boosted at the lightest and darkest ends so the colour keeps its character instead of washing out to grey, and the step whose lightness is closest to your original colour is ringed — that is the one most people think of as “the brand colour”. The semantic layer adds surface and text tokens for both light and dark themes, plus radius and spacing scales derived from the base values you set. The CSS export emits a prefers-color-scheme media query and a [data-theme="dark"] selector so the dark theme works automatically or with a manual toggle. Throughout, contrast is measured with the WCAG relative-luminance formula and graded AAA / AA / AA-Large / Fail in real time.

Example

Start with a primary of #4f46e5. The generator produces an indigo ramp where 50 is a pale lavender tint for page backgrounds, 500-600 sits on your brand indigo, and 900-950 give deep shades for headings and borders. Add an accent of #06b6d4 and a neutral grey, toggle the dark preview, and the contrast badge confirms your light text reads at better than 12:1 on the dark surface. Switch the export to Tailwind and paste the theme extension into tailwind.config.js to use classes like bg-primary-50, text-primary-700 and border-accent-300 immediately — or choose JSON to feed the same values into Style Dictionary or your own build step.

Step	Role	Typical use
`50` to `200`	Light tints	Backgrounds, subtle fills, hover surfaces
`300` to `400`	Mid tints	Borders, disabled states, secondary fills
`500` to `600`	Anchor	Buttons, links, the core brand colour
`700` to `950`	Shades	Text on light, pressed states, deep borders

Every value is computed in your browser — no colours are uploaded or stored on a server.