Skip to content

Instantly share code, notes, and snippets.

@unti1x
Last active August 22, 2018 21:15
Show Gist options
  • Save unti1x/7c4a5d88dd841674f5f0e294357a260d to your computer and use it in GitHub Desktop.
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)
// 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