Last active
March 25, 2023 15:23
-
-
Save KamikariCat/3ba5f86175952bfc428cdad77ed77fcf to your computer and use it in GitHub Desktop.
Color conversion functions (RGB, HEX, HSV, HSL)
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
/** | |
* Converts an RGB color value to HSL. Conversion formula | |
* adapted from http://en.wikipedia.org/wiki/HSL_color_space. | |
* Assumes r, g, and b are contained in the set [0, 255] and | |
* returns h, s, and l in the set [0, 1]. | |
* | |
* @return string The HSL representation | |
* @param r | |
* @param g | |
* @param b | |
*/ | |
const RGB2HSL => (r, g, b) { | |
r /= 255, g /= 255, b /= 255; | |
let max = Math.max(r, g, b), min = Math.min(r, g, b); | |
let h, s, l = (max + min) / 2; | |
if (max === min) { | |
h = s = 0; // achromatic | |
} else { | |
let d = max - min; | |
s = l > 0.5 ? d / (2 - max - min) : d / (max + min); | |
switch (max) { | |
case r: h = (g - b) / d + (g < b ? 6 : 0); break; | |
case g: h = (b - r) / d + 2; break; | |
case b: h = (r - g) / d + 4; break; | |
} | |
h /= 6; | |
} | |
return `hsv(${convertColorFractionToInteger(h)}, ${convertColorFractionToInteger(s)}, ${convertColorFractionToInteger(l)})`; | |
} | |
/** | |
* Converts an HSL color value to RGB. Conversion formula | |
* adapted from http://en.wikipedia.org/wiki/HSL_color_space. | |
* Assumes h, s, and l are contained in the set [0, 1] and | |
* returns r, g, and b in the set [0, 255]. | |
* | |
* @return string The RGB representation | |
* @param h | |
* @param s | |
* @param l | |
*/ | |
const HSL2RGB => (h, s, l) { | |
let r, g, b; | |
if (s === 0) { | |
r = g = b = l; // achromatic | |
} else { | |
function hue2rgb(p, q, t) { | |
if (t < 0) t += 1; | |
if (t > 1) t -= 1; | |
if (t < 1/6) return p + (q - p) * 6 * t; | |
if (t < 1/2) return q; | |
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; | |
return p; | |
} | |
let q = l < 0.5 ? l * (1 + s) : l + s - l * s; | |
let p = 2 * l - q; | |
r = hue2rgb(p, q, h + 1/3); | |
g = hue2rgb(p, q, h); | |
b = hue2rgb(p, q, h - 1/3); | |
} | |
return `rgb(${r * 255}, ${g * 255}, ${b * 255})`; | |
} | |
/** | |
* Converts an RGB color value to HSV. Conversion formula | |
* adapted from http://en.wikipedia.org/wiki/HSV_color_space. | |
* Assumes r, g, and b are contained in the set [0, 255] and | |
* returns h, s, and v in the set [0, 1]. | |
* | |
* @return string The HSV representation | |
* @param r | |
* @param g | |
* @param b | |
*/ | |
const RGB2HSV => (r, g, b) { | |
r /= 255, g /= 255, b /= 255; | |
let max = Math.max(r, g, b), min = Math.min(r, g, b); | |
let h, s, v = max; | |
let d = max - min; | |
s = max === 0 ? 0 : d / max; | |
if (max === min) { | |
h = 0; // achromatic | |
} else { | |
switch (max) { | |
case r: h = (g - b) / d + (g < b ? 6 : 0); break; | |
case g: h = (b - r) / d + 2; break; | |
case b: h = (r - g) / d + 4; break; | |
} | |
h /= 6; | |
} | |
return `hsv(${convertColorFractionToInteger(h)}, ${convertColorFractionToInteger(s)}, ${convertColorFractionToInteger(v)})`; | |
} | |
/** | |
* Converts an HSV color value to RGB. Conversion formula | |
* adapted from http://en.wikipedia.org/wiki/HSV_color_space. | |
* Assumes h, s, and v are contained in the set [0, 1] and | |
* returns r, g, and b in the set [0, 255]. | |
* | |
* @return string The RGB representation | |
* @param h | |
* @param s | |
* @param v | |
*/ | |
const HSV2RGB => (h, s, v) { | |
let r, g, b; | |
let i = Math.floor(h * 6); | |
let f = h * 6 - i; | |
let p = v * (1 - s); | |
let q = v * (1 - f * s); | |
let t = v * (1 - (1 - f) * s); | |
switch (i % 6) { | |
case 0: r = v, g = t, b = p; break; | |
case 1: r = q, g = v, b = p; break; | |
case 2: r = p, g = v, b = t; break; | |
case 3: r = p, g = q, b = v; break; | |
case 4: r = t, g = p, b = v; break; | |
case 5: r = v, g = p, b = q; break; | |
} | |
return `rgb(${r * 255}, ${g * 255}, ${b * 255})`; | |
} | |
/** | |
* | |
* @param hex Hex String | |
* @param strObj | |
* @return string rgb(r, g, b) String | |
*/ | |
const HEX2RGB => (hex, strObj = false) { | |
let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; | |
hex = hex.replace(shorthandRegex, function(m, r, g, b) { | |
return r + r + g + g + b + b; | |
}); | |
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | |
if ( strObj ) { | |
return result ? { | |
r: parseInt(result[1], 16), | |
g: parseInt(result[2], 16), | |
b: parseInt(result[3], 16) | |
} : null; | |
} else { | |
return result ? `rgb(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)})` : null; | |
} | |
} | |
/** | |
* | |
* @param r | |
* @param g | |
* @param b | |
* @returns {string} hex string | |
* @return {string} | |
*/ | |
const RGB2HEX => (r, g, b) { | |
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment