The use of these colors is notsostraightforward.

Recorded herehttps://vuetifyjs.com/en/function/sass-variables/#webpack-installNoteRequires sass-loader@^7.0.0and change webpack configuration

You can also skip this if you import color variables in the component file (the number of../may vary)

@import '../../node_modules/vuetify/src/styles/settings/_colors.scss';

The next thing to remember is the structure of the object

Here is an excerpt

$red: () !default; $red: map-deep-merge( ( 'base': #F44336, 'lighten-5': #FFEBEE, 'lighten-4': #FFCDD2, 'lighten-3': #EF9A9A, 'lighten-2': #E57373, 'lighten-1': #EF5350, 'darken-1': #E53935, 'darken-2': #D32F2F, 'darken-3': #C62828, 'darken-4': #B71C1C, 'accent-1': #FF8A80, 'accent-2': #FF5252, 'accent-3': #FF1744, 'accent-4': #D50000 ), $red ); /* other colors... */ $colors: () !default; $colors: map-deep-merge( ( 'red': $red, 'pink': $pink, 'purple': $purple, 'deep-purple': $deep-purple, 'indigo': $indigo, 'blue': $blue, 'light-blue': $light-blue, 'cyan': $cyan, 'teal': $teal, 'green': $green, 'light-green': $light-green, 'lime': $lime, 'yellow': $yellow, 'amber': $amber, 'orange': $orange, 'deep-orange': $deep-orange, 'brown': $brown, 'blue-grey': $blue-grey, 'grey': $grey, 'shades': $shades ), $colors );

So colors don't map to strings, but to objects (seemap-deep-merge), so you can't use$redto give you the color value.

Instead, you can use themap-deep-getfunction to get the base red

.class{ background: map-deep-get($colors, "red", "base"); /* OR */ background: map-get($red, "base"); }

So it looks like this