2

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>

3

1 Answer 1

9

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

2
  • great idea. have to check if that is supported by the CMS
    – Teetrinker
    Commented Sep 19, 2016 at 9:41
  • that put me on the right path, there was a similar function provided in the CMS. thanks!
    – Teetrinker
    Commented Sep 19, 2016 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.