$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. // slow dumb loop at the moment. @function ryb-hue($color) { // find offset $hue: find-ryb(hue($color)) - hue($color); // apply the offset difference $hue: hue($color) - $hue; // Make within the range of 360 if not already. @while $hue >= 360deg { $hue: $hue - 360; } @while $hue < 0deg { $hue: $hue + 360; } @return $hue; } // 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; $lightness: lightness($color); $saturation: saturation($color); // Set hue of new color $new-color: set-hue(red, hue(cs-interpolate($hue-adjust))); // Add back lightness $new-color: set-lightness($new-color, $lightness); // Add back saturation $new-color: set-saturation($new-color, $saturation); @return $new-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); }