Last active
August 22, 2018 21:15
-
-
Save unti1x/7c4a5d88dd841674f5f0e294357a260d to your computer and use it in GitHub Desktop.
Get any colour from linear gradient (default red to green with nice internal steps and no dirty brownish values)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Rate of the most right colour. 10 points for green | |
$max_rate: 10; | |
/* | |
Calculate colour between two values. | |
$rate - required position | |
$cmax - maximal value (0-255) | |
$cmin - minimal value (0-255) | |
*/ | |
@function _newval($rate, $cmax, $cmin) { | |
@return $cmin + ($rate * ($cmax - $cmin) / $max_rate); | |
} | |
/* | |
Get colour | |
$rate - position in gradient from 0 to $max_rate | |
$gradient - list of colours. I made it pretty simple so all steps are on the same distance from each other | |
*/ | |
@function gradval($rate, $gradient: null) { | |
$gradient: (#ff7676, #ffb25f, #f5f365, #bff36e, #89f278) !default; | |
$max_step: length($gradient) - 1; | |
// current position | |
$current_step: $rate * $max_step / $max_rate; | |
// right colour | |
$cmax: null !default; | |
// index of right colour | |
$imax: 1 !default; | |
// left colour | |
$cmin: null !default; | |
// index of left colour | |
$imin: 1 !default; | |
// result | |
$color: nth($gradient, 1) !default; | |
// trivail cases with 0 and $max_rate rates | |
@if $rate == 0 { | |
@return nth($gradient, 1); | |
} @else { @if $rate == $max_rate { | |
@return nth($gradient, $max_step + 1); | |
}} | |
// calculating indexes of the closest to $current_step colours | |
@if floor($current_step) == $current_step { | |
$imin: $current_step ; | |
$imax: $current_step + 1; | |
} @else { | |
$imin: floor($current_step); | |
$imax: ceil($current_step); | |
} | |
$cmax: nth($gradient, $imax + 1); | |
$cmin: nth($gradient, $imin + 1); | |
$r: _newval($rate, red($cmax), red($cmin)); | |
$g: _newval($rate, green($cmax), green($cmin)); | |
$b: _newval($rate, blue($cmax), blue($cmin)); | |
$color: rgb($r, $g, $b); | |
@return $color; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment