Included with Vuetify is the entire Material Design color library. These color classes drastically help the prototyping phase or make the need for additional color declaration not needed.


You can change a background or text color by adding a class to the element. For background, use just the name, for example, <div class="red">. To use a shade, just add the modifying type, such as, darken-3. Text is very similar, adding a modification class, red--text, you can change the color of text, or change the type with adding text--lighten-2. For some elements like the v-badge, you can use the --after type for the background, <span class="green--after" v-badge:5>.
These colors are also available as javascript variables, just import colors from 'vuetify/es5/util/colors'


red lighten-4
red lighten-3
red lighten-2
red lighten-1
red darken-1
red darken-2
red darken-3
red darken-4
red accent-1
red accent-2
red accent-3
red accent-4


pink lighten-4
pink lighten-3
pink lighten-2
pink lighten-1
pink darken-1
pink darken-2
pink darken-3
pink darken-4
pink accent-1
pink accent-2
pink accent-3
pink accent-4


purple lighten-4
purple lighten-3
purple lighten-2
purple lighten-1
purple darken-1
purple darken-2
purple darken-3
purple darken-4
purple accent-1
purple accent-2
purple accent-3
purple accent-4


deep-purple lighten-4
deep-purple lighten-3
deep-purple lighten-2
deep-purple lighten-1
deep-purple darken-1
deep-purple darken-2
deep-purple darken-3
deep-purple darken-4
deep-purple accent-1
deep-purple accent-2
deep-purple accent-3
deep-purple accent-4


indigo lighten-4
indigo lighten-3
indigo lighten-2
indigo lighten-1
indigo darken-1
indigo darken-2
indigo darken-3
indigo darken-4
indigo accent-1
indigo accent-2
indigo accent-3
indigo accent-4


blue lighten-4
blue lighten-3
blue lighten-2
blue lighten-1
blue darken-1
blue darken-2
blue darken-3
blue darken-4
blue accent-1
blue accent-2
blue accent-3
blue accent-4


light-blue lighten-4
light-blue lighten-3
light-blue lighten-2
light-blue lighten-1
light-blue darken-1
light-blue darken-2
light-blue darken-3
light-blue darken-4
light-blue accent-1
light-blue accent-2
light-blue accent-3
light-blue accent-4


cyan lighten-4
cyan lighten-3
cyan lighten-2
cyan lighten-1
cyan darken-1
cyan darken-2
cyan darken-3
cyan darken-4
cyan accent-1
cyan accent-2
cyan accent-3
cyan accent-4


teal lighten-4
teal lighten-3
teal lighten-2
teal lighten-1
teal darken-1
teal darken-2
teal darken-3
teal darken-4
teal accent-1
teal accent-2
teal accent-3
teal accent-4


green lighten-4
green lighten-3
green lighten-2
green lighten-1
green darken-1
green darken-2
green darken-3
green darken-4
green accent-1
green accent-2
green accent-3
green accent-4


light-green lighten-4
light-green lighten-3
light-green lighten-2
light-green lighten-1
light-green darken-1
light-green darken-2
light-green darken-3
light-green darken-4
light-green accent-1
light-green accent-2
light-green accent-3
light-green accent-4


lime lighten-4
lime lighten-3
lime lighten-2
lime lighten-1
lime darken-1
lime darken-2
lime darken-3
lime darken-4
lime accent-1
lime accent-2
lime accent-3
lime accent-4


yellow lighten-4
yellow lighten-3
yellow lighten-2
yellow lighten-1
yellow darken-1
yellow darken-2
yellow darken-3
yellow darken-4
yellow accent-1
yellow accent-2
yellow accent-3
yellow accent-4


amber lighten-4
amber lighten-3
amber lighten-2
amber lighten-1
amber darken-1
amber darken-2
amber darken-3
amber darken-4
amber accent-1
amber accent-2
amber accent-3
amber accent-4


orange lighten-4
orange lighten-3
orange lighten-2
orange lighten-1
orange darken-1
orange darken-2
orange darken-3
orange darken-4
orange accent-1
orange accent-2
orange accent-3
orange accent-4


deep-orange lighten-4
deep-orange lighten-3
deep-orange lighten-2
deep-orange lighten-1
deep-orange darken-1
deep-orange darken-2
deep-orange darken-3
deep-orange darken-4
deep-orange accent-1
deep-orange accent-2
deep-orange accent-3
deep-orange accent-4


brown lighten-4
brown lighten-3
brown lighten-2
brown lighten-1
brown darken-1
brown darken-2
brown darken-3
brown darken-4


blue-grey lighten-4
blue-grey lighten-3
blue-grey lighten-2
blue-grey lighten-1
blue-grey darken-1
blue-grey darken-2
blue-grey darken-3
blue-grey darken-4


grey lighten-4
grey lighten-3
grey lighten-2
grey lighten-1
grey darken-1
grey darken-2
grey darken-3
grey darken-4

Color Pack

Vuetify comes pre-built with a Material Design Color Pack (thanks Materialize.css) by default. While convenient, this also increases the css export size by ~30kb. This can be disabled in both the webpack and webpack-ssr Vue cli templates.
Navigate to src/App.vue. Scroll to the style element and set $color-pack = false above the Vuetify css import.
Navigate to src/stylus/main.styl. At the top of the file, declare $color-pack = false.