Skip to content

Instantly share code, notes, and snippets.

@jelbourn
Last active September 12, 2018 03:50

Revisions

  1. jelbourn revised this gist Sep 12, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion alpha-blend.scss
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    $overlayAlpha: alpha($overlay);
    $baseAlpha: alpha($base);

    // If the overload color is completely opaque, then the result is just going to be that color.
    // If the overlaid color is completely opaque, then the result is just going to be that color.
    @if $overlayAlpha >= 1 {
    @return $overlay;
    }
  2. jelbourn created this gist Mar 3, 2015.
    19 changes: 19 additions & 0 deletions alpha-blend.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    // 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 overload 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);
    }