title: How can I define a type for a css color in TypeScript?
body: <p>I have the following example code snippet:</p>
  
  <pre><code>type Color = string;
  
  interface Props {
      color: Color;
      text: string;
  }
  
  function Badge(props: Props) {
      return `&lt;div style="color:${props.color}"&gt;${props.text}&lt;/div&gt;`;
  }
  
  var badge = Badge({
      color: '#F00',
      text: 'Danger'
  });
  
  console.log(badge);
  </code></pre>
  
  <p><a href="https://www.typescriptlang.org/play/#src=interface%20Props%20%7B%0D%0A%20%20%20%20color%3A%20string%3B%0D%0A%20%20%20%20text%3A%20string%3B%0D%0A%7D%0D%0A%0D%0Afunction%20Badge(props%3A%20Props)%20%7B%0D%0A%20%20%20%20return%20%60%3Cdiv%20style%3D%22color%3A%24%7Bprops.color%7D%22%3E%24%7Bprops.text%7D%3C%2Fdiv%3E%60%3B%0D%0A%7D%0D%0A%0D%0Avar%20badge%20%3D%20Badge(%7B%0D%0A%20%20%20%20color%3A%20&#39;%23F00&#39;%2C%0D%0A%20%20%20%20text%3A%20&#39;Danger&#39;%0D%0A%7D)%3B%0D%0A%0D%0Aconsole.log(badge)%3B" rel="noreferrer">Playground</a></p>
  
  <p>I'm trying to get a build error if the color is invalid, like so:</p>
  
  <pre><code>var badge = Badge({
      color: 'rgba(100, 100, 100)',
      text: 'Danger'
  });
  </code></pre>
  
  <p>Is there a way to define <code>Color</code> so that it allows only strings matching one of the following patterns?</p>
  
  <ul>
  <li><code>#FFF</code></li>
  <li><code>#FFFFFF</code></li>
  <li><code>rgb(5, 5, 5)</code></li>
  <li><code>rgba(5, 5, 5, 1)</code></li>
  <li><code>hsa(5, 5, 5)</code></li>
  </ul>
  
  <p>I realize that there are colors like <code>red</code> and <code>white</code> but that might make this harder to answer if <code>Color</code> can accept those.</p>