Free Tool

Design Token Generator

Enter a brand color to generate a complete design token system — primary, neutral, and semantic color scales — ready to export as CSS, Tailwind, SCSS, or JSON.

Brand Primary Color

Token Name (for primary scale)

Used in export: --color-brand-500

Presets

Token Preview — 6 Scales × 11 Steps

Primary (brand)

#F7F7F8

#E9EBEE

100

#C0CAE0

200

#829EDC

300

#4275E4

400

#2463EB

500

#1857DE

600

#1744A5

700

#122C64

800

#0B1731

900

#070E1D

950

100

200

300

400

500

600

700

800

900

950

Neutral

#F7F7F7

#EBEBEB

100

#CBCCCF

200

#A4A8AF

300

#828896

400

#737B8C

500

#69707F

600

#515661

700

#34373D

800

#1B1C20

900

#111113

950

100

200

300

400

500

600

700

800

900

950

Success

#F7F8F7

#E4EAE6

100

#ADD4BB

200

#5BCA84

300

#22B658

400

#16A249

500

#169244

600

#146F36

700

#104824

800

#0A2916

900

#081C0F

950

100

200

300

400

500

600

700

800

900

950

Warning

#F8F8F7

#EEECE8

100

#E0D2BB

200

#DFB875

300

#ECA52C

400

#F59F0A

500

#DC900C

600

#A36D0E

700

#64440D

800

#322308

900

#1E1506

950

100

200

300

400

500

600

700

800

900

950

Error

#F8F7F7

#F0EBEB

100

#E4C8C8

200

#E19393

300

#E95D5D

400

#EF4343

500

#EA2C2C

600

#BA1919

700

#6F1313

800

#350B0B

900

#1D0707

950

100

200

300

400

500

600

700

800

900

950

Info

#F7F7F8

#EBEDF0

100

#C7D3E5

200

#90B0E5

300

#5791EF

400

#3C83F6

500

#2473F2

600

#1255C1

700

#103673

800

#091B36

900

#060F1E

950

100

200

300

400

500

600

700

800

900

950

Step	HEX	RGB	HSL	vs White	vs Black
50	#F7F7F8	247, 247, 248	221°, 7%, 97%	1.07:1	19.61:1
100	#E9EBEE	233, 235, 238	221°, 15%, 92%	1.19:1	17.58:1
200	#C0CAE0	192, 202, 224	221°, 34%, 82%	1.65:1	12.77:1
300	#829EDC	130, 158, 220	221°, 56%, 68%	2.67:1	7.87:1
400	#4275E4	66, 117, 228	221°, 75%, 58%	4.29:1	4.9:1
500base	#2463EB	36, 99, 235	221°, 83%, 53%	5.17:1	4.06:1
600	#1857DE	24, 87, 222	221°, 81%, 48%	6.07:1	3.46:1
700	#1744A5	23, 68, 165	221°, 76%, 37%	8.73:1	2.41:1
800	#122C64	18, 44, 100	221°, 70%, 23%	13.38:1	1.57:1
900	#0B1731	11, 23, 49	221°, 64%, 12%	17.78:1	1.18:1
950	#070E1D	7, 14, 29	221°, 62%, 7%	19.27:1	1.09:1

Export Tokens

:root {
  /* primary */
  --color-brand-50: #F7F7F8;
  --color-brand-100: #E9EBEE;
  --color-brand-200: #C0CAE0;
  --color-brand-300: #829EDC;
  --color-brand-400: #4275E4;
  --color-brand-500: #2463EB;
  --color-brand-600: #1857DE;
  --color-brand-700: #1744A5;
  --color-brand-800: #122C64;
  --color-brand-900: #0B1731;
  --color-brand-950: #070E1D;
  /* neutral */
  --color-neutral-50: #F7F7F7;
  --color-neutral-100: #EBEBEB;
  --color-neutral-200: #CBCCCF;
  --color-neutral-300: #A4A8AF;
  --color-neutral-400: #828896;
  --color-neutral-500: #737B8C;
  --color-neutral-600: #69707F;
  --color-neutral-700: #515661;
  --color-neutral-800: #34373D;
  --color-neutral-900: #1B1C20;
  --color-neutral-950: #111113;
  /* success */
  --color-success-50: #F7F8F7;
  --color-success-100: #E4EAE6;
  --color-success-200: #ADD4BB;
  --color-success-300: #5BCA84;
  --color-success-400: #22B658;
  --color-success-500: #16A249;
  --color-success-600: #169244;
  --color-success-700: #146F36;
  --color-success-800: #104824;
  --color-success-900: #0A2916;
  --color-success-950: #081C0F;
  /* warning */
  --color-warning-50: #F8F8F7;
  --color-warning-100: #EEECE8;
  --color-warning-200: #E0D2BB;
  --color-warning-300: #DFB875;
  --color-warning-400: #ECA52C;
  --color-warning-500: #F59F0A;
  --color-warning-600: #DC900C;
  --color-warning-700: #A36D0E;
  --color-warning-800: #64440D;
  --color-warning-900: #322308;
  --color-warning-950: #1E1506;
  /* error */
  --color-error-50: #F8F7F7;
  --color-error-100: #F0EBEB;
  --color-error-200: #E4C8C8;
  --color-error-300: #E19393;
  --color-error-400: #E95D5D;
  --color-error-500: #EF4343;
  --color-error-600: #EA2C2C;
  --color-error-700: #BA1919;
  --color-error-800: #6F1313;
  --color-error-900: #350B0B;
  --color-error-950: #1D0707;
  /* info */
  --color-info-50: #F7F7F8;
  --color-info-100: #EBEDF0;
  --color-info-200: #C7D3E5;
  --color-info-300: #90B0E5;
  --color-info-400: #5791EF;
  --color-info-500: #3C83F6;
  --color-info-600: #2473F2;
  --color-info-700: #1255C1;
  --color-info-800: #103673;
  --color-info-900: #091B36;
  --color-info-950: #060F1E;
}

How to use this token system

Primary scale (brand)

Generated from your brand color as step 500. Steps 50–400 are tints for backgrounds, hover states, and subtle UI surfaces. Steps 600–950 are shades for text, borders, and pressed states. Use step 500 for primary CTAs and interactive elements.

Neutral scale

Built from the same hue as your brand color at very low saturation (10%). This creates a neutral palette that is subtly harmonious with your brand without being visibly tinted. Use for background surfaces, borders, and body text.

Semantic scales

Fixed hue-based scales for success (green), warning (amber), error (red), and info (blue). These are independent of your brand color — semantic meaning must remain consistent across contexts. Use them only for feedback states, never for decoration.

Contrast badges

Green badge = WCAG AA compliant (≥4.5:1 for normal text, ≥3:1 for large text). Amber = passes for large text only. Grey = fails AA. Step 700–900 of any scale typically passes AA on white; step 50–300 passes AA on black.

Tip: For CSS custom properties, import the generated CSS into your root stylesheet. For Tailwind, paste the colors object into the theme.extend.colors section of your config file. For Style Dictionary users, the JSON export follows the W3C Design Token Community Group format.