diff --git a/Snippets/Objects/colorUtils.js b/Snippets/Objects/colorUtils.js new file mode 100644 index 0000000..13ca9d4 --- /dev/null +++ b/Snippets/Objects/colorUtils.js @@ -0,0 +1,103 @@ +class ColorUtils { + constructor(r, g, b) { + this.r = r; + this.g = g; + this.b = b; + } + + getRGB() { + return `rgb(${this.r}, ${this.g}, ${this.b})`; + } + + getHSL() { + const hsl = this.rgbToHsl(this.r, this.g, this.b); + return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`; + } + + getHexCode() { + return `#${this.componentToHex(this.r)}${this.componentToHex( + this.g + )}${this.componentToHex(this.b)}`; + } + + getOppositeColor() { + return new ColorUtils(255 - this.r, 255 - this.g, 255 - this.b); + } + + brightenColor(percent) { + const factor = 1 + percent / 100; + const brightenedR = this.clamp(this.r * factor); + const brightenedG = this.clamp(this.g * factor); + const brightenedB = this.clamp(this.b * factor); + return new ColorUtils(brightenedR, brightenedG, brightenedB); + } + + lightenColor(percent) { + const factor = 1 + percent / 100; + const lightenedR = this.clamp(this.r + (255 - this.r) * (1 - factor)); + const lightenedG = this.clamp(this.g + (255 - this.g) * (1 - factor)); + const lightenedB = this.clamp(this.b + (255 - this.b) * (1 - factor)); + return new ColorUtils(lightenedR, lightenedG, lightenedB); + } + + rgbToHsl(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, + s, + l = (max + min) / 2; + + if (max === min) { + h = s = 0; // achromatic + } else { + const 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; + } + + h = Math.round(h * 360); + s = Math.round(s * 100); + l = Math.round(l * 100); + + return [h, s, l]; + } + + componentToHex(c) { + const hex = c.toString(16); + return hex.length === 1 ? "0" + hex : hex; + } + + clamp(value) { + return Math.min(255, Math.max(0, value)); + } +} + +// Example usage: +const color = new ColorUtils(100, 150, 200); + +console.log(color.getRGB()); // "rgb(100, 150, 200)" +console.log(color.getHSL()); // "hsl(210, 50%, 60%)" +console.log(color.getHexCode()); // "#6496c8" + +const oppositeColor = color.getOppositeColor(); +console.log(oppositeColor.getRGB()); // "rgb(155, 105, 55)" + +const brightenedColor = color.brightenColor(20); +console.log(brightenedColor.getRGB()); // "rgb(120, 180, 240)" + +const lightenedColor = color.lightenColor(20); +console.log(lightenedColor.getRGB()); // "rgb(124, 172, 216)"