title: jss how to change opacity for a color
body: <p>Currently I am using the following code to add a color to an element using jss.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const styleSheet = theme =&gt; ({
    root: {
       backgroundColor: theme.colors.red,
    },
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to know if exist a function to add opacity based on color<code>theme.colors.red</code>.</p>
  
  <p>example smt like: 
  <code>backgroundColor: color(theme.colors.red, .05),</code></p>