Quasar Framework offers a wide selection of colors out of the box. You can use them both as Sass/SCSS variables in your CSS code or directly as CSS classes in your HTML templates.
Brand Colors
Most of the colors that Quasar Components use are strongly linked with these three colors that you can change. Choosing these colors is the first step one should take when differentiating the design of an App. You’ll notice immediately upon changing their default values that Quasar Components follow these colors as a guideline.
Color List
Here’s the list of colors provided out of the box. Within your app’s *.vue files you can use them as CSS classes (in HTML templates) or as Sass/SCSS variables in <style lang="..."> tags.
red
red-1
red-2
red-3
red-4
red-5
red-6
red-7
red-8
red-9
red-10
red-11
red-12
red-13
red-14
pink
pink-1
pink-2
pink-3
pink-4
pink-5
pink-6
pink-7
pink-8
pink-9
pink-10
pink-11
pink-12
pink-13
pink-14
purple
purple-1
purple-2
purple-3
purple-4
purple-5
purple-6
purple-7
purple-8
purple-9
purple-10
purple-11
purple-12
purple-13
purple-14
deep-purple
deep-purple-1
deep-purple-2
deep-purple-3
deep-purple-4
deep-purple-5
deep-purple-6
deep-purple-7
deep-purple-8
deep-purple-9
deep-purple-10
deep-purple-11
deep-purple-12
deep-purple-13
deep-purple-14
indigo
indigo-1
indigo-2
indigo-3
indigo-4
indigo-5
indigo-6
indigo-7
indigo-8
indigo-9
indigo-10
indigo-11
indigo-12
indigo-13
indigo-14
blue
blue-1
blue-2
blue-3
blue-4
blue-5
blue-6
blue-7
blue-8
blue-9
blue-10
blue-11
blue-12
blue-13
blue-14
light-blue
light-blue-1
light-blue-2
light-blue-3
light-blue-4
light-blue-5
light-blue-6
light-blue-7
light-blue-8
light-blue-9
light-blue-10
light-blue-11
light-blue-12
light-blue-13
light-blue-14
cyan
cyan-1
cyan-2
cyan-3
cyan-4
cyan-5
cyan-6
cyan-7
cyan-8
cyan-9
cyan-10
cyan-11
cyan-12
cyan-13
cyan-14
teal
teal-1
teal-2
teal-3
teal-4
teal-5
teal-6
teal-7
teal-8
teal-9
teal-10
teal-11
teal-12
teal-13
teal-14
green
green-1
green-2
green-3
green-4
green-5
green-6
green-7
green-8
green-9
green-10
green-11
green-12
green-13
green-14
light-green
light-green-1
light-green-2
light-green-3
light-green-4
light-green-5
light-green-6
light-green-7
light-green-8
light-green-9
light-green-10
light-green-11
light-green-12
light-green-13
light-green-14
lime
lime-1
lime-2
lime-3
lime-4
lime-5
lime-6
lime-7
lime-8
lime-9
lime-10
lime-11
lime-12
lime-13
lime-14
yellow
yellow-1
yellow-2
yellow-3
yellow-4
yellow-5
yellow-6
yellow-7
yellow-8
yellow-9
yellow-10
yellow-11
yellow-12
yellow-13
yellow-14
amber
amber-1
amber-2
amber-3
amber-4
amber-5
amber-6
amber-7
amber-8
amber-9
amber-10
amber-11
amber-12
amber-13
amber-14
orange
orange-1
orange-2
orange-3
orange-4
orange-5
orange-6
orange-7
orange-8
orange-9
orange-10
orange-11
orange-12
orange-13
orange-14
deep-orange
deep-orange-1
deep-orange-2
deep-orange-3
deep-orange-4
deep-orange-5
deep-orange-6
deep-orange-7
deep-orange-8
deep-orange-9
deep-orange-10
deep-orange-11
deep-orange-12
deep-orange-13
deep-orange-14
brown
brown-1
brown-2
brown-3
brown-4
brown-5
brown-6
brown-7
brown-8
brown-9
brown-10
brown-11
brown-12
brown-13
brown-14
grey
grey-1
grey-2
grey-3
grey-4
grey-5
grey-6
grey-7
grey-8
grey-9
grey-10
grey-11
grey-12
grey-13
grey-14
blue-grey
blue-grey-1
blue-grey-2
blue-grey-3
blue-grey-4
blue-grey-5
blue-grey-6
blue-grey-7
blue-grey-8
blue-grey-9
blue-grey-10
blue-grey-11
blue-grey-12
blue-grey-13
blue-grey-14