@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
94 lines (93 loc) • 3.69 kB
JavaScript
function convertHexToHslString(hexColor) {
const cleanHex = hexColor.replace("#", "");
const r = Number.parseInt(cleanHex.slice(0, 2), 16) / 255;
const g = Number.parseInt(cleanHex.slice(2, 4), 16) / 255;
const b = Number.parseInt(cleanHex.slice(4, 6), 16) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h = 0;
let s = 0;
const l = (max + min) / 2;
if (max !== min) {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
h = max === r ? ((g - b) / d + (g < b ? 6 : 0)) / 6 : max === g ? ((b - r) / d + 2) / 6 : ((r - g) / d + 4) / 6;
}
return `${Math.round(360 * h)} ${Math.round(100 * s)}% ${Math.round(100 * l)}%`;
}
function convertHslToHexString(hue, saturation, lightness) {
const sNorm = saturation / 100;
const lNorm = lightness / 100;
const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
const x = c * (1 - Math.abs(hue / 60 % 2 - 1));
const m = lNorm - c / 2;
const getRgb = ()=>{
if (hue >= 0 && hue < 60) return [
c,
x,
0
];
if (hue >= 60 && hue < 120) return [
x,
c,
0
];
if (hue >= 120 && hue < 180) return [
0,
c,
x
];
if (hue >= 180 && hue < 240) return [
0,
x,
c
];
if (hue >= 240 && hue < 300) return [
x,
0,
c
];
return [
c,
0,
x
];
};
const rgb = getRgb();
const toHex = (n)=>Math.round((n + m) * 255).toString(16).padStart(2, "0");
return `#${toHex(rgb[0])}${toHex(rgb[1])}${toHex(rgb[2])}`;
}
function validateHexColorFormat(hexColor) {
return /^#?[\dA-Fa-f]{6}$/u.test(hexColor);
}
function calculateComplementaryHexColor(hexColor) {
const cleanHex = hexColor.replace("#", "");
const r = 255 - Number.parseInt(cleanHex.slice(0, 2), 16);
const g = 255 - Number.parseInt(cleanHex.slice(2, 4), 16);
const b = 255 - Number.parseInt(cleanHex.slice(4, 6), 16);
return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
}
function adjustHexColorLightness(hexColor, lightnessAdjustment) {
const hsl = convertHexToHslString(hexColor);
const [h, s, l] = hsl.split(" ").map((v, i)=>0 === i ? Number.parseInt(v, 10) : Number.parseInt(v.replace("%", ""), 10));
const newL = Math.max(0, Math.min(100, (l ?? 50) + lightnessAdjustment));
return convertHslToHexString(h ?? 0, s ?? 50, newL);
}
function parseHslStringToComponents(hslString) {
const pattern = /^(?<hue>\d+)\s+(?<sat>\d+)%\s+(?<light>\d+)%$/u;
const match = pattern.exec(hslString);
if (!match?.groups) return null;
return {
hue: Number.parseInt(match.groups["hue"] ?? "0", 10),
saturation: Number.parseInt(match.groups["sat"] ?? "0", 10),
lightness: Number.parseInt(match.groups["light"] ?? "0", 10)
};
}
const hexToHsl = convertHexToHslString;
const hslToHex = convertHslToHexString;
const isValidHexColor = validateHexColorFormat;
const getComplementaryColor = calculateComplementaryHexColor;
const adjustLightness = adjustHexColorLightness;
const parseHslString = parseHslStringToComponents;
export { adjustHexColorLightness, adjustLightness, calculateComplementaryHexColor, convertHexToHslString, convertHslToHexString, getComplementaryColor, hexToHsl, hslToHex, isValidHexColor, parseHslString, parseHslStringToComponents, validateHexColorFormat };
//# sourceMappingURL=color-conversion-utilities.js.map