SASSコントラストジェネレータ

背景色に合わせて、自動でコントラストついたテキストカラーにする。

sass

//-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
//
//  Color contrast Generator
//  Usage
//  background-color: $c;
//  color: contrast($c, darken($c, 80), lighten($c, 80));
//
//-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
$dark_default: #333333 !default;
$light_default: #EEEEEE !default;
@function brightness($color) {
  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
}

@function contrast($color, $dark: $dark_default, $light: $light_default) {
  @if $color == null {
    @return null;
  }
  @else {
    $color_brightness: brightness($color);
    $light_brightness: brightness($light);
    $dark_brightness: brightness($dark);

    @return if(abs($color_brightness - $light_brightness) > abs($color_brightness - $dark_brightness), $light, $dark);
  }
}