Skip to content

Instantly share code, notes, and snippets.

@jlong
Last active October 5, 2022 09:49
Show Gist options
  • Save jlong/f06f5843104ee10006fe to your computer and use it in GitHub Desktop.
Save jlong/f06f5843104ee10006fe to your computer and use it in GitHub Desktop.
// Brightness math based on:
// http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx
$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;
@function brightness($color) {
// Extract color components
$red-component: red($color);
$green-component: green($color);
$blue-component: blue($color);
// Calculate a brightness value in 3d color space between 0 and 255
$number: sqrt((($red-component * $red-component * $red-magic-number) + ($green-component * $green-component * $green-magic-number) + ($blue-component * $blue-component * $blue-magic-number)) / $brightness-divisor);
// Convert to percentage and return
@return 100% * $number / 255;
}
@function contrasting-color($color, $light, $dark) {
@if brightness($color) < 65% {
@return $light;
} @else {
@return $dark;
}
}
@import 'brightness';
$dark-background-color: #333;
$light-text-color: white;
$light-background-color: #eee;
$dark-text-color: black;
.dark-background {
background: $dark-background-color;
color: contrasting-color($dark-background-color, $light-text-color, $dark-text-color);
}
.light-background {
background: $light-background-color;
color: contrasting-color($light-background-color, $light-text-color, $dark-text-color);
}
@dudeofawesome
Copy link

Just as a heads up to anyone else looking at this, it calls a method named sqrt, which isn't part of base SASS. You'll need to include one from either a math library or one of your own. Here's a simple one:

@function sqrt ($r) {
    $x0: 1;
    $x1: $x0;

    @for $i from 1 through 10 {
        $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
        $x0: $x1;
    }

    @return $x1;
}

http://www.antimath.info/css/sass-sqrt-function/

Once you've implemented that, the function should behave as expected.

@danielmatthew
Copy link

Well played @dudeofawesome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment