Color-Schemer

Color-Schemer.markdown

Color-Schemer

A codepen port of the color-schemer Compass plugin: https://github.com/Team-Sass/color-schemer

Forked from Scott Kellum's Pen Color-Schemer.

A Pen by Mike Hacker on CodePen.

License.

index.html

<!--


A code pen version of the Color-Schemer Compass plugin. Download and full documentation here:
https://github.com/Team-Sass/color-schemer


-->

style.scss

@import "compass/css3";

// Primary color
$cs-primary           : #E07A19;

$cs-scheme            : tetrad;
// mono, complement, triad, tetrad, analogic, accented-analogic

$cs-hue-offset        : 30;

$cs-brightness-offset : false;

$cs-color-model       : ryb;
// rgb, ryb


@function color-list() { @return
  cs-primary()
  cs-secondary()
  cs-tertiary()
  cs-quadrary()
;}







@function cs-interpolate($value, $units: 360, $stops: $ryb-interpolation) {
  
  // Loop numbers out of scale back into the scale.
  @while $value >= 360 {
    $value: $value - 360;
  }
  @while $value < 0 {
    $value: $value + 360;
  }

  // Find out how many units in each stop
  $cs-color-deg: $units / length($stops);

  // Count through stops
  $cs-deg-count: $cs-color-deg;
  $cs-stop-count: 1;

  // Add the first stop to the end so it will be
  // interpolated with the last stop.
  $stops: append($stops, nth($stops, 1));

  // Start interpolating
  @for $i from 0 through length($stops) {
    @if $value < $cs-deg-count {
      @return cs-mix(nth($stops, $cs-stop-count + 1), nth($stops, $cs-stop-count), abs(percentage(($cs-deg-count - $value) / $cs-color-deg) - 100 ), $model: rgb);
    }

    // If the value is not in this stop, loop up to another stop.
    @else {
      $cs-deg-count: $cs-deg-count + $cs-color-deg;
      $cs-stop-count: $cs-stop-count + 1
    }
  }
}

@function cmyk($cyan, $magenta, $yellow, $black) {

  // Get the color values out of white
  $cyan    : mix(cyan   , white, $cyan   );
  $magenta : mix(magenta, white, $magenta);
  $yellow  : mix(yellow , white, $yellow );
  $black   : mix(black  , white, $black  );

  // Subtract the colors from white
  $color: white - invert($cyan) - invert($magenta) - invert($yellow) - invert($black);


  @return $color;
}

$ryb-interpolation: #FF0000 #FF4900 #FF7400 #FF9200 #FFAA00 #FFBF00 #FFD300 #FFE800 #FFFF00 #CCF600 #9FEE00 #67E300 #00CC00 #00AF64 #009999 #0B61A4 #1240AB #1B1BB3 #3914AF #530FAD #7109AA #A600A6 #CD0074 #E40045;

// RYB color interpolation
@function find-ryb($hue) {

  // remove units on $hue
  @if unit($hue) == deg { $hue: $hue / 1deg; }

  // return an interpolated hue
  @return hue(cs-interpolate($hue));
}

// Find the RYB hue instead of RGB hue of a color.

// map of the RYB offset
$ryb-offset: 0 1 2 3 5 6 7 8 9 10 11 13 14 15 16 17 18 19 19 20 21 21 22 23 23 24 25 25 26 27 27 28 28 29 29 30 30 31 31 32 32 32 33 33 34 34 35 35 35 36 36 37 37 37 38 38 38 39 39 40 40 40 41 41 41 42 42 42 43 43 43 44 44 44 45 45 45 46 46 46 47 47 47 47 48 48 48 49 49 49 50 50 50 51 51 51 52 52 52 53 53 53 54 54 54 55 55 55 56 56 56 57 57 57 58 58 59 59 59 60 60 61 61 62 63 63 64 65 65 66 67 68 68 69 70 70 71 72 72 73 73 74 75 75 76 77 77 78 79 79 80 81 82 82 83 84 85 86 87 88 88 89 90 91 92 93 95 96 98 100 102 104 105 107 109 111 113 115 116 118 120 122 125 127 129 131 134 136 138 141 143 145 147 150 152 154 156 158 159 161 163 165 166 168 170 171 173 175 177 178 180 182 184 185 187 189 191 192 194 196 198 199 201 203 205 206 207 208 209 210 212 213 214 215 216 217 218 219 220 221 222 223 224 226 227 228 229 230 232 233 234 235 236 238 239 240 241 242 243 244 245 246 247 248 249 250 251 251 252 253 254 255 256 257 257 258 259 260 260 261 262 263 264 264 265 266 267 268 268 269 270 271 272 273 274 274 275 276 277 278 279 280 282 283 284 286 287 289 290 292 293 294 296 297 299 300 302 303 305 307 309 310 312 314 316 317 319 321 323 324 326 327 328 329 330 331 332 333 334 336 337 338 339 340 341 342 343 344 345 347 348 349 350 352 353 354 355 356 358 359 360;

// loop through the map to find the matching hue.
@function ryb-hue($color) {
  @for $i from 1 through length($ryb-offset) {
    @if nth($ryb-offset, $i) > hue($color) {
      @return $i - 2deg;
    }
  }
}

// Changes the hue of a color.
@function ryb-adjust-hue($color, $degrees) {

  // Convert precentag to degrees.
  @if unit($degrees) == "%" {
    $degrees: 360 * ($degrees / 100%);
  }

  // Start at the current hue and loop in the adjustment.
  $hue-adjust: (ryb-hue($color) + $degrees) / 1deg;

  @return hsl(hue(cs-interpolate($hue-adjust)), saturation($color), lightness($color));
}

@function ryba($red, $yellow, $blue, $alpha) {
  $hue: 0;
  $saturation: 0;
  $lightness: percentage(($red + $yellow + $blue) / (255 * 3));
  @if $red == $yellow and $yellow == $blue {
    @return hsla(0, 0, $lightness, $alpha);
  }
  @if $red >= $yellow and $red >= $blue {
    $hue: 0;
  }
  @elseif $yellow >= $red and $yellow >= $blue {
    $hue: 360 / 3;
  }
  @elseif $blue >= $red and $blue >= $yellow {
    $hue: 360 / 3 * 2;
  }
  @return hsla(hue(cs-interpolate($hue)), 100%, 50%, 1);
}

@function ryb($red, $yellow, $blue) {
  @return ryba($red, $yellow, $blue, 1);
}

@function set-ryb-hue($color, $hue) {
  @return hsla(hue(cs-interpolate($hue)), saturation($color), lightness($color), alpha($color));
}

// Returns the complement of a color.
@function ryb-complement($color) {
  @return ryb-adjust-hue($color, 180deg);
}

// Returns the inverse of a color.
@function ryb-invert($color) {
  @return ryb-adjust-hue(hsl(hue($color), saturation(invert($color)), lightness(invert($color))), 180deg);
}

// Color equalize credit to Mason Wendell:
// https://github.com/canarymason/The-Coding-Designers-Survival-Kit/blob/master/sass/partials/lib/variables/_color_schemes.sass
@function equalize($color) {
  @return hsl(hue($color), 100%, 50%);
}

@function cs-mix($color1, $color2, $percent: 50%, $model: $cs-color-model) {

  $decimal           : abs($percent - 100%) / 100%;
  $hue-offset        : ();

  @if $model == rgb {
    $hue-offset        : (hue($color1) - hue($color2)) * $decimal;
    @if (hue($color1) - hue($color2)) * .5 < -90deg {
      $hue-offset      : (hue($color1) + 360deg - hue($color2)) * $decimal;
    }
    @if (hue($color1) - hue($color2)) * .5 > 90deg {
      $hue-offset      : (hue($color1) - 360deg - hue($color2)) * $decimal;
    }
  }

  @if $model == ryb {
    $hue-offset        : (ryb-hue($color1) - ryb-hue($color2)) * $decimal;
    @if (ryb-hue($color1) - ryb-hue($color2)) * .5 < -90deg {
      $hue-offset      : (ryb-hue($color1) + 360deg - ryb-hue($color2)) * $decimal;
    }
    @if (ryb-hue($color1) - ryb-hue($color2)) * .5 > 90deg {
      $hue-offset      : (ryb-hue($color1) - 360deg - ryb-hue($color2)) * $decimal;
    }
  }

  $saturation-offset : (saturation($color1) - saturation($color2)) * $decimal;
  $lightness-offset  : (lightness($color1) - lightness($color2)) * $decimal;

  @if $model == ryb {
    $color1: ryb-adjust-hue($color1, $hue-offset * -1);
  }
  @else {
    $color1: adjust-hue($color1, $hue-offset * -1);
  }

  $color1: set-saturation($color1, saturation($color1) - $saturation-offset);
  $color1: set-lightness($color1, lightness($color1) - $lightness-offset);

  @return $color1;
}

// Add percentage of white to a color
@function tint($color, $percent) {
  @return mix(white, $color, $percent);
}

// Add percentage of black to a color
@function shade($color, $percent) {
  @return mix(black, $color, $percent);
}

// RGB functions
@function set-red($color, $red) {
  @return rgba($red, green($color), blue($color), alpha($color));
}

@function set-green($color, $green) {
  @return rgba(red($color), $green, blue($color), alpha($color));
}

@function set-blue($color, $blue) {
  @return rgba(red($color), green($color), $blue, alpha($color));
}


// HSL Functions
@function set-hue($color, $hue) {
  @return hsla($hue, saturation($color), lightness($color), alpha($color));
}

@function set-saturation($color, $saturation) {
  @return hsla(hue($color), $saturation, lightness($color), alpha($color));
}

@function set-lightness($color, $lightness) {
  @return hsla(hue($color), saturation($color), $lightness, alpha($color));
}

@function set-alpha($color, $alpha) {
  @return hsla(hue($color), saturation($color), lightness($color), $alpha);
}

// brightness and hue offsets are based on the lightness and saturation of the color
// unless defined otherwise.
@function cs-brightness-offset($cs-brightness-offset) {
  @if $cs-brightness-offset == false {
    // find the difference between lightness
    @return lightness($cs-primary) - lightness(invert($cs-primary));
  }
  @else {
    @return $cs-brightness-offset;
  }
}

// Primary color
@function cs-primary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset) {
  @return $cs-primary;
}

// Secondary color scheme
@function cs-secondary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset) {
  $cs-brightness-offset: cs-brightness-offset($cs-brightness-offset);

  // mono
  @if $cs-scheme == mono {
    @if $cs-brightness-offset < 0 {
      @return lighten($cs-primary, abs($cs-brightness-offset));
    }
    @else {
      @return darken($cs-primary, abs($cs-brightness-offset));
    }
  }

  // complement
  @if $cs-scheme == complement {
    @if $cs-color-model == ryb {
      @return ryb-complement($cs-primary);
    }
    @else {
      @return complement($cs-primary);
    }
  }

  // triad
  @if $cs-scheme == triad {
    @if $cs-color-model == ryb {
      @return ryb-adjust-hue(ryb-complement($cs-primary), $cs-hue-offset);
    }
    @else {
      @return adjust-hue(complement($cs-primary), $cs-hue-offset);
    }
  }

  // tetrad
  @if $cs-scheme == tetrad {
    @if $cs-color-model == ryb {
      @return ryb-adjust-hue($cs-primary, $cs-hue-offset);
    }
    @else {
      @return adjust-hue($cs-primary, $cs-hue-offset);
    }
  }

  // analogic
  @if $cs-scheme == analogic or $cs-scheme == accented-analogic {
    @if $cs-color-model == ryb {
      @return ryb-adjust-hue($cs-primary, $cs-hue-offset);
    }
    @else {
      @return adjust-hue($cs-primary, $cs-hue-offset);
    }
  }
}

// Tertiary color scheme
@function cs-tertiary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset) {
  $cs-brightness-offset: cs-brightness-offset($cs-brightness-offset);

  // mono
  @if $cs-scheme == mono {
    @return mix(cs-primary(), cs-secondary());
  }

  // complement
  @if $cs-scheme == complement {
    @return equalize($cs-primary);
  }

  // triad
  @if $cs-scheme == triad {
    @if $cs-color-model == ryb {
      @return ryb-adjust-hue(ryb-complement($cs-primary), $cs-hue-offset * -1);
    }
    @else {
      @return adjust-hue(complement($cs-primary), $cs-hue-offset * -1);
    }
  }

  // tetrad
  @if $cs-scheme == tetrad {
    @if $cs-color-model == ryb {
      @return ryb-complement($cs-primary);
    }
    @else {
      @return complement($cs-primary);
    }
  }

  // analogic
  @if $cs-scheme == analogic or $cs-scheme == accented-analogic {
    @if $cs-color-model == ryb {
      @return ryb-adjust-hue($cs-primary, $cs-hue-offset * -1);
    }
    @else {
      @return adjust-hue($cs-primary, $cs-hue-offset * -1);
    }
  }

  // accented-analogic
  @if $cs-scheme == accented-analogic {
    @if $cs-color-model == ryb {
      @return ryb-complement($cs-primary);
    }
    @else {
      @return complement($cs-primary);
    }
  }
}

// Quadrary color scheme
@function cs-quadrary($cs-primary:$cs-primary, $cs-scheme:$cs-scheme, $cs-hue-offset:$cs-hue-offset, $cs-brightness-offset:$cs-brightness-offset) {
  $cs-brightness-offset: cs-brightness-offset($cs-brightness-offset);

  // mono
  @if $cs-scheme == mono {
    @return equalize($cs-primary);
  }

  // complement
  @if $cs-scheme == complement {
    @return equalize(ryb-complement($cs-primary));
  }

  // triad
  @if $cs-scheme == triad {
    @return equalize($cs-primary);
  }

  // tetrad
  @if $cs-scheme == tetrad {
    @if $cs-color-model == ryb {
      @return ryb-adjust-hue(ryb-complement($cs-primary), $cs-hue-offset);
    }
    @else {
      @return adjust-hue(complement($cs-primary), $cs-hue-offset);
    }
  }

  // analogic
  @if $cs-scheme == analogic {
    @return equalize($cs-primary);
  }

  // accented-analogic
  @if $cs-scheme == accented-analogic {
    @if $cs-color-model == ryb {
      @return ryb-complement($cs-primary);
    }
    @else {
      @return complement($cs-primary);
    }
  }
}

////////////////////////////////////////////
// From Jina Bolton and Eric Meyer -- http://codepen.io/jina/pen/iosjp
@function cs-stripes($position, $colors) {
  $colors: if(type-of($colors) != 'list', compact($colors), $colors);
  $gradient: ();
  $width: 100% / length($colors);

  @for $i from 1 through length($colors) {
    $pop: nth($colors,$i);
    $new: $pop ($width * ($i - 1)), $pop ($width * $i);
    $gradient: join($gradient, $new, comma);
  }

  @return linear-gradient($position, $gradient);
}

////////////////////////////////////////////
// Color tester

@mixin cs-test($colors, $height: 2em, $element: "body:before") {
  #{$element} {
    content: "";
    display: block;
    height: $height;
    @include background(cs-stripes(left, ($colors)));
    position: relative;
    z-index: 999999999999;
  }
}

@include cs-test(color-list(), 100%, html);