Colors

Mantine uses open-color in default theme with some additions. Each color has 10 shades.

Colors are exposed on the theme object as an array of strings, you can access color shade by color name and index (0-9), colors with larger index are darker:

import { useMantineTheme } from '@mantine/core';

function Demo() {
  const theme = useMantineTheme();

  return (
    <div
      style={{
        backgroundColor: theme.colors.blue[1],
        color: theme.colors.blue[9],
      }}
    >
      This is a blue theme
    </div>
  );
}

Colors are also exposed as CSS variables:

.demo {
  color: var(--mantine-color-red-5);
  background: var(--mantine-color-grape-9);
  border: rem(1px) solid var(--mantine-color-blue-1);
}

Adding extra colors

You can add any number of extra colors to theme.colors object. This will allow you to use them in all components that support color prop, for example Button, Badge and Switch.

import { Group, Button, MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  colors: {
    'ocean-blue': ['#7AD1DD', '#5FCCDB', '#44CADC', '#2AC9DE', '#1AC2D9', '#11B7CD', '#09ADC3', '#0E99AC', '#128797', '#147885'],
    'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button color="ocean-blue">Ocean blue button</Button>
        <Button color="bright-pink" variant="filled">
          Bright pink button
        </Button>
      </Group>
    </MantineProvider>
  );
}

10 shades per color

Colors override must include at least 10 shades per color. Otherwise, you will get a TypeScript error and some variants will not have proper colors. If you only have one color value, you can either pick the remaining colors manually or use the colors generator tool.

You can add more than 10 shades per color: these values will not be used by Mantine components with the default colors resolver, but you can still reference them by index, for example, color="blue.11".

Virtual color is a special color which values should be different for light and dark color schemes. To define a virtual color, use virtualColor function which accepts an object with the following properties as a single argument:

name – color name, must be the same as the key in theme.colors object
light – a key of theme.colors object for light color scheme
dark – a key of theme.colors object for dark color scheme

To see the demo in action, switch between light and dark color schemes (Ctrl + J):

This box has virtual background color, it is pink in dark mode and cyan in light mode

import { createTheme, MantineProvider, virtualColor } from '@mantine/core';

const theme = createTheme({
  colors: {
    primary: virtualColor({
      name: 'primary',
      dark: 'pink',
      light: 'cyan',
    }),
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}

colorsTuple

Use colorsTuple function to:

Use single color as the same color for all shades
Transform dynamic string arrays to Mantine color tuple (the array should still have 10 values)

import { colorsTuple, createTheme } from '@mantine/core';

const theme = createTheme({
  colors: {
    custom: colorsTuple('#FFC0CB'),
    dynamic: colorsTuple(
      Array.from({ length: 10 }, (_, index) => '#FFC0CB')
    ),
  },
});

Supported color formats

You can use the following color formats in theme.colors:

HEX: #fff, #ffffff
RGB: rgb(255, 255, 255), rgba(255, 255, 255, 0.5)
HSL: hsl(0, 0%, 100%), hsla(0, 0%, 100%, 0.5)
OKLCH: oklch(96.27% 0.0217 238.66), oklch(96.27% 0.0217 238.66 / 0.5)

Example of adding oklch color to theme:

import { MantineProvider, createTheme, Group, Button } from '@mantine/core';

const theme = createTheme({
  colors: {
    'oklch-blue': [
      'oklch(96.27% 0.0217 238.66)',
      'oklch(92.66% 0.0429 240.01)',
      'oklch(86.02% 0.0827 241.66)',
      'oklch(78.2% 0.13 243.83)',
      'oklch(71.8% 0.1686 246.06)',
      'oklch(66.89% 0.1986 248.32)',
      'oklch(62.59% 0.2247 250.29)',
      'oklch(58.56% 0.2209 251.26)',
      'oklch(54.26% 0.2067 251.67)',
      'oklch(49.72% 0.1888 251.59)',
    ],
  }
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button color="oklch-blue">Filled</Button>
        <Button color="oklch-blue" variant="outline">
          Outline
        </Button>
        <Button color="oklch-blue" variant="light">
          Light
        </Button>
      </Group>
    </MantineProvider>
  );
}

primaryColor

theme.primaryColor is a key of theme.colors, it is used:

As a default value for most of the components that support color prop
To set default focus ring outline color

import { Group, Button, MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  primaryColor: 'bright-pink',
  colors: {
    'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button>Primary button</Button>
        <Button color="blue">Blue button</Button>
      </Group>
    </MantineProvider>
  );
}

CSS color values at theme.primaryColor

Value of theme.primaryColor must be a key of theme.colors object. For example, blue, orange or green. You cannot assign CSS color values, for example, the following code will throw an error during theme merging:
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        primaryColor: '#CEFEDC', // This will throw an error
      }}
    >
      {/* Your app here */}
    </MantineProvider>
  );
}

primaryShade

theme.primaryShade is a number from 0 to 9. It determines which shade will be used for the components that have color prop.

Primary shade

import { MantineProvider, Button, Group } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{ primaryShade: 6 }}>
      <Group>
        <Button>Filled</Button>
        <Button variant="light">Light</Button>
        <Button variant="outline">Outline</Button>
      </Group>
    </MantineProvider>
  );
}

You can also customize primary shade for dark and light color schemes separately:

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{ primaryShade: { light: 6, dark: 8 } }}>
      {/* Your app here */}
    </MantineProvider>
  );
}

Color prop

Components that support changing their color have color prop. This prop supports the following values:

Key of theme.colors, for example, blue or green
Key of theme.colors with color index, for example, blue.5 or green.9
CSS color value, for example, #fff or rgba(0, 0, 0, 0.5)

Filled variant

Light variant

Outline variant

import { Group, Button, Text } from '@mantine/core';

function Demo() {
  return (
    <>
      <Text size="sm" mb={5} fw={500}>
        Filled variant
      </Text>
      <Group>
        <Button color="cyan">Theme color</Button>
        <Button color="#1D72FE">Hex color</Button>
      </Group>

      <Text size="sm" mb={5} mt="md" fw={500}>
        Light variant
      </Text>
      <Group>
        <Button variant="light" color="cyan">
          Theme color
        </Button>
        <Button variant="light" color="#1D72FE">
          Hex color
        </Button>
      </Group>

      <Text size="sm" mb={5} mt="md" fw={500}>
        Outline variant
      </Text>
      <Group>
        <Button variant="outline" color="cyan">
          Theme color
        </Button>
        <Button variant="outline" color="#1D72FE">
          Hex color
        </Button>
      </Group>
    </>
  );
}

Colors index reference

You can reference colors by index in color prop and style props, for example c prop:

Text with blue.6 color

Index

import { Button, Text } from '@mantine/core';

function Demo() {
  return (
    <>
      <Text c="blue.6">Text with blue.6 color</Text>
      <Button color="cyan.6">Button</Button>
    </>
  );
}

Difference between color and c props

color prop is used to control multiple CSS properties of the component. These properties can vary across different components, but usually color prop controls background, color and border-color CSS properties. For example, when you set color="#C3FF36" on Button component (with variant="filled"), it will set the following CSS properties:

background-color to #C3FF36
background-color when button is hovered to #B0E631 (#C3FF36 darkened by 10%)
color to var(--mantine-color-white)
border-color to transparent

c is a style prop – it is responsible for setting a single CSS property color (color of the text). You can combine both props to achieve better contrast between text and background. In the following example:

color prop sets all background: #C3FF36 and color: var(--mantine-color-white)
c prop overrides color styles to color: var(--mantine-color-black)

import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button color="#C3FF36" c="black">
      Button with color and c props
    </Button>
  );
}

Colors variant resolver

theme.variantColorResolver is a function that is used to determine which colors will be used in different variants in the following components: Alert, Avatar, Button, Badge and ActionIcon.

It accepts an object argument with the following properties:

interface VariantColorsResolverInput {
  /** `color` prop passed to component */
  color: MantineColor | undefined;

  /** `variant` prop passed to component */
  variant: string;

  /** `gradient` prop passed to component, used only for gradient variant by default */
  gradient?: MantineGradient;

  /** Theme object */
  theme: MantineTheme;
}

theme.variantColorResolver must return an object with the following properties:

interface VariantColorResolverResult {
  background: string;
  hover: string;
  color: string;
  border: string;
}

You can use theme.variantColorResolver to customize colors handling by default variants or to add new variants support:

import {
  Button,
  Group,
  MantineProvider,
  defaultVariantColorsResolver,
  VariantColorsResolver,
  parseThemeColor,
  rem,
  rgba,
  darken,
} from '@mantine/core';

const variantColorResolver: VariantColorsResolver = (input) => {
  const defaultResolvedColors = defaultVariantColorsResolver(input);
  const parsedColor = parseThemeColor({
    color: input.color || input.theme.primaryColor,
    theme: input.theme,
  });

  // Override some properties for variant
  if (parsedColor.isThemeColor && parsedColor.color === 'lime' && input.variant === 'filled') {
    return {
      ...defaultResolvedColors,
      color: 'var(--mantine-color-black)',
      hoverColor: 'var(--mantine-color-black)',
    };
  }

  // Completely override variant
  if (input.variant === 'light') {
    return {
      background: rgba(parsedColor.value, 0.1),
      hover: rgba(parsedColor.value, 0.15),
      border: `${rem(1)} solid ${parsedColor.value}`,
      color: darken(parsedColor.value, 0.1),
    };
  }

  // Add new variants support
  if (input.variant === 'danger') {
    return {
      background: 'var(--mantine-color-red-9)',
      hover: 'var(--mantine-color-red-8)',
      color: 'var(--mantine-color-white)',
      border: 'none',
    };
  }

  return defaultResolvedColors;
};

function Demo() {
  return (
    <MantineProvider theme={{ variantColorResolver }}>
      <Group>
        <Button color="lime.4" variant="filled">
          Lime filled button
        </Button>

        <Button color="orange" variant="light">
          Orange light button
        </Button>

        <Button variant="danger">Danger button</Button>
      </Group>
    </MantineProvider>
  );
}

Colors generation

You can use colors generator to generate 10 shades of color based on a single value or install @mantine/colors-generator package to generate dynamic colors in your application:

yarn add chroma-js @mantine/colors-generator

The package exports generateColors function that accepts a color value and returns an array of 10 shades. Note that generateColors function works best with darker colors (blue, violet, red) and may produce colors with poor contrast for lighter colors (yellow, teal, orange). Usually, it is better to generate colors in advance to avoid contrast issues.

import { generateColors } from '@mantine/colors-generator';
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        colors: {
          'pale-blue': generateColors('#375EAC'),
        },
      }}
    >
      {/* Your app here */}
    </MantineProvider>
  );
}

Default colors

dark 0

#C9C9C9

dark 1

#b8b8b8

dark 2

#828282

dark 3

#696969

dark 4

#424242

dark 5

#3b3b3b

dark 6

#2e2e2e

dark 7

#242424

dark 8

#1f1f1f

dark 9

#141414

gray 0

#f8f9fa

gray 1

#f1f3f5

gray 2

#e9ecef

gray 3

#dee2e6

gray 4

#ced4da

gray 5

#adb5bd

gray 6

#868e96

gray 7

#495057

gray 8

#343a40

gray 9

#212529

red 0

#fff5f5

red 1

#ffe3e3

red 2

#ffc9c9

red 3

#ffa8a8

red 4

#ff8787

red 5

#ff6b6b

red 6

#fa5252

red 7

#f03e3e

red 8

#e03131

red 9

#c92a2a

pink 0

#fff0f6

pink 1

#ffdeeb

pink 2

#fcc2d7

pink 3

#faa2c1

pink 4

#f783ac

pink 5

#f06595

pink 6

#e64980

pink 7

#d6336c

pink 8

#c2255c

pink 9

#a61e4d

grape 0

#f8f0fc

grape 1

#f3d9fa

grape 2

#eebefa

grape 3

#e599f7

grape 4

#da77f2

grape 5

#cc5de8

grape 6

#be4bdb

grape 7

#ae3ec9

grape 8

#9c36b5

grape 9

#862e9c

violet 0

#f3f0ff

violet 1

#e5dbff

violet 2

#d0bfff

violet 3

#b197fc

violet 4

#9775fa

violet 5

#845ef7

violet 6

#7950f2

violet 7

#7048e8

violet 8

#6741d9

violet 9

#5f3dc4

indigo 0

#edf2ff

indigo 1

#dbe4ff

indigo 2

#bac8ff

indigo 3

#91a7ff

indigo 4

#748ffc

indigo 5

#5c7cfa

indigo 6

#4c6ef5

indigo 7

#4263eb

indigo 8

#3b5bdb

indigo 9

#364fc7

blue 0

#e7f5ff

blue 1

#d0ebff

blue 2

#a5d8ff

blue 3

#74c0fc

blue 4

#4dabf7

blue 5

#339af0

blue 6

#228be6

blue 7

#1c7ed6

blue 8

#1971c2

blue 9

#1864ab

cyan 0

#e3fafc

cyan 1

#c5f6fa

cyan 2

#99e9f2

cyan 3

#66d9e8

cyan 4

#3bc9db

cyan 5

#22b8cf

cyan 6

#15aabf

cyan 7

#1098ad

cyan 8

#0c8599

cyan 9

#0b7285

teal 0

#e6fcf5

teal 1

#c3fae8

teal 2

#96f2d7

teal 3

#63e6be

teal 4

#38d9a9

teal 5

#20c997

teal 6

#12b886

teal 7

#0ca678

teal 8

#099268

teal 9

#087f5b

green 0

#ebfbee

green 1

#d3f9d8

green 2

#b2f2bb

green 3

#8ce99a

green 4

#69db7c

green 5

#51cf66

green 6

#40c057

green 7

#37b24d

green 8

#2f9e44

green 9

#2b8a3e

lime 0

#f4fce3

lime 1

#e9fac8

lime 2

#d8f5a2

lime 3

#c0eb75

lime 4

#a9e34b

lime 5

#94d82d

lime 6

#82c91e

lime 7

#74b816

lime 8

#66a80f

lime 9

#5c940d

yellow 0

#fff9db

yellow 1

#fff3bf

yellow 2

#ffec99

yellow 3

#ffe066

yellow 4

#ffd43b

yellow 5

#fcc419

yellow 6

#fab005

yellow 7

#f59f00

yellow 8

#f08c00

yellow 9

#e67700

orange 0

#fff4e6

orange 1

#ffe8cc

orange 2

#ffd8a8

orange 3

#ffc078

orange 4

#ffa94d

orange 5

#ff922b

orange 6

#fd7e14

orange 7

#f76707

orange 8

#e8590c

orange 9

#d9480f

Add custom colors types

TypeScript will only autocomplete Mantine's default colors when accessing the theme. To add your custom colors to the MantineColor type, you can use TypeScript module declaration.

import {
  DefaultMantineColor,
  MantineColorsTuple,
} from '@mantine/core';

type ExtendedCustomColors =
  | 'primaryColorName'
  | 'secondaryColorName'
  | DefaultMantineColor;

declare module '@mantine/core' {
  export interface MantineThemeColorsOverride {
    colors: Record<ExtendedCustomColors, MantineColorsTuple>;
  }
}

Theme object

Color schemes

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on X Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on X