CSS Custom Properties Shades Generator

Color 1:

Color 1 Name:

Color 2:

Color 2 Name:

Color 3:

Color 3 Name:

Color 4:

Color 4 Name:

tm-primary

25 #feede9

50 #fcdbd2

100 #f9b7a6

200 #f69379

300 #f36f4d

400 #f04b20

500 #d8441d

600 #c03c1a

700 #a83516

800 #902d13

900 #782610

950 #601e0d

tm-secondary

25 #e6f5f7

50 #ccebee

100 #99d7dd

200 #66c4cd

300 #33b0bc

400 #009cab

500 #008c9a

600 #007d89

700 #006d78

800 #005e67

900 #004e56

950 #003e44

tm-tertiary

25 #fefae9

50 #fcf5d2

100 #f9eca5

200 #f6e279

300 #f3d94c

400 #f0cf1f

500 #d8ba1c

600 #c0a619

700 #a89116

800 #907c13

900 #786810

950 #60530c

tm-slate

25 #eeefef

50 #dde0e0

100 #bbc1c1

200 #98a1a1

300 #768282

400 #546363

500 #4c5959

600 #434f4f

700 #3b4545

800 #323b3b

900 #2a3232

950 #222828

CSS Custom Properties:

:root {
  /* tm-primary colors */
  --tm-primary-25: #feede9;
  --tm-primary-50: #fcdbd2;
  --tm-primary-100: #f9b7a6;
  --tm-primary-200: #f69379;
  --tm-primary-300: #f36f4d;
  --tm-primary-400: #f04b20;
  --tm-primary-500: #d8441d;
  --tm-primary-600: #c03c1a;
  --tm-primary-700: #a83516;
  --tm-primary-800: #902d13;
  --tm-primary-900: #782610;
  --tm-primary-950: #601e0d;

  /* tm-secondary colors */
  --tm-secondary-25: #e6f5f7;
  --tm-secondary-50: #ccebee;
  --tm-secondary-100: #99d7dd;
  --tm-secondary-200: #66c4cd;
  --tm-secondary-300: #33b0bc;
  --tm-secondary-400: #009cab;
  --tm-secondary-500: #008c9a;
  --tm-secondary-600: #007d89;
  --tm-secondary-700: #006d78;
  --tm-secondary-800: #005e67;
  --tm-secondary-900: #004e56;
  --tm-secondary-950: #003e44;

  /* tm-tertiary colors */
  --tm-tertiary-25: #fefae9;
  --tm-tertiary-50: #fcf5d2;
  --tm-tertiary-100: #f9eca5;
  --tm-tertiary-200: #f6e279;
  --tm-tertiary-300: #f3d94c;
  --tm-tertiary-400: #f0cf1f;
  --tm-tertiary-500: #d8ba1c;
  --tm-tertiary-600: #c0a619;
  --tm-tertiary-700: #a89116;
  --tm-tertiary-800: #907c13;
  --tm-tertiary-900: #786810;
  --tm-tertiary-950: #60530c;

  /* tm-slate colors */
  --tm-slate-25: #eeefef;
  --tm-slate-50: #dde0e0;
  --tm-slate-100: #bbc1c1;
  --tm-slate-200: #98a1a1;
  --tm-slate-300: #768282;
  --tm-slate-400: #546363;
  --tm-slate-500: #4c5959;
  --tm-slate-600: #434f4f;
  --tm-slate-700: #3b4545;
  --tm-slate-800: #323b3b;
  --tm-slate-900: #2a3232;
  --tm-slate-950: #222828;

}

Tailwind Colors:

@theme {
  /* tm-primary colors */
  --color-tm-primary-25: #feede9;
  --color-tm-primary-50: #fcdbd2;
  --color-tm-primary-100: #f9b7a6;
  --color-tm-primary-200: #f69379;
  --color-tm-primary-300: #f36f4d;
  --color-tm-primary-400: #f04b20;
  --color-tm-primary-500: #d8441d;
  --color-tm-primary-600: #c03c1a;
  --color-tm-primary-700: #a83516;
  --color-tm-primary-800: #902d13;
  --color-tm-primary-900: #782610;
  --color-tm-primary-950: #601e0d;

  /* tm-secondary colors */
  --color-tm-secondary-25: #e6f5f7;
  --color-tm-secondary-50: #ccebee;
  --color-tm-secondary-100: #99d7dd;
  --color-tm-secondary-200: #66c4cd;
  --color-tm-secondary-300: #33b0bc;
  --color-tm-secondary-400: #009cab;
  --color-tm-secondary-500: #008c9a;
  --color-tm-secondary-600: #007d89;
  --color-tm-secondary-700: #006d78;
  --color-tm-secondary-800: #005e67;
  --color-tm-secondary-900: #004e56;
  --color-tm-secondary-950: #003e44;

  /* tm-tertiary colors */
  --color-tm-tertiary-25: #fefae9;
  --color-tm-tertiary-50: #fcf5d2;
  --color-tm-tertiary-100: #f9eca5;
  --color-tm-tertiary-200: #f6e279;
  --color-tm-tertiary-300: #f3d94c;
  --color-tm-tertiary-400: #f0cf1f;
  --color-tm-tertiary-500: #d8ba1c;
  --color-tm-tertiary-600: #c0a619;
  --color-tm-tertiary-700: #a89116;
  --color-tm-tertiary-800: #907c13;
  --color-tm-tertiary-900: #786810;
  --color-tm-tertiary-950: #60530c;

  /* tm-slate colors */
  --color-tm-slate-25: #eeefef;
  --color-tm-slate-50: #dde0e0;
  --color-tm-slate-100: #bbc1c1;
  --color-tm-slate-200: #98a1a1;
  --color-tm-slate-300: #768282;
  --color-tm-slate-400: #546363;
  --color-tm-slate-500: #4c5959;
  --color-tm-slate-600: #434f4f;
  --color-tm-slate-700: #3b4545;
  --color-tm-slate-800: #323b3b;
  --color-tm-slate-900: #2a3232;
  --color-tm-slate-950: #222828;

}