Design System Color Tokens
Generate a complete set of design system colour tokens from 7 base colours - primary, secondary, accent, success, warning, error, and info. Each colour gets 9 automatically derived variants (base, light, dark, hover, active, bg, border, text, muted) for both light and dark modes. Export as CSS custom properties or JSON. All processing runs in your browser - free, no signup required.
Generate a complete set of design system colour tokens from 7 base colours. Get light and dark mode variants with CSS variables and JSON export - perfect for design systems, component libraries, and theme files.
Main brand colour used for primary actions, active states, and key UI elements
Supporting brand colour for secondary actions and complementary elements
Highlight colour for emphasis, badges, and call-to-action elements
Positive feedback - confirmations, success messages, and valid states
Cautionary feedback - warnings, low-priority alerts, and pending states
Negative feedback - errors, destructive actions, and invalid states
Informational feedback - tooltips, helper text, and neutral notifications
Primary
Secondary
Accent
Success
Warning
Error
Info
:root {
/* Light mode colour tokens */
--color-primary-base: #3b82f6;
--color-primary-light: #e2ecfe;
--color-primary-dark: #0f213e;
--color-primary-hover: #326fd1;
--color-primary-active: #295bac;
--color-primary-bg: #f5f9ff;
--color-primary-border: #9dc1fb;
--color-primary-text: #000000;
--color-primary-muted: #336ecc;
--color-secondary-base: #8b5cf6;
--color-secondary-light: #eee7fe;
--color-secondary-dark: #23173e;
--color-secondary-hover: #764ed1;
--color-secondary-active: #6140ac;
--color-secondary-bg: #f9f7ff;
--color-secondary-border: #c5aefb;
--color-secondary-text: #000000;
--color-secondary-muted: #6133cc;
--color-accent-base: #f59e0b;
--color-accent-light: #fef0da;
--color-accent-dark: #3d2803;
--color-accent-hover: #d08609;
--color-accent-active: #ac6f08;
--color-accent-bg: #fffaf3;
--color-accent-border: #facf85;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #10b981;
--color-success-light: #dbf5ec;
--color-success-dark: #042e20;
--color-success-hover: #0e9d6e;
--color-success-active: #0b825a;
--color-success-bg: #f3fcf9;
--color-success-border: #88dcc0;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f97316;
--color-warning-light: #feeadc;
--color-warning-dark: #3e1d06;
--color-warning-hover: #d46213;
--color-warning-active: #ae510f;
--color-warning-bg: #fff8f3;
--color-warning-border: #fcb98b;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #ef4444;
--color-error-light: #fde3e3;
--color-error-dark: #3c1111;
--color-error-hover: #cb3a3a;
--color-error-active: #a73030;
--color-error-bg: #fef6f6;
--color-error-border: #f7a2a2;
--color-error-text: #000000;
--color-error-muted: #cc3333;
--color-info-base: #06b6d4;
--color-info-light: #daf4f9;
--color-info-dark: #022e35;
--color-info-hover: #059bb4;
--color-info-active: #047f94;
--color-info-bg: #f3fbfd;
--color-info-border: #83dbea;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
/* Dark mode colour tokens */
--color-mode: light;
}
[data-theme="dark"], .dark {
--color-primary-base: #0b3d8e;
--color-primary-light: #dae2ee;
--color-primary-dark: #030f24;
--color-primary-hover: #093479;
--color-primary-active: #082b63;
--color-primary-bg: #f3f5f9;
--color-primary-border: #859ec7;
--color-primary-text: #ffffff;
--color-primary-muted: #336ecc;
--color-secondary-base: #3d0eaa;
--color-secondary-light: #e2dbf2;
--color-secondary-dark: #0f042b;
--color-secondary-hover: #340c91;
--color-secondary-active: #2b0a77;
--color-secondary-bg: #f5f3fb;
--color-secondary-border: #9e87d5;
--color-secondary-text: #ffffff;
--color-secondary-muted: #6133cc;
--color-accent-base: #f5c470;
--color-accent-light: #fef6ea;
--color-accent-dark: #3d311c;
--color-accent-hover: #d0a75f;
--color-accent-active: #ac894e;
--color-accent-bg: #fffcf8;
--color-accent-border: #fae2b8;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #d1faec;
--color-success-light: #f8fefc;
--color-success-dark: #343f3b;
--color-success-hover: #b2d5c9;
--color-success-active: #92afa5;
--color-success-bg: #fdfffe;
--color-success-border: #e8fdf6;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f8b07c;
--color-warning-light: #fef3eb;
--color-warning-dark: #3e2c1f;
--color-warning-hover: #d39669;
--color-warning-active: #ae7b57;
--color-warning-bg: #fffbf8;
--color-warning-border: #fcd8be;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #891010;
--color-error-light: #eddbdb;
--color-error-dark: #220404;
--color-error-hover: #740e0e;
--color-error-active: #600b0b;
--color-error-bg: #f9f3f3;
--color-error-border: #c48888;
--color-error-text: #ffffff;
--color-error-muted: #cc3333;
--color-info-base: #4ddbf5;
--color-info-light: #e4fafe;
--color-info-dark: #13373d;
--color-info-hover: #41bad0;
--color-info-active: #3699ac;
--color-info-bg: #f6fdff;
--color-info-border: #a6edfa;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
--color-mode: dark;
}Complete Token Generation
Generate production-ready design tokens from just your base colours.
Common Use Cases
From design systems to dark mode - colour tokens power consistent UIs.
Design System Development
Generate consistent colour tokens for your component library or design system. Use the exported CSS variables across all your components for a single source of truth.
Design Handoff
Convert Figma or Sketch design tokens into developer-ready CSS variables and JSON files. Eliminate manual colour mapping errors between design and development.
Theming & White-Labeling
Create multiple token sets for different brands or themes. Each set gets consistent light/dark variants automatically - perfect for multi-tenant SaaS products.
Dark Mode Implementation
Stop manually guessing dark mode colours. Enter your light palette once and get WCAG-friendly dark mode tokens instantly with no on-the-fly calculations.
Framework Migration
When migrating between CSS frameworks or adding a design system mid-project, generate consistent colour tokens that work with Tailwind, vanilla CSS, or CSS-in-JS.
E-commerce & Marketing Sites
Maintain brand consistency across landing pages, product catalogs, and checkout flows with a single set of semantic colour tokens shared across all pages.
About Design System Color Tokens
Understand how colour tokens work and how to use them in your projects.
What Are Design System Color Tokens?
How Light Mode Tokens Are Generated
How Dark Mode Tokens Are Adapted
Using the Exported Tokens
Related Tools
Explore more colour palette and token generation tools.
Tint & Shade Generator
Generate tints (with white) and shades (with black) from any base colour with CSS variable export.
Dark Mode Color Adapter
Convert any light-mode colour palette to dark-mode equivalents with WCAG contrast checks.
Color Palette Generator
Generate 5-color palettes from a base colour using harmony rules with CSS, SCSS, or Tailwind export.
CSS Color Scale Generator
Generate smooth N-step colour scales between two colours with CSS variable and Tailwind export.
Frequently Asked Questions
Everything you need to know about design system colour tokens.
What are design system colour tokens?
Colour tokens are semantic variables that represent colours in a design system. Instead of using raw hex codes everywhere, you use names like --color-primary or --color-error-bg. This makes it trivial to update colours globally, implement dark mode, maintain consistency across components, and hand off designs between teams.
How many token variants are generated per colour?
Each base colour generates 9 variants: base (the original colour), light (mixed with white), dark (mixed with black), hover (slightly darker for interactive states), active (even darker for pressed states), bg (very light for backgrounds), border (muted for borders), text (black or white for readable text on the base colour), and muted (reduced saturation for secondary elements).
How is the dark mode adaptation calculated?
The dark mode adaptation uses a perceptual inversion algorithm. Lightness values are mapped through a curve that preserves the relative contrast relationships of the original palette while shifting everything into a comfortable range for dark backgrounds. Saturation is slightly reduced in dark mode because highly saturated colours can be uncomfortable to read on dark backgrounds.
Are the text-on-colour tokens WCAG compliant?
Yes. The text variant for each colour token uses luminance calculations to automatically choose between black (#000000) and white (#ffffff) text, ensuring at least 7:1 contrast ratio against the base colour. This meets WCAG AAA requirements for normal text.
Can I export tokens for use with Tailwind CSS?
Yes. The CSS variables exported from this tool can be referenced in your Tailwind config to create a custom colour scale. The JSON export can also be transformed by build tools like Style Dictionary or Theme UI into Tailwind-compatible format.
How should I structure my CSS variables file?
We recommend keeping the exported :root block in a variables.css file that is imported globally. The [data-theme="dark"] block should be applied conditionally - either via a class toggle in JavaScript or by using the CSS prefers-color-scheme media query as a fallback.
What happens if I change just one base colour?
All 9 variants for that category (plus its dark mode equivalents) are automatically recalculated. If you have already applied the tokens in your codebase, updating the base colour in this tool and re-exporting will give you a complete new set to paste in.
Can I use these tokens with CSS-in-JS libraries?
Yes. The CSS variables output works with any framework that supports CSS custom properties - styled-components, Emotion, Theme UI, Stitches, vanilla-extract, and more. Simply inject the CSS variables at the root level and reference them in your component styles.