Color lightness test. [Lightness, Brightness and Luma]

color-lightness-test.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

// https://robots.thoughtbot.com/closer-look-color-lightness
// https://thoughtbot.github.io/color-lightness-test/

$background: #ee0;

// http://codepen.io/scottkellum/pen/qFvKd
@function brightness($color) {
  $sum: red($color) + green($color) + blue($color);
  @return percentage($sum / (255*3));
}

// https://gist.github.com/kaishin/9412838
@function color-is-light($hex-color) {
  $red:   red(rgba($hex-color, 1.0));
  $green: green(rgba($hex-color, 1.0));
  $blue:  blue(rgba($hex-color, 1.0));

  $lightness: ($red * 0.2126 + $green * 0.7152 + $blue * 0.0722) / 255;

  //@return $lightness > .6;
  @return $lightness;
}

//https://lnikki.la/articles/sass-better-colour-based-on-brightness/

// Calculates the sRGB luma of a colour.
//
// Math nicked from a great Thoughtbot article by Reda Lemeden:
// http://robots.thoughtbot.com/closer-look-color-lightness
 
@function luma($c) {
  $-local-red: red(rgba($c, 1.0));
  $-local-green: green(rgba($c, 1.0));
  $-local-blue: blue(rgba($c, 1.0));
 
  @return (0.2126 * $-local-red  +
           0.7152 * $-local-green +
           0.0722 * $-local-blue) / 255;
}

.debug {
  lightness: "#{lightness($background)}";
  brightness: "#{brightness($background)}";
  color-is-light: "#{color-is-light($background)}";
  luma: "#{luma($background)}";

}

output.css

.debug {
  lightness: "46.66667%";
  brightness: "62.22222%";
  color-is-light: "0.86595";
  luma: "0.86595";
}