The Meaning of Hue in the Angular Palette Context


We see Angular theme descriptions refer to Hue and we are wondering what it means in this context?


If we look at the $mat-red palette for example we can see that it has color weights ranging from 50 to 900 with 900 being the darkest red.

$mat-red: (
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
900: #b71c1c,
A100: #ff8a80,
A200: #ff5252,
A400: #ff1744,
A700: #d50000,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,

Angular refers to these weights as Hues . For example here is the implementation of the mat-contrast function:

@function mat-contrast(
$hue) {
@return map-get(
map-get($palette, contrast),

So if we pass in the $mat-red palette with a 900 for the $hue parameter value, we will get a white contrast color back.

Brought to You By



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation