The Meaning of Hue in the Angular Palette Context

Image by David Zydd from Pixabay

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

Firefly Semantics Supply Chain and Big Data Analytics for the Cloud