Color Palette
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.
Loading Brand API...
Configuration
Quasar CLI
Vite plugin / Vue CLI
UMD
// quasar.config filereturn { framework: { config: { brand: /* look at QuasarConfOptions from the API card */ } }}content_paste
Brand Colors
Most of the colors that Quasar Components use are strongly linked with these eight 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
dark
positive
negative
info
warning
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 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>content_paste
Using Sass/SCSS Variables
In your app’s *.vue files you can use the colors as $primary, $red-1, and so on.
<!-- Notice lang="sass" --><style lang="sass">div color: $red-1 background-color: $grey-5</style>content_paste
<!-- Notice lang="scss" --><style lang="scss">div { color: $red-1; background-color: $grey-5;}</style>content_paste
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 !important;}.bg-brand { background: #a2aa33 !important;}content_paste
Now we can use this color for Quasar components:
<q-btn color="brand" ... />content_paste
You can access a custom color value (hex string) in JS context with the getPaletteColor util.
Dynamic Change of Brand Colors (Dynamic Theme Colors)
How it works
You can dynamically customize the brand colors during run-time: primary, secondary, accent, dark, 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-${name} (example: --q-primary, --q-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) on MDN.
Util: setCssVar
Quasar offers a helper function for setting Quasar CSS variables that can be used for the brand colors too: setCssVar(colorName, colorValue[, element])
| Parameter | Type | Required | Description |
|---|---|---|---|
colorName | String | Yes | One of primary, secondary, accent, dark, positive, negative, info, warning |
colorValue | String | Yes | Valid CSS color value |
element | Element | - | (Default: document.body) Element where the custom property will be set. |
Example of setting brand colors using the helper:
import { setCssVar } from 'quasar'setCssVar('light', '#DDD')setCssVar('primary', '#33F')setCssVar('primary', '#F33', document.getElementById('rebranded-section-id'))content_paste
Example of setting brand colors using vanilla JavaScript:
// equivalent of setCssVar('primary') in raw JavaScript:document.body.style.setProperty('--q-primary', '#0273d4')content_paste
Util: getCssVar
Quasar offers a helper function for getting the value of Quasar CSS variables that can be used for brand colors too: getCssVar(colorName[, element])
| Parameter | Type | Required | Description |
|---|---|---|---|
colorName | String | Yes | One of primary, secondary, accent, dark, positive, negative, info, warning |
element | Element | - | (Default: document.body) Element where the custom property will be read. |
Example of getting brand colors using the helper:
import { getCssVar } from 'quasar'getCssVar('primary') // '#33F'getCssVar('primary', document.getElementById('rebranded-section-id'))content_paste
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 getCssVar('primary') in raw JavaScript:getComputedStyle(document.documentElement) .getPropertyValue('--q-primary') // #0273d4content_paste
More color utils
Besides the utils above, we also have a dedicated section in docs for handling colors that you might be interested in: Color utils.
import { colors, setCssVar } from 'quasar'const { lighten } = colorsconst newPrimaryColor = '#933'setCssVar('primary', newPrimaryColor)setCssVar('primary-darkened', lighten(newPrimaryColor, -10))content_paste
Setting Up Defaults
You can set up some brand colors without tampering with the Sass/SCSS variables.
See the Configuration section above for setting it during initial configuration for Quasar CLI, Vite plugin/Vue CLI, and UMD projects.
If you are using Quasar CLI, you can also use a @quasar/app-vite Boot File or a @quasar/app-webpack Boot File. This is especially useful if you want to change the colors dynamically at initial load time, perhaps after fetching them from an API.
/src/boot/brand-colors.js - or any other name
import { setCssVar } from 'quasar'import { boot } from 'quasar/wrappers'export default boot(() => { setCssVar('primary', '#ff0000')})content_paste
If using SSR mode, disable this boot file when running on server-side:
/quasar.config file
boot: [ { server: false, path: 'brand-colors' }, // or the name you gave it // ...],content_paste
Ready for more?
Caught a mistake?
Edit this page in browser