hsl-hsv.js

  1. /**
  2. * @func hsl2hsv
  3. * @desc Return an HSV color from an HSL color
  4. * @param {Number} h - Hue Angle (0 - 360)
  5. * @param {Number} s - Saturation (0 - 100)
  6. * @param {Number} l - Lightness (0 - 100)
  7. * @return {ArrayHSV}
  8. * @example
  9. * hsl2hsv(0, 100, 50)
  10. * @link https://gist.github.com/defims/0ca2ef8832833186ed396a2f8a204117
  11. */
  13. export function hsl2hsv(hslH, hslS, hslL) {
  14. 	const hsv1 = hslS * (hslL < 50 ? hslL : 100 - hslL) / 100;
  15. 	const hsvS = hsv1 === 0 ? 0 : 2 * hsv1 / (hslL + hsv1) * 100;
  16. 	const hsvV = hslL + hsv1;
  18. 	return [ hslH, hsvS, hsvV ];
  19. }
  21. /**
  22. * @func hsv2hsl
  23. * @desc Return an HSL color from an HSV color
  24. * @param {Number} h - Hue Angle (0 - 360)
  25. * @param {Number} s - Saturation (0 - 100)
  26. * @param {Number} v - Value (0 - 100)
  27. * @return {ArrayHSL}
  28. * @example
  29. * hsv2hsl(0, 0, 0) // => [0, 100, 50]
  30. * @link https://gist.github.com/defims/0ca2ef8832833186ed396a2f8a204117
  31. */
  33. export function hsv2hsl(hsvH, hsvS, hsvV) {
  34. 	const hslL = (200 - hsvS) * hsvV / 100;
  36. 	const [ hslS, hslV ] = [
  37. 		hslL === 0 || hslL === 200 ? 0 : hsvS * hsvV / 100 / (hslL <= 100 ? hslL : 200 - hslL) * 100,
  38. 		hslL * 5 / 10
  39. 	];
  41. 	return [ hsvH, hslS, hslV ];
  42. }