#Colors

#Classes

Each color from the specification gets converted to a background and text variant for styling within your application through a class, e.g. <div class="bg-red"> or <span class="text-red">. These class colors are defined here.

Text colors also support darken and lighten variants using text-{color}-{lighten|darken}-{n}

#Javascript color pack

Vuetify has an optional javascript color pack that you can import and use within your application. This can also be used to help define your application’s theme.

import { createVuetify } from 'vuetify'

import colors from 'vuetify/lib/util/colors'

export default createVuetify({
  theme: {
    themes: {
      light: {
        dark: false,
        colors: {
          primary: colors.red.darken1, // #E53935
          secondary: colors.red.lighten4, // #FFCDD2
          ...
        }
      },
    },
  },
})

#Sass color pack

While convenient, the color pack increases the CSS export size by ~30kb. Some projects may only require the classes that are created at runtime from the Vuetify theme system. To disable the color pack feature, follow sass variablesand set $color-pack: false.

@use 'vuetify' with (
  $color-pack: false,
);

#Material colors

Below is a list of the Material design color palette grouped by primary color