nhb-toolbox
Version:
A versatile collection of smart, efficient, and reusable utility functions and classes for everyday development needs.
308 lines (307 loc) • 11.9 kB
JavaScript
import { _convertOpacityToHex, _isHex6, _isHex8, _isHSL, _isHSLA, _isRGB, _isRGBA, _isValidAlpha, } from './helpers.js';
import { extractAlphaColorValues, extractSolidColorValues } from './utils.js';
/**
* * 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)`).
*/
export 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})`;
};
/**
* * 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%)`).
*/
export 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))}%)`;
};
/**
* * 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`).
*/
export const convertHslToHex = (h, s, l) => {
const rgb = convertHslToRgb(h, s, l).match(/\d+/g).map(Number);
return convertRgbToHex(rgb[0], rgb[1], rgb[2]);
};
/**
* * 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%)`).
*/
export 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 convertRgbToHsl(r, g, b);
};
/**
* * 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`).
*/
export const convertRgbToHex = (r, g, b) => {
const hex = [r, g, b]
?.map((v) => v.toString(16).padStart(2, '0'))
?.join('')
?.toUpperCase();
return `#${hex}`;
};
/**
* * 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)`).
*/
export 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})`;
};
/**
* * 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)`).
*/
export const convertRgbToRgba = (r, g, b, a = 1) => {
let newAlpha = a;
if (!_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))})`;
};
/**
* * 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`).
*/
export const convertRgbaToHex8 = (r, g, b, a = 1) => {
let newAlpha = a;
if (!_isValidAlpha(a)) {
newAlpha = 1;
console.warn(`Alpha value must be between 0-1, ${a} converted to 1!`);
}
const hex = convertRgbToHex(r, g, b);
const alphaHex = _convertOpacityToHex(Math.round(newAlpha * 100));
return `${hex}${alphaHex}`;
};
/**
* * 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)`).
*/
export const convertHslaToRgba = (h, s, l, a = 1) => {
let newAlpha = a;
if (!_isValidAlpha(a)) {
newAlpha = 1;
console.warn(`Alpha value must be between 0-1, ${a} converted to 1!`);
}
const rgb = convertHslToRgb(h, s, l);
const rgbNumbers = extractSolidColorValues(rgb);
return convertRgbToRgba(rgbNumbers[0], rgbNumbers[1], rgbNumbers[2], parseFloat(newAlpha.toFixed(1)));
};
/**
* * 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)`).
*/
export const convertRgbaToHsla = (r, g, b, a = 1) => {
let newAlpha = a;
if (!_isValidAlpha(a)) {
newAlpha = 1;
console.warn(`Alpha value must be between 0-1, ${a} converted to 1!`);
}
const hsl = convertRgbToHsl(r, g, b);
const hslNumbers = extractSolidColorValues(hsl);
return `hsla(${hslNumbers[0]}, ${hslNumbers[1]}%, ${hslNumbers[2]}%, ${parseFloat(newAlpha.toFixed(1))})`;
};
/**
* * 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)`).
*/
export 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))})`;
};
/**
* * 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`).
*/
export const convertHslaToHex8 = (h, s, l, a = 1) => {
let newAlpha = a;
if (!_isValidAlpha(a)) {
newAlpha = 1;
console.warn(`Alpha value must be between 0-1, ${a} converted to 1!`);
}
const hex = convertHslToHex(h, s, l);
const alphaHex = _convertOpacityToHex(Math.round(newAlpha * 100));
return `${hex}${alphaHex}`;
};
/**
* * 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..
*/
export const convertHex8ToHsla = (hex8) => {
const rgba = convertHex8ToRgba(hex8);
return convertRgbaToHsla(...extractAlphaColorValues(rgba));
};
/**
* * 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`.
*/
export function convertColorCode(color) {
const trimmedColor = color?.trim();
if (_isHex6(trimmedColor)) {
return {
rgb: convertHexToRgb(trimmedColor),
hsl: convertHexToHsl(trimmedColor),
};
}
if (_isRGB(trimmedColor)) {
const rgbValues = extractSolidColorValues(trimmedColor);
return {
hex: convertRgbToHex(...rgbValues),
hsl: convertRgbToHsl(...rgbValues),
};
}
if (_isHSL(trimmedColor)) {
const hslValues = extractSolidColorValues(trimmedColor);
return {
hex: convertHslToHex(...hslValues),
rgb: convertHslToRgb(...hslValues),
};
}
if (_isHex8(trimmedColor)) {
return {
rgba: convertHex8ToRgba(trimmedColor),
hsla: convertHex8ToHsla(trimmedColor),
};
}
if (_isRGBA(trimmedColor)) {
const rgbaValues = extractAlphaColorValues(trimmedColor);
return {
hex8: convertRgbaToHex8(...rgbaValues),
hsla: convertRgbaToHsla(...rgbaValues),
};
}
if (_isHSLA(trimmedColor)) {
const hslaValues = extractAlphaColorValues(trimmedColor);
return {
hex8: convertHslaToHex8(...hslaValues),
rgba: convertHslaToRgba(...hslaValues),
};
}
throw new Error(`Unrecognized Color Format! ${color}`);
}