How can I use SCSS color functions to emulate a white transparent overlay?

Question

I'm trying to use SCSS to fake a white transparent color overlaying another solid color. I could easily do background-color:rgba(255,255,255,.5) on the overlay <div>, but I'd rather have a solution that doesn't require the browser to support rgba colors. Also, since I'm using SCSS variables, I won't necessarily know what the bottom color is beforehand, so I'll need to calculate the result.

It seems like one of the SCSS color functions should be able to achieve this effect, but I've tried a few things, and I can't seem to get it to work.

Does anyone know how to do this?

Here's a demo to better illustrate what I'm trying to do, or you can see the code pasted below. http://jsfiddle.net/BRKR3/

HTML

<div class="background">
    <div class="overlay rgba"></div>
</div>

<div class="background">
    <div class="overlay scss"></div>
</div>

SCSS

$background: #009966;

.background {
    background-color:$background;
    height:60px;
    margin:20px;
    padding:20px;
    width:60px;
}

.overlay {
   height:60px;
   width:60px;
}

.rgba {
    background-color:rgba(255,255,255,0.5);
}

/* works if $background is $808080, but not if it's a color */
.scss {
    background-color:scale-color($background, $lightness:150%);
}

UPDATE

Here's a working jsFiddle using Chuck's answer: http://jsfiddle.net/BRKR3/3/

Answer 1

Lightness doesn't blend a color with white; it makes it a lighter color, which means it's lighter but the components are also more intense (whereas blending with white makes them more muted). You can think of lightness as multiplying the color. In order to get a screen effect when you adjust lightness, you need to decrease the saturation proportionately.

To get the effect you want, just use mix($background, white, 50%). This performs the same kind of blending that compositing colors with alpha does.