Vuetify text color variants

class="red--text text--lighten-5"

from the docs

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

or you can inspect elements and pick up classes from there


You must use it this way:

<h2 class="red--text text--lighten-1">My Address</h2>

For darken-{n} and lighten-{n}, pre-pend text instead of appending it.

Actually there is even an example almost as exactly as yours in the documentation:

<template>
  <div>
    Lorem ipsum dolor sit amet, <strong class="red--text text--lighten-1">inciderint</strong> definitionem est ea, explicari prodesset eam id. Mazim doctus vix an. <span class="indigo--text text--darken-2">Amet causae probatus nec ex</span>.
  </div>
</template>

Demo here:

<h2 class="red--text text--lighten-1">My Address</h2>.
<h2 class="red--text text--lighten-2"> My Address</h2>.

and result is this:

enter image description here