SCSS alpha blend

alpha-blend.scss

// Overlays one color on top of another and returns the resulting color.
// This is used to determine contrast ratio for two colors with partial opacity.
// See http://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
@function alpha-blend($overlay, $base) {
  $overlayAlpha: alpha($overlay);
  $baseAlpha: alpha($base);

  // If the overlaid color is completely opaque, then the result is just going to be that color.
  @if $overlayAlpha >= 1 {
    @return $overlay;
  }

  $r: (  red($overlay) * $overlayAlpha) + (  red($base) * $baseAlpha * (1 - $overlayAlpha));
  $g: (green($overlay) * $overlayAlpha) + (green($base) * $baseAlpha * (1 - $overlayAlpha));
  $b: ( blue($overlay) * $overlayAlpha) + ( blue($base) * $baseAlpha * (1 - $overlayAlpha));
  $a: $overlayAlpha + ($baseAlpha * (1 - $overlayAlpha));

  @return rgba($r, $g, $b, $a);
}