How to translate Vuetify's material design color names into hexadecimal values in a Vue component?

Question

I would like to get a Vuetify material design color as a hexadecimal value in my Vue component's template so I can do something like this below to get, say, the string #FFD54F:

<div :style="`border: 5px solid ${ myHexadecimalColor('amber lighten-2') }`">
</div>

I read the Vuetify docs' SASS Variables and Colors sections, but I could not determine a solution from this.

I can see the colors defined in Vuetify's github repo @ vuetify/packages/vuetify/src/styles/settings/_colors.scss, but I can't figure out how to get access to these Sass variables in my Vue single file component.

Does anyone know the best way to translate a Vuetify material design color name into its hexadecimal values?

---

Bonus - Vuetify 2 name-to-hexidecimal function

Based on Boussadjra Brahim's answer, I wrote a quick color-name-to-hexadecimal method to put in a Vue mixin, and included it below in case it is helpful to anyone.

Example: hexColor('amber lighten-2') returns #FFD54F

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

methods: {
  hexColor: (name) => {
    const [nameFamily, nameModifier] = name.split(' ')
    const shades = ['black', 'white', 'transparent']
    const util = {family: null, modifier: null}
    if (shades.find(shade => shade === nameFamily)){
      util.family = 'shades'
      util.modifier = nameFamily
    } else {
      const [firstWord, secondWord] = nameFamily.split('-')
      util.family = `${ firstWord }${ secondWord
        ? secondWord.charAt(0).toUpperCase() + secondWord.slice(1)
        : '' }`
      util.modifier = nameModifier 
        ? nameModifier.replace('-', '') 
        : 'base'
    }
    return colors[util.family][util.modifier]
  }
}

---

Update - Vuetify 3 name-to-hexidecimal function

Here's a version of hexColor() for Vuetify 3. This is necessary because color names have changed from e.g. blue lighten-2 to blue-lighten-2

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

hexColor: (name) => {
  const baseColors = ['red','pink','purple','deep-purple','indigo','blue','light-blue','cyan','teal','green','light-green','lime','yellow','amber','orange','deep-orange','brown','blue-grey','grey']
  const shades = ['black', 'white', 'transparent']
  const match = [...baseColors,...shades].find(c => name.startsWith(c)) || null
  const remainder = match 
    ? name.slice(match.length) 
    : null
  const base = match.replace(/[-_](.)/g, (_, char) => char.toUpperCase());
  const variety = remainder 
    ? remainder.replaceAll('-','')
    : 'base'
  const nameStructured = shades.find(shade => match === shade) 
    ? { base:'shades', variety:base}
    : { base:base, variety:variety}
  return colors[nameStructured.base][nameStructured.variety]
}

Answer 1

Import the colors into your component then access the color with it modifier like :

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

....

<div :style="`border: 5px solid ${ colors['amber']['lighten2'] }`"></div>