diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts
deleted file mode 100644
index d04c95ad284ab1..00000000000000
--- a/packages/mui-material/src/styles/createPalette.d.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-export type PaletteMode = 'light' | 'dark';
-export interface Color {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-  A100: string;
-  A200: string;
-  A400: string;
-  A700: string;
-}
-
-export {};
-// use standalone interface over typeof colors/commons
-// to enable module augmentation
-export interface CommonColors {
-  black: string;
-  white: string;
-}
-
-export type ColorPartial = Partial<Color>;
-
-export interface TypeText {
-  primary: string;
-  secondary: string;
-  disabled: string;
-}
-
-export interface TypeAction {
-  active: string;
-  hover: string;
-  hoverOpacity: number;
-  selected: string;
-  selectedOpacity: number;
-  disabled: string;
-  disabledOpacity: number;
-  disabledBackground: string;
-  focus: string;
-  focusOpacity: number;
-  activatedOpacity: number;
-}
-
-export interface TypeBackground {
-  default: string;
-  paper: string;
-}
-
-export type TypeDivider = string;
-
-export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;
-
-export interface SimplePaletteColorOptions {
-  light?: string;
-  main: string;
-  dark?: string;
-  contrastText?: string;
-}
-
-export interface PaletteColor {
-  light: string;
-  main: string;
-  dark: string;
-  contrastText: string;
-}
-
-export interface TypeObject {
-  text: TypeText;
-  action: TypeAction;
-  divider: TypeDivider;
-  background: TypeBackground;
-}
-
-export type PaletteTonalOffset =
-  | number
-  | {
-      light: number;
-      dark: number;
-    };
-
-export const light: TypeObject;
-export const dark: TypeObject;
-
-export interface PaletteAugmentColorOptions {
-  color: PaletteColorOptions;
-  mainShade?: number | string;
-  lightShade?: number | string;
-  darkShade?: number | string;
-  name?: number | string;
-}
-
-export interface Palette {
-  common: CommonColors;
-  mode: PaletteMode;
-  contrastThreshold: number;
-  tonalOffset: PaletteTonalOffset;
-  primary: PaletteColor;
-  secondary: PaletteColor;
-  error: PaletteColor;
-  warning: PaletteColor;
-  info: PaletteColor;
-  success: PaletteColor;
-  grey: Color;
-  text: TypeText;
-  divider: TypeDivider;
-  action: TypeAction;
-  background: TypeBackground;
-  getContrastText: (background: string) => string;
-  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
-}
-
-export interface Channels {
-  mainChannel: string;
-  lightChannel: string;
-  darkChannel: string;
-  contrastTextChannel: string;
-}
-
-export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
-
-export interface PaletteOptions {
-  primary?: PaletteColorOptions;
-  secondary?: PaletteColorOptions;
-  error?: PaletteColorOptions;
-  warning?: PaletteColorOptions;
-  info?: PaletteColorOptions;
-  success?: PaletteColorOptions;
-  mode?: PaletteMode;
-  tonalOffset?: PaletteTonalOffset;
-  contrastThreshold?: number;
-  common?: Partial<CommonColors>;
-  grey?: ColorPartial;
-  text?: Partial<TypeText>;
-  divider?: string;
-  action?: Partial<TypeAction>;
-  background?: Partial<TypeBackground>;
-  getContrastText?: (background: string) => string;
-}
-
-export default function createPalette(palette: PaletteOptions): Palette;
diff --git a/packages/mui-material/src/styles/createPalette.js b/packages/mui-material/src/styles/createPalette.ts
similarity index 67%
rename from packages/mui-material/src/styles/createPalette.js
rename to packages/mui-material/src/styles/createPalette.ts
index 566cfe2c655d83..dcee360017a923 100644
--- a/packages/mui-material/src/styles/createPalette.js
+++ b/packages/mui-material/src/styles/createPalette.ts
@@ -9,6 +9,147 @@ import blue from '../colors/blue';
 import lightBlue from '../colors/lightBlue';
 import green from '../colors/green';
 
+export type PaletteMode = 'light' | 'dark';
+export interface Color {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  A100: string;
+  A200: string;
+  A400: string;
+  A700: string;
+}
+
+export {};
+// use standalone interface over typeof colors/commons
+// to enable module augmentation
+export interface CommonColors {
+  black: string;
+  white: string;
+}
+
+export type ColorPartial = Partial<Color>;
+
+export interface TypeText {
+  primary: string;
+  secondary: string;
+  disabled: string;
+}
+
+export interface TypeAction {
+  active: string;
+  hover: string;
+  hoverOpacity: number;
+  selected: string;
+  selectedOpacity: number;
+  disabled: string;
+  disabledOpacity: number;
+  disabledBackground: string;
+  focus: string;
+  focusOpacity: number;
+  activatedOpacity: number;
+}
+
+export interface TypeBackground {
+  default: string;
+  paper: string;
+}
+
+export type TypeDivider = string;
+
+export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;
+
+export interface SimplePaletteColorOptions {
+  light?: string;
+  main: string;
+  dark?: string;
+  contrastText?: string;
+}
+
+export interface PaletteColor {
+  light: string;
+  main: string;
+  dark: string;
+  contrastText: string;
+}
+
+export interface TypeObject {
+  text: TypeText;
+  action: TypeAction;
+  divider: TypeDivider;
+  background: TypeBackground;
+}
+
+export type PaletteTonalOffset =
+  | number
+  | {
+      light: number;
+      dark: number;
+    };
+
+export interface PaletteAugmentColorOptions {
+  color: PaletteColorOptions;
+  mainShade?: number | string;
+  lightShade?: number | string;
+  darkShade?: number | string;
+  name?: number | string;
+}
+
+export interface Palette {
+  common: CommonColors;
+  mode: PaletteMode;
+  contrastThreshold: number;
+  tonalOffset: PaletteTonalOffset;
+  primary: PaletteColor;
+  secondary: PaletteColor;
+  error: PaletteColor;
+  warning: PaletteColor;
+  info: PaletteColor;
+  success: PaletteColor;
+  grey: Color;
+  text: TypeText;
+  divider: TypeDivider;
+  action: TypeAction;
+  background: TypeBackground;
+  getContrastText: (background: string) => string;
+  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
+}
+
+export interface Channels {
+  mainChannel: string;
+  lightChannel: string;
+  darkChannel: string;
+  contrastTextChannel: string;
+}
+
+export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
+
+export interface PaletteOptions {
+  primary?: PaletteColorOptions;
+  secondary?: PaletteColorOptions;
+  error?: PaletteColorOptions;
+  warning?: PaletteColorOptions;
+  info?: PaletteColorOptions;
+  success?: PaletteColorOptions;
+  mode?: PaletteMode;
+  tonalOffset?: PaletteTonalOffset;
+  contrastThreshold?: number;
+  common?: Partial<CommonColors>;
+  grey?: ColorPartial;
+  text?: Partial<TypeText>;
+  divider?: string;
+  action?: Partial<TypeAction>;
+  background?: Partial<TypeBackground>;
+  getContrastText?: (background: string) => string;
+}
+
 function getLight() {
   return {
     // The colors used to style the text.
@@ -83,13 +224,18 @@ function getDark() {
 
 export const dark = getDark();
 
-function addLightOrDark(intent, direction, shade, tonalOffset) {
-  const tonalOffsetLight = tonalOffset.light || tonalOffset;
-  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
+function addLightOrDark(
+  intent: PaletteColor,
+  direction: 'light' | 'dark',
+  shade: number | string,
+  tonalOffset: PaletteTonalOffset,
+) {
+  const tonalOffsetLight = typeof tonalOffset === 'number' ? tonalOffset : tonalOffset.light;
+  const tonalOffsetDark = typeof tonalOffset === 'number' ? tonalOffset * 1.5 : tonalOffset.dark;
 
   if (!intent[direction]) {
     if (intent.hasOwnProperty(shade)) {
-      intent[direction] = intent[shade];
+      intent[direction] = intent[shade as keyof typeof intent] as string;
     } else if (direction === 'light') {
       intent.light = lighten(intent.main, tonalOffsetLight);
     } else if (direction === 'dark') {
@@ -188,7 +334,7 @@ function getDefaultWarning(mode = 'light') {
   };
 }
 
-export default function createPalette(palette) {
+export default function createPalette(palette: PaletteOptions): Palette {
   const { mode = 'light', contrastThreshold = 3, tonalOffset = 0.2, ...other } = palette;
 
   const primary = palette.primary || getDefaultPrimary(mode);
@@ -201,7 +347,7 @@ export default function createPalette(palette) {
   // Use the same logic as
   // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
   // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
-  function getContrastText(background) {
+  function getContrastText(background: string) {
     const contrastText =
       getContrastRatio(background, dark.text.primary) >= contrastThreshold
         ? dark.text.primary
@@ -223,23 +369,32 @@ export default function createPalette(palette) {
     return contrastText;
   }
 
-  const augmentColor = ({ color, name, mainShade = 500, lightShade = 300, darkShade = 700 }) => {
-    color = { ...color };
-    if (!color.main && color[mainShade]) {
-      color.main = color[mainShade];
+  const augmentColor = ({
+    color,
+    name,
+    mainShade = 500,
+    lightShade = 300,
+    darkShade = 700,
+  }: PaletteAugmentColorOptions): PaletteColor => {
+    const colorInput = { ...color } as PaletteColor;
+
+    if (!colorInput.main && colorInput[mainShade as keyof typeof colorInput]) {
+      colorInput.main = colorInput[mainShade as keyof typeof colorInput] as string;
     }
 
-    if (!color.hasOwnProperty('main')) {
+    if (!colorInput.hasOwnProperty('main')) {
       throw /* minify-error */ new Error(
         `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` +
           `The color object needs to have a \`main\` property or a \`${mainShade}\` property.`,
       );
     }
 
-    if (typeof color.main !== 'string') {
+    if (typeof colorInput.main !== 'string') {
       throw /* minify-error */ new Error(
         `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` +
-          `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` +
+          `\`color.main\` should be a string, but \`${JSON.stringify(
+            colorInput.main,
+          )}\` was provided instead.\n` +
           '\n' +
           'Did you intend to use one of the following approaches?\n' +
           '\n' +
@@ -255,13 +410,13 @@ export default function createPalette(palette) {
       );
     }
 
-    addLightOrDark(color, 'light', lightShade, tonalOffset);
-    addLightOrDark(color, 'dark', darkShade, tonalOffset);
-    if (!color.contrastText) {
-      color.contrastText = getContrastText(color.main);
+    addLightOrDark(colorInput, 'light', lightShade, tonalOffset);
+    addLightOrDark(colorInput, 'dark', darkShade, tonalOffset);
+    if (!colorInput.contrastText) {
+      colorInput.contrastText = getContrastText(colorInput.main);
     }
 
-    return color;
+    return colorInput;
   };
 
   let modeHydrated;
@@ -318,7 +473,7 @@ export default function createPalette(palette) {
       ...modeHydrated,
     },
     other,
-  );
+  ) as Palette;
 
   return paletteOutput;
 }