nhb-toolbox
Version:
A versatile collection of smart, efficient, and reusable utility functions and classes for everyday development needs.
325 lines (324 loc) • 13.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.convertHex8ToHsla = exports.convertHslaToHex8 = exports.convertHex8ToRgba = exports.convertRgbaToHsla = exports.convertHslaToRgba = exports.convertRgbaToHex8 = exports.convertRgbToRgba = exports.convertHexToRgb = exports.convertRgbToHex = exports.convertHexToHsl = exports.convertHslToHex = exports.convertRgbToHsl = exports.convertHslToRgb = void 0;
exports.convertColorCode = convertColorCode;
const helpers_1 = require("./helpers");
const utils_1 = require("./utils");
/**
* * Converts HSL to RGB color format.
*
* @param h - The hue component of the HSL color, in degrees (0 to 360).
* @param s - The saturation component of the HSL color, as a percentage (0 to 100).
* @param l - The lightness component of the HSL color, as a percentage (0 to 100).
* @returns A string representing the color in RGB format (e.g., `rgb(255, 0, 0)`).
*/
const convertHslToRgb = (h, s, l) => {
// Normalize the HSL values
s /= 100;
l /= 100;
const c = (1 - Math.abs(2 * l - 1)) * s;
const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
const m = l - c / 2;
let r = 0, g = 0, b = 0;
if (h >= 0 && h < 60)
[r, g] = [c, x];
else if (h >= 60 && h < 120)
[r, g] = [x, c];
else if (h >= 120 && h < 180)
[g, b] = [c, x];
else if (h >= 180 && h < 240)
[g, b] = [x, c];
else if (h >= 240 && h < 300)
[r, b] = [x, c];
else if (h >= 300 && h < 360)
[r, b] = [c, x];
r = Math.round((r + m) * 255);
g = Math.round((g + m) * 255);
b = Math.round((b + m) * 255);
return `rgb(${r}, ${g}, ${b})`;
};
exports.convertHslToRgb = convertHslToRgb;
/**
* * Converts RGB to HSL color format.
*
* @param r - The red component of the RGB color, in the range 0 to 255.
* @param g - The green component of the RGB color, in the range 0 to 255.
* @param b - The blue component of the RGB color, in the range 0 to 255.
* @returns A string representing the color in HSL format (e.g., `hsl(0, 100%, 50%)`).
*/
const convertRgbToHsl = (r, g, b) => {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h = 0, s = 0;
const l = (max + min) / 2;
if (max !== min) {
const diff = max - min;
s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
switch (max) {
case r:
h = (g - b) / diff + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / diff + 2;
break;
case b:
h = (r - g) / diff + 4;
break;
}
h *= 60;
}
return `hsl(${Math.round(h)}, ${Number((s * 100).toFixed(2))}%, ${Number((l * 100).toFixed(2))}%)`;
};
exports.convertRgbToHsl = convertRgbToHsl;
/**
* * Converts HSL to Hex color format.
*
* @param h - The hue component of the HSL color, in degrees (0 to 360).
* @param s - The saturation component of the HSL color, as a percentage (0 to 100).
* @param l - The lightness component of the HSL color, as a percentage (0 to 100).
* @returns A string representing the color in Hex format (e.g., `#FF0000`).
*/
const convertHslToHex = (h, s, l) => {
const rgb = (0, exports.convertHslToRgb)(h, s, l).match(/\d+/g).map(Number);
return (0, exports.convertRgbToHex)(rgb[0], rgb[1], rgb[2]);
};
exports.convertHslToHex = convertHslToHex;
/**
* * Converts Hex to HSL color format.
*
* @param hex - A string representing the color in Hex format (e.g., `#FF0000`).
* @returns A string representing the color in HSL format (e.g., `hsl(0, 100%, 50%)`).
*/
const convertHexToHsl = (hex) => {
let newHex = hex?.trim()?.replace('#', '');
if (newHex?.length === 3) {
newHex = newHex
?.split('')
?.map((char) => char + char)
?.join('');
}
const r = parseInt(newHex.slice(0, 2), 16);
const g = parseInt(newHex.slice(2, 4), 16);
const b = parseInt(newHex.slice(4, 6), 16);
return (0, exports.convertRgbToHsl)(r, g, b);
};
exports.convertHexToHsl = convertHexToHsl;
/**
* * Converts RGB to Hex color format.
*
* @param r - The red component of the RGB color, in the range 0 to 255.
* @param g - The green component of the RGB color, in the range 0 to 255.
* @param b - The blue component of the RGB color, in the range 0 to 255.
* @returns A string representing the color in Hex format (e.g., `#FF0000`).
*/
const convertRgbToHex = (r, g, b) => {
const hex = [r, g, b]
?.map((v) => v.toString(16).padStart(2, '0'))
?.join('')
?.toUpperCase();
return `#${hex}`;
};
exports.convertRgbToHex = convertRgbToHex;
/**
* * Converts Hex to RGB color format.
*
* @param hex - A string representing the color in Hex format (e.g., `#FF0000`).
* @returns A string representing the color in RGB format (e.g., `rgb(255, 0, 0)`).
*/
const convertHexToRgb = (hex) => {
// Remove the # if present
let newHex = hex?.trim()?.replace('#', '');
if (newHex?.length === 3) {
newHex = newHex
?.split('')
?.map((char) => char + char)
?.join('');
}
const r = parseInt(newHex.slice(0, 2), 16);
const g = parseInt(newHex.slice(2, 4), 16);
const b = parseInt(newHex.slice(4, 6), 16);
return `rgb(${r}, ${g}, ${b})`;
};
exports.convertHexToRgb = convertHexToRgb;
/**
* * Converts RGB to RGBA format, adding alpha (opacity).
*
* @param r - The red component of the RGB color, in the range 0 to 255.
* @param g - The green component of the RGB color, in the range 0 to 255.
* @param b - The blue component of the RGB color, in the range 0 to 255.
* @param a - The alpha (opacity) value, in the range 0 to 1.
* @returns A string representing the color in RGBA format (e.g., `rgba(255, 0, 0, 0.5)`).
*/
const convertRgbToRgba = (r, g, b, a = 1) => {
let newAlpha = a;
if (!(0, helpers_1._isValidAlpha)(a)) {
newAlpha = 1;
console.warn(`Alpha value must be between 0-1, ${a} converted to 1!`);
}
return `rgba(${r}, ${g}, ${b}, ${parseFloat(newAlpha.toFixed(1))})`;
};
exports.convertRgbToRgba = convertRgbToRgba;
/**
* * Converts RGBA to Hex format, including alpha channel as part of Hex8.
*
* @param r - The red component of the RGB color, in the range 0 to 255.
* @param g - The green component of the RGB color, in the range 0 to 255.
* @param b - The blue component of the RGB color, in the range 0 to 255.
* @param a - The alpha (opacity) value, in the range 0 to 1.
* @returns A string representing the color in Hex8 format (e.g., `#FF000080`).
*/
const convertRgbaToHex8 = (r, g, b, a = 1) => {
let newAlpha = a;
if (!(0, helpers_1._isValidAlpha)(a)) {
newAlpha = 1;
console.warn(`Alpha value must be between 0-1, ${a} converted to 1!`);
}
const hex = (0, exports.convertRgbToHex)(r, g, b);
const alphaHex = (0, helpers_1._convertOpacityToHex)(Math.round(newAlpha * 100));
return `${hex}${alphaHex}`;
};
exports.convertRgbaToHex8 = convertRgbaToHex8;
/**
* * Converts HSLA to RGBA color format, including alpha channel.
*
* @param h - The hue component of the HSL color, in degrees (0 to 360).
* @param s - The saturation component of the HSL color, as a percentage (0 to 100).
* @param l - The lightness component of the HSL color, as a percentage (0 to 100).
* @param a - The alpha (opacity) value, in the range 0 to 1.
* @returns A string representing the color in RGBA format (e.g., `rgba(255, 0, 0, 0.5)`).
*/
const convertHslaToRgba = (h, s, l, a = 1) => {
let newAlpha = a;
if (!(0, helpers_1._isValidAlpha)(a)) {
newAlpha = 1;
console.warn(`Alpha value must be between 0-1, ${a} converted to 1!`);
}
const rgb = (0, exports.convertHslToRgb)(h, s, l);
const rgbNumbers = (0, utils_1.extractSolidColorValues)(rgb);
return (0, exports.convertRgbToRgba)(rgbNumbers[0], rgbNumbers[1], rgbNumbers[2], parseFloat(newAlpha.toFixed(1)));
};
exports.convertHslaToRgba = convertHslaToRgba;
/**
* * Converts RGBA to HSLA color format, including alpha channel.
*
* @param r - The red component of the RGB color, in the range 0 to 255.
* @param g - The green component of the RGB color, in the range 0 to 255.
* @param b - The blue component of the RGB color, in the range 0 to 255.
* @param a - The alpha (opacity) value, in the range 0 to 1.
* @returns A string representing the color in HSLA format (e.g., `hsla(0, 100%, 50%, 0.5)`).
*/
const convertRgbaToHsla = (r, g, b, a = 1) => {
let newAlpha = a;
if (!(0, helpers_1._isValidAlpha)(a)) {
newAlpha = 1;
console.warn(`Alpha value must be between 0-1, ${a} converted to 1!`);
}
const hsl = (0, exports.convertRgbToHsl)(r, g, b);
const hslNumbers = (0, utils_1.extractSolidColorValues)(hsl);
return `hsla(${hslNumbers[0]}, ${hslNumbers[1]}%, ${hslNumbers[2]}%, ${parseFloat(newAlpha.toFixed(1))})`;
};
exports.convertRgbaToHsla = convertRgbaToHsla;
/**
* * Converts Hex8 to RGBA color format, including alpha channel.
* - `Special Note:` Cast the parameter to `Hex8` before converting to `RGBA`.
* @example convertHex8ToRgba('#FFF122DE' as Hex8)
*
* @param hex8 - A string representing the color in Hex8 format (e.g., `#FF000080`).
* @returns A string representing the color in RGBA format (e.g., `rgba(255, 0, 0, 0.5)`).
*/
const convertHex8ToRgba = (hex8) => {
const hex = hex8?.trim()?.replace('#', '');
const r = parseInt(hex.slice(0, 2), 16);
const g = parseInt(hex.slice(2, 4), 16);
const b = parseInt(hex.slice(4, 6), 16);
const a = parseInt(hex.slice(6, 8), 16) / 255;
return `rgba(${r}, ${g}, ${b}, ${parseFloat(a.toFixed(1))})`;
};
exports.convertHex8ToRgba = convertHex8ToRgba;
/**
* * Converts HSLA to Hex8 color format, including alpha channel.
*
* @param h - The hue component of the HSL color, in degrees (0 to 360).
* @param s - The saturation component of the HSL color, as a percentage (0 to 100).
* @param l - The lightness component of the HSL color, as a percentage (0 to 100).
* @param a - The alpha (opacity) value, in the range 0 to 1.
* @returns A string representing the color in Hex8 format (e.g., `#658789DF`).
*/
const convertHslaToHex8 = (h, s, l, a = 1) => {
let newAlpha = a;
if (!(0, helpers_1._isValidAlpha)(a)) {
newAlpha = 1;
console.warn(`Alpha value must be between 0-1, ${a} converted to 1!`);
}
const hex = (0, exports.convertHslToHex)(h, s, l);
const alphaHex = (0, helpers_1._convertOpacityToHex)(Math.round(newAlpha * 100));
return `${hex}${alphaHex}`;
};
exports.convertHslaToHex8 = convertHslaToHex8;
/**
* * Converts Hex8 to HSLA color format.
* - `Special Note:` Cast the parameter to `Hex8` before converting to `HSLA`.
* @example convertHex8ToHsla('#FFF122DE' as Hex8)
*
* @param hex - A string representing the color in Hex format (e.g., `#FF0000DE`).
* @returns A string representing the color in HSLA format..
*/
const convertHex8ToHsla = (hex8) => {
const rgba = (0, exports.convertHex8ToRgba)(hex8);
return (0, exports.convertRgbaToHsla)(...(0, utils_1.extractAlphaColorValues)(rgba));
};
exports.convertHex8ToHsla = convertHex8ToHsla;
/**
* * Converts a color from `Hex`, `RGB`, or `HSL` format to its equivalent representations.
*
* @param color The color string in `Hex`, `RGB`, or `HSL` format.
* @returns The converted color representations excluding the input format.
* @throws If the color format is unrecognized throws `Error`.
*/
function convertColorCode(color) {
const trimmedColor = color?.trim();
if ((0, helpers_1._isHex6)(trimmedColor)) {
return {
rgb: (0, exports.convertHexToRgb)(trimmedColor),
hsl: (0, exports.convertHexToHsl)(trimmedColor),
};
}
if ((0, helpers_1._isRGB)(trimmedColor)) {
const rgbValues = (0, utils_1.extractSolidColorValues)(trimmedColor);
return {
hex: (0, exports.convertRgbToHex)(...rgbValues),
hsl: (0, exports.convertRgbToHsl)(...rgbValues),
};
}
if ((0, helpers_1._isHSL)(trimmedColor)) {
const hslValues = (0, utils_1.extractSolidColorValues)(trimmedColor);
return {
hex: (0, exports.convertHslToHex)(...hslValues),
rgb: (0, exports.convertHslToRgb)(...hslValues),
};
}
if ((0, helpers_1._isHex8)(trimmedColor)) {
return {
rgba: (0, exports.convertHex8ToRgba)(trimmedColor),
hsla: (0, exports.convertHex8ToHsla)(trimmedColor),
};
}
if ((0, helpers_1._isRGBA)(trimmedColor)) {
const rgbaValues = (0, utils_1.extractAlphaColorValues)(trimmedColor);
return {
hex8: (0, exports.convertRgbaToHex8)(...rgbaValues),
hsla: (0, exports.convertRgbaToHsla)(...rgbaValues),
};
}
if ((0, helpers_1._isHSLA)(trimmedColor)) {
const hslaValues = (0, utils_1.extractAlphaColorValues)(trimmedColor);
return {
hex8: (0, exports.convertHslaToHex8)(...hslaValues),
rgba: (0, exports.convertHslaToRgba)(...hslaValues),
};
}
throw new Error(`Unrecognized Color Format! ${color}`);
}