Semi-transparent background color in CSS from hex RGB value
<p><strong>Background:</strong> I have to work with a CMS that provides some integrated SASS functionality: Users can define colors, they are provided as hex values in a variable to the SCSS files I can edit.</p>

<p><strong>The problem:</strong> I have to use a lighter version of one of this colors for a background of a div. (lighter in the sense of a background-color with some transparency).</p>

<p>Usually I would do this with</p>

<blockquote>
  <p><code>background-color: rgba(r,g,b,a)</code>;</p>
</blockquote>

<p>But what can be done if I don't have the single red/blue/green values, but only the combined hex RGB values?</p>

<p><strong>Example of the result that should be achieved:</strong></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-css lang-css prettyprint-override"><code>/* user color comes as a variable containing a hex value
   variable: $color
   example value: 00d;
*/

h1{
   background-color: #00d;  /* $color resolves to 00d */ 
}

p{
   background-color: #7e7eed; /* &lt;- this value should be calculated from the variable $color, in this case #00d + opacity 50% */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Title&lt;/h1&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;</code></pre>
</div>
</div>
</p>