You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.3 KiB
SCSS
59 lines
1.3 KiB
SCSS
@use "sass:math";
|
|
|
|
@function hsv($h, $s, $v, $a: 1) {
|
|
// normalize h to degrees
|
|
$h: math.div(0deg + $h, 1deg);
|
|
$h: $h % 360;
|
|
|
|
// normalize s to fractions
|
|
@if (not math.is-unitless($s)) {
|
|
$s: math.div($s, 100%);
|
|
}
|
|
|
|
// normalize v to fractions
|
|
@if (not math.is-unitless($v)) {
|
|
$v: math.div($v, 100%);
|
|
}
|
|
|
|
// https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB
|
|
$c: $s * $v;
|
|
$h1: math.div($h, 60);
|
|
$x: $c * (1 - math.abs($h1 % 2 - 1));
|
|
|
|
$r1: none; $g1: none; $b1: none;
|
|
@if ($h1 < 1) {
|
|
$r1: $c; $g1: $x; $b1: 0;
|
|
} @else if($h1 < 2) {
|
|
$r1: $x; $g1: $c; $b1: 0;
|
|
} @else if($h1 < 3) {
|
|
$r1: 0; $g1: $c; $b1: $x;
|
|
} @else if($h1 < 4) {
|
|
$r1: 0; $g1: $x; $b1: $c;
|
|
} @else if($h1 < 5) {
|
|
$r1: $x; $g1: 0; $b1: $c;
|
|
} @else {
|
|
$r1: $c; $g1: 0; $b1: $x;
|
|
}
|
|
|
|
$m: $v - $c;
|
|
$r: math.floor(($r1 + $m) * 255);
|
|
$g: math.floor(($g1 + $m) * 255);
|
|
$b: math.floor(($b1 + $m) * 255);
|
|
|
|
@return rgba($r, $g, $b, $a);
|
|
}
|
|
|
|
// some aliases
|
|
|
|
@function hsva($h, $s, $v, $a) {
|
|
@return hsv($h, $s, $v, $a);
|
|
}
|
|
|
|
@function hsb($h, $s, $b, $a: 1) {
|
|
@return hsv($h, $s, $b, $a);
|
|
}
|
|
|
|
@function hsba($h, $s, $b, $a) {
|
|
@return hsv($h, $s, $b, $a);
|
|
}
|