Color Palette - Material Tailwind

@material-tailwind/react has two color palettes one is the color palette used for light mode and the other is the color palette used for dark mode. Both color palettes are using the same colors as the ones used in Tailwind CSS.

Both color palettes has 9 different colors for different purposes like background, foreground, surface, primary, secondary, info, success, warning and error. Each color has 4 different shades like DEFAULT, light, dark and foreground.

Below you can check all the colors, their shades and their hex color code.

Light Mode Color Palette

Background

default

#ffffff

Foreground

default

#374151

Black

default

#030712

White

default

#ffffff

Surface

default

#e5e7eb

dark

#d1d5db

light

#f3f4f6

foreground

#030712

Primary

default

#6028ff

dark

#5216eb

light

#724dff

foreground

#f9fafb

Secondary

default

#e5e7eb

dark

#d1d5db

light

#f3f4f6

foreground

#030712

Info

default

#0062ff

dark

#0055dd

light

#007aff

foreground

#f9fafb

Success

default

#00bf6b

dark

#00a35f

light

#02e585

foreground

#f9fafb

Warning

default

#fca327

dark

#f67d0a

light

#fdba4c

foreground

#f9fafb

Error

default

#ef4444

dark

#dc2626

light

#f87171

foreground

#f9fafb

Dark Mode Color Palette

Background

default

#030712

Foreground

default

#9ca3af

Black

default

#030712

White

default

#ffffff

Surface

default

#1f2937

dark

#111827

light

#374151

foreground

#f9fafb

Primary

default

#6028ff

dark

#5216eb

light

#724dff

foreground

#f9fafb

Secondary

default

#1f2937

dark

#111827

light

#374151

foreground

#f9fafb

Info

default

#0062ff

dark

#0055dd

light

#007aff

foreground

#f9fafb

Success

default

#00bf6b

dark

#00a35f

light

#02e585

foreground

#f9fafb

Warning

default

#fca327

dark

#f67d0a

light

#fdba4c

foreground

#f9fafb

Error

default

#ef4444

dark

#dc2626

light

#f87171

foreground

#f9fafb

Types Definition

Colors

export interface Colors {
  background?: `#${string}`;
  foreground?: `#${string}`;
  black?: `#${string}`;
  white?: `#${string}`;
  surface?: Color;
  primary?: Color;
  secondary?: Color;
  info?: Color;
  success?: Color;
  warning?: Color;
  error?: Color;
}
export interface Colors {
  background?: `#${string}`;
  foreground?: `#${string}`;
  black?: `#${string}`;
  white?: `#${string}`;
  surface?: Color;
  primary?: Color;
  secondary?: Color;
  info?: Color;
  success?: Color;
  warning?: Color;
  error?: Color;
}

Color

export interface Color {
  default?: `#${string}`;
  dark?: `#${string}`;
  light?: `#${string}`;
  foreground?: `#${string}`;
}
export interface Color {
  default?: `#${string}`;
  dark?: `#${string}`;
  light?: `#${string}`;
  foreground?: `#${string}`;
}