2021-10-07 09:03:38 +02:00
|
|
|
/*
|
2021-04-12 16:11:12 +05:30
|
|
|
* The RGB color model is an additive color model in which red, green, and blue light are added
|
|
|
|
|
* together in various ways to reproduce a broad array of colors. The name of the model comes from
|
|
|
|
|
* the initials of the three additive primary colors, red, green, and blue. Meanwhile, the HSV
|
|
|
|
|
* representation models how colors appear under light. In it, colors are represented using three
|
2021-04-12 16:20:43 +05:30
|
|
|
* components: hue, saturation and (brightness-)value. This file provides functions for converting
|
2021-04-12 16:11:12 +05:30
|
|
|
* colors from one representation to the other. (description adapted from
|
|
|
|
|
* https://en.wikipedia.org/wiki/RGB_color_model and https://en.wikipedia.org/wiki/HSL_and_HSV).
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Conversion from the HSV-representation to the RGB-representation.
|
|
|
|
|
*
|
|
|
|
|
* @param hue Hue of the color.
|
|
|
|
|
* @param saturation Saturation of the color.
|
|
|
|
|
* @param value Brightness-value of the color.
|
|
|
|
|
* @return The tuple of RGB-components.
|
|
|
|
|
*/
|
2023-10-03 23:08:19 +02:00
|
|
|
export function hsvToRgb(hue, saturation, value) {
|
2021-04-12 16:11:12 +05:30
|
|
|
if (hue < 0 || hue > 360) {
|
|
|
|
|
throw new Error('hue should be between 0 and 360')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (saturation < 0 || saturation > 1) {
|
|
|
|
|
throw new Error('saturation should be between 0 and 1')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (value < 0 || value > 1) {
|
|
|
|
|
throw new Error('value should be between 0 and 1')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const chroma = value * saturation
|
|
|
|
|
const hueSection = hue / 60
|
2023-10-03 23:08:19 +02:00
|
|
|
const secondLargestComponent = chroma * (1 - Math.abs((hueSection % 2) - 1))
|
2021-04-12 16:11:12 +05:30
|
|
|
const matchValue = value - chroma
|
|
|
|
|
|
|
|
|
|
return getRgbBySection(hueSection, chroma, matchValue, secondLargestComponent)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Conversion from the RGB-representation to the HSV-representation.
|
|
|
|
|
*
|
|
|
|
|
* @param red Red-component of the color.
|
|
|
|
|
* @param green Green-component of the color.
|
|
|
|
|
* @param blue Blue-component of the color.
|
|
|
|
|
* @return The tuple of HSV-components.
|
|
|
|
|
*/
|
2023-10-03 23:08:19 +02:00
|
|
|
export function rgbToHsv(red, green, blue) {
|
2021-04-12 16:11:12 +05:30
|
|
|
if (red < 0 || red > 255) {
|
|
|
|
|
throw new Error('red should be between 0 and 255')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (green < 0 || green > 255) {
|
|
|
|
|
throw new Error('green should be between 0 and 255')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (blue < 0 || blue > 255) {
|
|
|
|
|
throw new Error('blue should be between 0 and 255')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const dRed = red / 255
|
|
|
|
|
const dGreen = green / 255
|
|
|
|
|
const dBlue = blue / 255
|
|
|
|
|
const value = Math.max(Math.max(dRed, dGreen), dBlue)
|
|
|
|
|
const chroma = value - Math.min(Math.min(dRed, dGreen), dBlue)
|
|
|
|
|
const saturation = value === 0 ? 0 : chroma / value
|
|
|
|
|
let hue
|
|
|
|
|
|
|
|
|
|
if (chroma === 0) {
|
|
|
|
|
hue = 0
|
|
|
|
|
} else if (value === dRed) {
|
2021-10-07 09:03:38 +02:00
|
|
|
hue = 60 * ((dGreen - dBlue) / chroma)
|
2021-04-12 16:11:12 +05:30
|
|
|
} else if (value === dGreen) {
|
|
|
|
|
hue = 60 * (2 + (dBlue - dRed) / chroma)
|
|
|
|
|
} else {
|
|
|
|
|
hue = 60 * (4 + (dRed - dGreen) / chroma)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
hue = (hue + 360) % 360
|
|
|
|
|
|
|
|
|
|
return [hue, saturation, value]
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-03 23:08:19 +02:00
|
|
|
export function approximatelyEqualHsv(hsv1, hsv2) {
|
2021-04-12 16:11:12 +05:30
|
|
|
const bHue = Math.abs(hsv1[0] - hsv2[0]) < 0.2
|
|
|
|
|
const bSaturation = Math.abs(hsv1[1] - hsv2[1]) < 0.002
|
|
|
|
|
const bValue = Math.abs(hsv1[2] - hsv2[2]) < 0.002
|
|
|
|
|
|
|
|
|
|
return bHue && bSaturation && bValue
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-03 23:08:19 +02:00
|
|
|
function getRgbBySection(
|
|
|
|
|
hueSection,
|
|
|
|
|
chroma,
|
|
|
|
|
matchValue,
|
|
|
|
|
secondLargestComponent
|
|
|
|
|
) {
|
|
|
|
|
function convertToInt(input) {
|
2021-04-12 16:20:43 +05:30
|
|
|
return Math.round(255 * input)
|
|
|
|
|
}
|
|
|
|
|
|
2021-04-12 16:11:12 +05:30
|
|
|
let red
|
|
|
|
|
let green
|
|
|
|
|
let blue
|
|
|
|
|
|
|
|
|
|
if (hueSection >= 0 && hueSection <= 1) {
|
|
|
|
|
red = convertToInt(chroma + matchValue)
|
|
|
|
|
green = convertToInt(secondLargestComponent + matchValue)
|
|
|
|
|
blue = convertToInt(matchValue)
|
|
|
|
|
} else if (hueSection > 1 && hueSection <= 2) {
|
|
|
|
|
red = convertToInt(secondLargestComponent + matchValue)
|
|
|
|
|
green = convertToInt(chroma + matchValue)
|
|
|
|
|
blue = convertToInt(matchValue)
|
|
|
|
|
} else if (hueSection > 2 && hueSection <= 3) {
|
|
|
|
|
red = convertToInt(matchValue)
|
|
|
|
|
green = convertToInt(chroma + matchValue)
|
|
|
|
|
blue = convertToInt(secondLargestComponent + matchValue)
|
|
|
|
|
} else if (hueSection > 3 && hueSection <= 4) {
|
|
|
|
|
red = convertToInt(matchValue)
|
|
|
|
|
green = convertToInt(secondLargestComponent + matchValue)
|
|
|
|
|
blue = convertToInt(chroma + matchValue)
|
|
|
|
|
} else if (hueSection > 4 && hueSection <= 5) {
|
|
|
|
|
red = convertToInt(secondLargestComponent + matchValue)
|
|
|
|
|
green = convertToInt(matchValue)
|
|
|
|
|
blue = convertToInt(chroma + matchValue)
|
|
|
|
|
} else {
|
|
|
|
|
red = convertToInt(chroma + matchValue)
|
|
|
|
|
green = convertToInt(matchValue)
|
|
|
|
|
blue = convertToInt(secondLargestComponent + matchValue)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return [red, green, blue]
|
|
|
|
|
}
|
