The Meaning of Hue in the Angular Palette Context

Question

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

Answer

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(
$palette,
$hue) {
@return map-get(
map-get($palette, contrast),
$hue);
}

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