Semi-transparent background color in CSS from hex RGB value

Question

Background: 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.

The problem: 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).

Usually I would do this with

background-color: rgba(r,g,b,a) ;

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

Example of the result that should be achieved:

 /* 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; /* <- this value should be calculated from the variable $color, in this case #00d + opacity 50% */ }

 <h1>Title</h1> <p>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.</p>

Answer 1

Use lighten SASS function

lighten($color, 20%)

If you want to change alfa of your color, use rgba function

rgba($color,0.8)

See the demo

Answer 2

Modify the "opacity" css property of your css. A value of 0 is complete transparent, a value of 1 is completely opaque, and a value of .5 is half transparent, etc. Smaller opacity values will make your color "lighter". Any value between 0 and 1 will work. This is essentially the same as the alpha value in your rgba (a == alpha).

ref: http://www.w3schools.com/css/css_image_transparency.asp