Skip to main content

Colours

You can customise your app’s colour scheme to match your brand colours. Alternatively, you can create an entirely new colour scheme using the Material Design colour palette.

Please visit theming for detailed information about all Material Design colours and how to customise theme colours.

Colour scheme

In Material Design, a primary colour refers to a colour that appears most frequently in your app. A secondary colour refers to a colour used to accent key parts of your UI.

Primary colour

A primary colour is the colour displayed most frequently across your app’s screens and components. To create contrast between elements, you can use lighter or darker tones of your primary colour. The contrast between lighter and darker tones helps show division.

Primary

.bg-primary #9c27b0
.bg-primary-dark #7b1fa2
.bg-primary-light #e1bee7

Secondary colour

A secondary colour is used to accent select parts of your UI. It can be analogous or complementary to your primary colour, but it should not simply be a light or dark variation of your primary colour. It should contrast with elements that surround it and be applied sparingly as an accent.

Secondary colours are best used for:

  • Buttons and floating action buttons
  • Headlines
  • Links
  • Progress bars
  • Selection controls and sliders
  • Text fields and text selection

Secondary

.bg-secondary #ff4081
.bg-secondary-dark #f50057
.bg-secondary-light #ff80ab

Dark and light theme

Themes let you apply a consistent tone to an app. The theme specifies the darkness of elements. To promote greater consistency between apps, dark and light themes are available to choose from.

.bg-dark-1 #000000
.bg-dark-2 #212121
.bg-dark-3 #303030
.bg-dark-4 #424242
.bg-light-1 #e0e0e0
.bg-light-2 #f5f5f5
.bg-light-3 #fafafa
.bg-light-4 #ffffff