How are the tint and shade steps calculated?

Each team color becomes the 500 step. Lighter steps (50–400) are produced by mixing the base color toward white, and darker steps (600–900) by mixing it toward black, in RGB space. The 500 value always matches the team's exact published hex.

Can I use these palettes commercially?

The generated scales are plain color values you can use freely in your own projects. Team names and logos remain the property of their respective organizations; this tool only outputs color math derived from publicly published brand colors.

What export formats are supported?

You can copy the full scale as CSS custom properties (:root variables), a Tailwind CSS theme.extend.colors block, or SCSS variables. Every format uses the same underlying hex values.

Palette Generator

Turn any team's colors into a complete 50–900 tint and shade scale, ready to drop into your design system. Pick a team below, then copy the output as CSS variables, Tailwind config, or SCSS.

Team

The scale is generated from every color in the team's published palette. The 500 step is the exact team hex; lighter and darker steps are mixed toward white and black.

Purple

purple

100

200

300

400

500

600

700

800

900

Gold

gold

100

200

300

400

500

600

700

800

900

Black

black

100

200

300

400

500

600

700

800

900

:root {
  --purple-50: #f1eef5;
  --purple-100: #e0d8e9;
  --purple-200: #c2b1d2;
  --purple-300: #a389bc;
  --purple-400: #7e59a1;
  --purple-500: #552583;
  --purple-600: #492071;
  --purple-700: #3c1a5c;
  --purple-800: #2e1447;
  --purple-900: #200e32;
  --gold-50: #fff9ee;
  --gold-100: #fff2d8;
  --gold-200: #fee6b1;
  --gold-300: #fed98a;
  --gold-400: #fdca5b;
  --gold-500: #fdb927;
  --gold-600: #da9f22;
  --gold-700: #b1821b;
  --gold-800: #896415;
  --gold-900: #60460f;
  --black-50: #ebebeb;
  --black-100: #d1d1d1;
  --black-200: #a3a3a3;
  --black-300: #757575;
  --black-400: #3d3d3d;
  --black-500: #000000;
  --black-600: #000000;
  --black-700: #000000;
  --black-800: #000000;
  --black-900: #000000;
}

Frequently asked questions

How are the tint and shade steps calculated?: Each team color becomes the 500 step. Lighter steps (50–400) are produced by mixing the base color toward white, and darker steps (600–900) by mixing it toward black, in RGB space. The 500 value always matches the team's exact published hex.
Can I use these palettes commercially?: The generated scales are plain color values you can use freely in your own projects. Team names and logos remain the property of their respective organizations; this tool only outputs color math derived from publicly published brand colors.
What export formats are supported?: You can copy the full scale as CSS custom properties (:root variables), a Tailwind CSS theme.extend.colors block, or SCSS variables. Every format uses the same underlying hex values.