Color Palette

Quasar Framework offers a wide selection of colors out of the box. You can use them both as Sass/SCSS/Stylus 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.

primary
secondary
accent
positive
negative
info
warning

TIP

Also check Theme Builder for a tool on customizing the brand colors of your website/app.

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 or as Stylus 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

Using as CSS Classes

Use text- or bg- prefixes as class names to change the color of text or the color of the background.

<!-- changing text color -->
<p class="text-primary">....</p>

<!-- changing background color -->
<p class="bg-positive">...</p>

Using Sass/SCSS/Stylus Variables

In your app’s *.vue files you can use the colors as $primary, $red-1, and so on. Note that for Sass/SCSS you will need “@quasar/app” v1.1.0+ AND Quasar v1.1.1+.

<!-- Notice lang="sass" -->
<style lang="sass">
div
  color: $red-1
  background-color: $grey-5
</style>
<!-- Notice lang="scss" -->
<style lang="scss">
div {
  color: $red-1;
  background-color: $grey-5;
}
</style>
<!-- Notice lang="stylus" -->
<style lang="stylus">
div
  color $red-1
  background-color $grey-5
</style>

Adding Your Own Colors

If you want to use your own colors for your components (let’s say we are adding a color named “brand”) all you need to do is add the following CSS into your app:

.text-brand {
  color: #a2aa33;
}
.bg-brand {
  background: #a2aa33;
}

Now we can use this color for Quasar components:

<q-btn color="brand" ... />

Dynamic Change of Brand Colors (Dynamic Theme Colors)

WARNING

This is only supported on browsers that support CSS Variables (Custom Properties). It is not going to work on IE11, but it will fall back to the brand colors from the CSS theme.

You can dynamically customize the brand colors during run-time: primary, secondary, accent, positive, negative, info, warning. That means you can have one build of your application with a default color theme but show it with a runtime selected one.

The main color configuration is done using CSS custom properties, stored on the root element (:root). Each property has a name of --q-color-${name} (example: --q-color-primary, --q-color-secondary) and should have a valid CSS color as value.

The CSS Custom properties use the same inheritance rules as normal CSS, so you can only redefine your desired colors and the rest will be inherited from the parent elements.

The recommended workflow is to set your customized color properties on the html (document.documentElement) or body (document.body) elements. This will allow you to revert to the default color by just deleting your custom one.

More info on CSS custom properties (variables): https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Helper - setBrand

Quasar offers a helper function for setting custom colors in the colors utils: setBrand(colorName, colorValue[, element])

ParameterTypeRequiredDescription
colorNameStringYesOne of primary, secondary, accent, positive, negative, info, warning
colorValueStringYesValid CSS color value
elementElement-(Default: document.body) Element where the custom property will be set.

Example of setting brand colors using the helper:

import { colors } from 'quasar'

colors.setBrand('light', '#DDD')
colors.setBrand('primary', '#33F')
colors.setBrand('primary', '#F33', document.getElementById('rebranded-section-id'))

WARNING

The helper function will also take care of setting dependent custom properties for the brand colors, so this is the recommended way of usage instead of the raw Javascript setProperty().

Helper - getBrand

Quasar offers a helper function for setting custom colors in the colors utils: getBrand(colorName[, element])

ParameterTypeRequiredDescription
colorNameStringYesOne of primary, secondary, accent, positive, negative, info, warning
elementElement-(Default: document.body) Element where the custom property will be read.

Example of getting brand colors using the helper:

import { colors } from 'quasar'

colors.getBrand('primary') // '#33F'
colors.getBrand('primary', document.getElementById('rebranded-section-id'))

What this helper does is wrap the raw Javascript getPropertyValue() and it’s available for convenience. Here is an example of equivalent vanilla Javascript:

// equivalent of colors.getBrand('primary') in raw Javascript:

getComputedStyle(document.documentElement)
  .getPropertyValue('--q-color-primary') // #0273d4

Setting Up Defaults

WARNING

Not supported by IE11

Should you wish to set up some brand colors without tampering with the Stylus variables, you can do so in quasar.conf.js:

// quasar.conf.js
return {
  framework: {
    config: {
      brand: {
        primary: '#ff0000',
        // ...
      }
    }
  }
}

This is especially useful when you use the Quasar UMD version, where you would place the global quasarConfig Object before your Quasar script tag.

// for Quasar UMD
<script>
  // optional
  window.quasarConfig = {
    brand: {
      primary: '#ff0000',
      // ...
    }
  }
</script>