Skip to content

Instantly share code, notes, and snippets.

@jlong

jlong/_brightness.scss

Last active September 19, 2024 15:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jlong/f06f5843104ee10006fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jlong/f06f5843104ee10006fe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jlong revised this gist May 7, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion usage.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    @import 'brightness'
    @import 'brightness';

    $dark-background-color: #333;
    $light-text-color: white;
  2. jlong revised this gist May 7, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions usage.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    @import 'brightness'

    $dark-background-color: #333;
    $light-text-color: white;

  3. jlong revised this gist May 7, 2014. 1 changed file with 0 additions and 14 deletions.
    14 changes: 0 additions & 14 deletions _brightness.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -19,20 +19,6 @@ $brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-numbe
    @return 100% * $number / 255;
    }

    @function adjust-brightness($color, $percentage) {
    $red-component: red($color);
    $green-component: green($color);
    $blue-component: blue($color);
    $change: 1;
    $positive_or_negative: abs($percentage) / $percentage;

    @if $red-component > max($green-component, $blue-component) { $change: 1 + (($red-magic-number - ($brightness-divisor / 3)) / $brightness-divisor); }
    @else if $green-component > max($red-component, $blue-component) { $change: 1 + (($green-magic-number - ($brightness-divisor / 3)) / $brightness-divisor); }
    @else if $blue-component > max($red-component, $green-component) { $change: 1 + (($blue-magic-number - ($brightness-divisor / 3)) / $brightness-divisor); }

    @return adjust-lightness($color, min($change * abs($percentage), 100%) * $positive_or_negative);
    }

    @function contrasting-color($color, $light, $dark) {
    @if brightness($color) < 65% {
    @return $light;
  4. jlong created this gist May 7, 2014.
    42 changes: 42 additions & 0 deletions _brightness.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    // 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 adjust-brightness($color, $percentage) {
    $red-component: red($color);
    $green-component: green($color);
    $blue-component: blue($color);
    $change: 1;
    $positive_or_negative: abs($percentage) / $percentage;

    @if $red-component > max($green-component, $blue-component) { $change: 1 + (($red-magic-number - ($brightness-divisor / 3)) / $brightness-divisor); }
    @else if $green-component > max($red-component, $blue-component) { $change: 1 + (($green-magic-number - ($brightness-divisor / 3)) / $brightness-divisor); }
    @else if $blue-component > max($red-component, $green-component) { $change: 1 + (($blue-magic-number - ($brightness-divisor / 3)) / $brightness-divisor); }

    @return adjust-lightness($color, min($change * abs($percentage), 100%) * $positive_or_negative);
    }

    @function contrasting-color($color, $light, $dark) {
    @if brightness($color) < 65% {
    @return $light;
    } @else {
    @return $dark;
    }
    }
    15 changes: 15 additions & 0 deletions usage.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    $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);
    }