Skip to content

Instantly share code, notes, and snippets.

@jelbourn
Last active September 12, 2018 03:50
Show Gist options
  • Save jelbourn/f890a79a48cb21a5246a to your computer and use it in GitHub Desktop.
Save jelbourn/f890a79a48cb21a5246a to your computer and use it in GitHub Desktop.
SCSS alpha blend
// 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment