%h1 CSS Blend Modes
%p Pick page color, background layer color, and foreground layer color to see the different effects. Works best in current version of Chrome. <br> Learn more about blend modes by <a href="https://webdesign.tutsplus.com/tutorials/blending-modes-in-css-color-theory-and-practical-application--cms-25201" target="_blank">checking out the tutorial on Envato Tuts+</a>.
- @modes = ['multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];

.color-pickers
  %div
    %p Background color:
    %input{type: "color", name: "bg", value: "#f95858"}
  %div
    %p Foreground color:
    %input{type: "color", name: "fg", value: "#5d7dba"}
  %div
    %p Page color:
    %input{type: "color", name: "pbg", value: "#eaeaea"}

%input{name: "backgroundImage", placeholder: "Enter background image url", class: "text-input"}

.circles
  - @modes.each do |mode|
    %div{class: "mode-comparison mode-comparison--#{mode}"}
      %h2 #{mode.capitalize}
      .bg
      .fg
View Compiled
$modes: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity;

body {
  background-size: cover;
  background-position: center;
  line-height: 1.8;
  font-family: sans-serif;
  font-weight: 200;
  color: #4b4b4b;
  text-align: center;
  background-color: #eaeaea;
  transition: color .2s;
  &.dark {
    color: #fafafa;
  }
  &.middle {
    color: #fafafa;
    text-shadow: 1px 1px 3px rgba(0,0,0,.3);
  }
}
a {
  color: #136fd2;
  &:hover {
    text-decoration: none;
  }
}
h2 {
  font-size: 18px;
}
input[type=color] {
  cursor: pointer;
}
.text-input {
  padding: 6px 12px;
  line-height: 2;
  width: 300px;
  text-align: center;
  color: #444;
}
@each $mode in $modes {
  .mode-comparison {
    overflow: auto;
    width: 100%; 
    @media only screen and (min-width: 500px){
      width: 33.333%; 
    }
    @media only screen and (min-width: 1000px){
      width: 25%;
    }
    @media only screen and (min-width: 1280px){
      width: 20%;
    }
    float: left;
    margin: 20px auto;
    &--#{$mode} {
      .fg {
        mix-blend-mode: $mode;
      }
    }
  }
}
.bg {
  position: relative;
  width: 50%;
  padding-bottom: 50%;
  background: #f95858;
  margin: 0 auto;
  left: -15%;
  border-radius: 50%;
}
.fg {
  position: relative;
  width: 50%;
  padding-bottom: 50%;
  right: -15%;
  margin: -50% auto 0;
  border-radius: 50%;
  background: #5d7dba;
}
.color-pickers {
  width: 80%;
  position: relative;
  text-align: center;
  padding: 30px;
  overflow: auto;
  margin: 0 auto;
  div {
    width: 33%;
    display: block;
    float: left;
  }
}
.circles {
  padding: 20px 0;
  overflow: auto;
}
$("body").addClass("pbg");
$(".color-pickers").on('change', 'input', function(e){
  var pos = $(this).attr("name");
  $("." + pos).css("background-color", $(this).val());
  if (pos == "pbg"){
    var color = hexToRgb($(this).val());
    var luminance = getLum(color);
    console.log(luminance);
    if (luminance < 255 && luminance > 170){
      $("body").removeClass("dark middle").addClass("light");
    } else if (luminance < 170 && luminance > 85) {
      $("body").removeClass("light dark").addClass("middle");
    } else {
      $("body").removeClass("light middle").addClass("dark");
    }
  }
});


function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

function getLum(color){
  var { r, g, b } = color;
  return (0.2126*r + 0.7152*g + 0.0722*b);
}

$("input[name='backgroundImage']").on('keyup', function(){
  $("body").css("background-image", `url(${$(this).val()})`);
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js