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>