82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
import { sanitizeAlphaFloat } from '../helpers'
|
|
|
|
const hslToHex = (hue, saturation, lightness) => {
|
|
let rgb = hslToRgb(hue, saturation, lightness)
|
|
let red = rgb.red.toString(16)
|
|
let green = rgb.green.toString(16)
|
|
let blue = rgb.blue.toString(16)
|
|
|
|
if (red.length === 1) { red = "0" + red }
|
|
if (green.length === 1) { green = "0" + green }
|
|
if (blue.length === 1) { blue = "0" + blue }
|
|
|
|
return "" + red + green + blue
|
|
}
|
|
|
|
const hslaToHexa = (hue, saturation, lightness, alpha) => {
|
|
let rgb = hslToRgb(hue, saturation, lightness)
|
|
let red = rgb.red.toString(16)
|
|
let green = rgb.green.toString(16)
|
|
let blue = rgb.blue.toString(16)
|
|
let alphaHex = Math.round(sanitizeAlphaFloat(alpha) * 255).toString(16)
|
|
|
|
if (red.length === 1) { red = "0" + red }
|
|
if (green.length === 1) { green = "0" + green }
|
|
if (blue.length === 1) { blue = "0" + blue }
|
|
|
|
return "" + red + green + blue + alphaHex
|
|
}
|
|
|
|
const hslToRgb = (hue, saturation, lightness) => {
|
|
if (hue === 360) { hue = 0 }
|
|
if (hue < 0) { hue += 360 }
|
|
|
|
saturation /= 100
|
|
lightness /= 100
|
|
|
|
let chroma = (1 - Math.abs(2 * lightness - 1)) * saturation,
|
|
xComponent = chroma * (1 - Math.abs((hue / 60) % 2 - 1)),
|
|
lightnessMatch = lightness - (chroma / 2),
|
|
red = 0,
|
|
green = 0,
|
|
blue = 0
|
|
|
|
// set red and green if hue between 0 and 119
|
|
if (0 <= hue && hue < 60) {
|
|
red = chroma
|
|
green = xComponent
|
|
} else if (60 <= hue && hue < 120) {
|
|
red = xComponent
|
|
green = chroma
|
|
}
|
|
// set green and blue if hue between 120 and 239
|
|
else if (120 <= hue && hue < 180) {
|
|
green = chroma
|
|
blue = xComponent
|
|
} else if (180 <= hue && hue < 240) {
|
|
green = xComponent
|
|
blue = chroma
|
|
}
|
|
// set red and blue if hue between 0 and 119
|
|
else if (240 <= hue && hue < 300) {
|
|
red = xComponent
|
|
blue = chroma
|
|
} else if (300 <= hue && hue < 360) {
|
|
red = chroma
|
|
blue = xComponent
|
|
}
|
|
|
|
red = Math.round((red + lightnessMatch) * 255)
|
|
green = Math.round((green + lightnessMatch) * 255)
|
|
blue = Math.round((blue + lightnessMatch) * 255)
|
|
|
|
return { "red": red, "green": green, "blue": blue }
|
|
}
|
|
|
|
const hslaToRgba = (hue, saturation, lightness, alpha) => {
|
|
let rgb = hslToRgb(hue, saturation, lightness)
|
|
return { "red": rgb.red, "green": rgb.green, "blue": rgb.blue, "alpha": sanitizeAlphaFloat(alpha) }
|
|
}
|
|
|
|
export { hslToHex, hslaToHexa, hslToRgb, hslaToRgba }
|