Last active
June 13, 2019 10:01
-
-
Save voxpelli/1069204 to your computer and use it in GitHub Desktop.
MOVED TO: https://github.com/voxpelli/sass-color-helpers HSV to HSL in SASS - ported from http://ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.html
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
/*! hsv_to_hsl.scss | MIT License | https://gist.github.com/voxpelli/1069204 */ | |
@function max($v1, $v2) { | |
@return if($v1 > $v2, $v1, $v2); | |
} | |
@function min($v1, $v2) { | |
@return if($v1 < $v2, $v1, $v2); | |
} | |
@function hsv_to_hsl($h, $s: 0, $v: 0) { | |
@if type_of($h) == 'list' { | |
$v: nth($h, 3); | |
$s: nth($h, 2); | |
$h: nth($h, 1); | |
} | |
@if unit($h) == 'deg' { | |
$h: 3.1415 * 2 * ($h / 360deg); | |
} | |
@if unit($s) == '%' { | |
$s: 0 + ($s / 100%); | |
} | |
@if unit($v) == '%' { | |
$v: 0 + ($v / 100%); | |
} | |
$ss: $s * $v; | |
$ll: (2 - $s) * $v; | |
@if $ll <= 1 { | |
$ss: $ss / $ll; | |
} @else if ($ll == 2) { | |
$ss: 0; | |
} @else { | |
$ss: $ss / (2 - $ll); | |
} | |
$ll: $ll / 2; | |
@return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll))); | |
} | |
@function hsl_to_hsv($h, $ss: 0, $ll: 0) { | |
@if type_of($h) == 'list' { | |
$ll: nth($h, 3); | |
$ss: nth($h, 2); | |
$h: nth($h, 1); | |
} @else if type_of($h) == 'color' { | |
$ll: lightness($h); | |
$ss: saturation($h); | |
$h: hue($h); | |
} | |
@if unit($h) == 'deg' { | |
$h: 3.1415 * 2 * ($h / 360deg); | |
} | |
@if unit($ss) == '%' { | |
$ss: 0 + ($ss / 100%); | |
} | |
@if unit($ll) == '%' { | |
$ll: 0 + ($ll / 100%); | |
} | |
$ll: $ll * 2; | |
@if $ll <= 1 { | |
$ss: $ss * $ll; | |
} @else { | |
$ss: $ss * (2 - $ll); | |
} | |
$v: ($ll + $ss) / 2; | |
$s: (2 * $ss) / ($ll + $ss); | |
@return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v))); | |
} | |
@function color_to_hsv($color) { | |
@return hsl_to_hsv($color); | |
} | |
@function hsv_to_color($h, $s: 0, $v: 0) { | |
$hsl: hsv_to_hsl($h, $s, $v); | |
@return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3)); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I found this one useful for a ruby alternative http://blog.nataliabuckley.co.uk/2011/11/21/convert-rgb-to-hsb-hsv-in-ruby/ which I then put into Sass's Color class with accessors. This would let me call these methods on a color object and use the HSV values in other custom functions.