Colour Palettes for Your Next Idea


The colour system considers how colour schemes can change when user inputs change. The reasoning of tonal relationships and changes in hue and chroma make it possible to use colours differently. Colour schemes are more like a group of related tones that work well together than a set of fixed numbers.

The foundation of a colour scheme is the set of five key colours that individually relate to separate tonal palettes with 13 tones. Specific tones from each tonal palette are assigned to colour roles across a UI (user interface). 

Key colours are the foundation for creating any dynamic colour scheme. With key colours established, Material’s algorithm specifies the colours for expressing interaction states, errors, and accessible contrast.  

Neutral hues

The neutral key colour is used to figure out the surface colours for backgrounds and the colours for text and icons that need to stand out.

The neutral variant key colour is used to figure out the colour roles for things like text, icons, and component outlines with a medium focus.

One main colour turns into thirteen shades

A tonal range has thirteen colours: white, black, and grey. A tone number of 100 means that the amount of light is at its highest, which is white. The amount of light in a colour is shown by a tone number between 0 and 100.

Each key accent colour (primary, secondary, and tertiary) is provided as a group of 4 compatible colours with different tones that can be applied for differing emphasis and visual expression and paired for visual contrast.

Accent colours: Primary, secondary, and tertiary roles are formed following the same pattern of a 4-color group.

  • Primary base colour

  • On-primary is applied to content (icons, text, etc.) that sits on top of the primary.

  • Primary container is applied to elements needing less emphasis than primary.

  • The on-primary container is applied to content (icons, text, etc.) on top of the primary container.

Neutral key colours are to provide similar groups of colours for Surfaces and Outlines.

Text on coloured backgrounds

Black text is recommended for use on light backgrounds and white text on dark backgrounds. If your app has both light and dark themes, make…

Black text is recommended for use on light backgrounds and white text on dark backgrounds. If your logo has light and dark themes, make sure the text is available in contrasting colours against each theme.

Coloured backgrounds or typography also change the rules regarding text opacity and different text states.

Colored text and backgrounds

Colored text should be used sparingly to draw attention and apply selective emphasis. Coloured text should be reserved for text elements such as headlines,…

Below is a variety of colour palettes I have developed for industries looking to up-level thei presence with colour.

with love,
Vanisha Singh