title: Angular theme with more than 3 colors
body: <p>I want to make an angular theme with more than three colors (primary, accent, warn) and apply those colors to material elements like progress bars and such.</p>
  
  <p>I was reading this Material design case studies: <a href="https://material.io/design/material-studies/rally.html#color" rel="noreferrer">https://material.io/design/material-studies/rally.html#color</a></p>
  
  <p>Where they use a palette of 6 colors:</p>
  
  <p><a href="https://i.stack.imgur.com/O0GML.png" rel="noreferrer"><img src="https://i.stack.imgur.com/O0GML.png" alt="Rally color palette"></a></p>
  
  <p>To add the extra colors I imagine that making this will be the correct way to go?</p>
  
  <pre><code>$mat-extra-color-orange: (
   50  : #fff8e5,
   100 : #ffebb0,
   200 : #ffdc78,
   ...
  }
  </code></pre>
  
  <p>But what if I want to use that extra color in, say, <code>mat-progress-bar</code> that only accepts <code>primary/accent/warn</code>?</p>
  
  <p>Thanks for your help!</p>