_hslToRgb.js.flow 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. // @flow
  2. type ConversionFunction = (red: number, green: number, blue: number) => string
  3. function colorToInt(color: number): number {
  4. return Math.round(color * 255)
  5. }
  6. function convertToInt(red: number, green: number, blue: number): string {
  7. return `${colorToInt(red)},${colorToInt(green)},${colorToInt(blue)}`
  8. }
  9. function hslToRgb(
  10. hue: number,
  11. saturation: number,
  12. lightness: number,
  13. convert: ConversionFunction = convertToInt,
  14. ): string {
  15. if (saturation === 0) {
  16. // achromatic
  17. return convert(lightness, lightness, lightness)
  18. }
  19. // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
  20. const huePrime = (((hue % 360) + 360) % 360) / 60
  21. const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation
  22. const secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1))
  23. let red = 0
  24. let green = 0
  25. let blue = 0
  26. if (huePrime >= 0 && huePrime < 1) {
  27. red = chroma
  28. green = secondComponent
  29. } else if (huePrime >= 1 && huePrime < 2) {
  30. red = secondComponent
  31. green = chroma
  32. } else if (huePrime >= 2 && huePrime < 3) {
  33. green = chroma
  34. blue = secondComponent
  35. } else if (huePrime >= 3 && huePrime < 4) {
  36. green = secondComponent
  37. blue = chroma
  38. } else if (huePrime >= 4 && huePrime < 5) {
  39. red = secondComponent
  40. blue = chroma
  41. } else if (huePrime >= 5 && huePrime < 6) {
  42. red = chroma
  43. blue = secondComponent
  44. }
  45. const lightnessModification = lightness - chroma / 2
  46. const finalRed = red + lightnessModification
  47. const finalGreen = green + lightnessModification
  48. const finalBlue = blue + lightnessModification
  49. return convert(finalRed, finalGreen, finalBlue)
  50. }
  51. export default hslToRgb