color-util-helpers 0.0.21

package/README.md

@@ -0,0 +1,176 @@
+# Color Util Helpers
+
+This lib contains a variety of very useful color utils
+
+- Color conversion (HEX<->RGB)
+- Generate a Color Pallette (from image - eg: Pintrest before image loads)
+- Color Extractor Directive (from inline image - eg: Pintrest before image loads)
+- Text Color - provides the color to use (you provide light and dark) based on color provided
+- Color Lighten Darken - Takes a color and you can darken or lighten
+- Generate Random Color - This function generates a random hue value between 0 and 360 degrees, and random saturation and lightness values between 50% and 100%.
+- Color Grabber - Directive when applied to a div will get the average color of the provided url of an image and then change the background color.
+
+## Installation
+
+`npm install color-util-helpers`
+
+## Demo
+
+Import the `ColorUtilHelpersModule`
+
+add the selector `<app-color-utilities-demo></app-color-utilities-demo>`
+
+## Color Conversion Service
+
+Converts RGB to HEX or HEX to RGB
+
+### Installation
+
+npm install color-util-helpers
+
+### Usage
+
+    rgbToHex(rgb: number[]): string 
+
+    hexToRgb(hex: string): string
+
+
+## Color Pallette Service and Directive
+
+### Usage
+
+Because this is a Directive - import the `ColorExtractorDirective`
+
+define image path
+
+    this.colorSelectionService.getColorsFromImage('../assets/sample2.jpg')
+
+### Usage
+
+    this.colorSelectionService.palette.subscribe(data => this.palette = data)
+
+### Template Usage
+
+    <div *ngFor="let color of palette">
+      <div style="display: flex;">
+          <div 
+              class="box"
+              [style.background-color]="color.color"
+          >
+          Color
+          </div>
+          <div 
+              class="box"
+              [style.background-color]="color.complementaryColor"
+          >
+          Complementary
+          </div>
+      </div>
+    </div>
+
+CSS Style
+
+    CSS
+      .box {
+        width: 100px; 
+        height: 100px; 
+        border: solid thin black; 
+        color: black; 
+        margin: 4px; 
+        padding: 16px; 
+        display: flex; 
+        flex-wrap: wrap; 
+        align-content: center; 
+        justify-content: center;
+    }
+
+## Text Color Service
+
+Provide a color that is used for a background and then provide the lightColor and darkColor
+The function will return the appropriate color based on the background color provided
+
+### Usage
+
+This function takes `bgColor` and by providing the  `lightColor` and `darkColor` compares them to the background and returns the color that will best work for the visibility of the background color.
+
+These colors may be represented as RGB or HEX
+
+```ts
+textColorForBgColor(bgColor: string, lightColor: string, darkColor: string)
+```
+
+This function takes two colors and compares them and returns the darker color.
+The color may be represented as RGB or HEX
+
+```ts
+isColorDarker(color1: string, color2: string)
+```
+
+## Color Lighten Darken Service
+
+This function takes a color and percentage of lightness/darkness and returns the new color. The amount is a value between 0-1. This function changes the HSL of the color keeping the saturation values.
+
+Example: .5 is 50%.
+
+```ts
+lighten(color: string, amount: number)
+```
+
+```ts
+darken(color: string, amount: number)
+```
+
+## Generate Random Color Service
+
+This function takes a color '#3498db' and lightens the color by 20% and also darkens the color by 20%.
+
+```ts
+  const color = '#3498db'; // Your color
+  const lighterColor = lighten(color, 0.2); // 20% lighter
+  const darkerColor = darken(color, 0.2); // 20% darker
+
+  console.log(lighterColor, darkerColor);
+```
+
+# Color Grabber
+
+This Angular Directive when applied to a div will get the average color of the provided url of an image and then change the background color to that color. Any test inside the div will be colored white or black based on the average color of the image that best suites it.
+
+## Usage
+
+Because this is a Directive - import the `ColorUtilitiesModule`
+In the following example, the mat-card container has the `colorGrab` directive applied.
+
+The `[imageUrl]="image"` is the image to grab the color from.
+
+The `[light]="'#FFFFFF'"` is the light color to use if the average color is dark.
+The `[dark]="'#000000'"` is the dark color to use if the average color is light.
+
+The mat-card contaner background color will change to this color
+
+The Text inside this container will also change ether to black or white depending what suites best based on that colors image.
+
+To use in the directive, use the following
+
+```
+image = "https://picsum.photos/id/1/5616/3744"
+```
+
+```
+<mat-card style="margin: 8px;"
+  colorGrab [imageUrl]="image" [light]="'rgb(220, 220, 220)'" [dark]="'rgb(47, 79, 79)'"
+  class="box"
+  >
+    <h3>{{ item.author }}</h3>
+    <img [src]="image" width="160" height="120" style="object-fit: cover;">
+</mat-card>
+```
+
+## Paramiter
+
+> imageUrl - provide the full URL of the image (png, jpg) 
+
+```
+colorGrab [imageUrl]="item.download_url"
+```
+

package/fesm2022/color-util-helpers.mjs

@@ -0,0 +1,769 @@
+import * as i0 from '@angular/core';
+import { Input, Directive, Injectable, inject, Component, EventEmitter, HostListener, Output, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { BehaviorSubject } from 'rxjs';
+
+class ColorGrabberDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnInit() {
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        this.ctx = canvas.getContext('2d');
+        const img = new Image();
+        img.src = this.imageUrl || '';
+        img.setAttribute('crossOrigin', '');
+        img.onload = () => {
+            this.ctx?.drawImage(img, 0, 0, 1, 1);
+            const imageData = this.ctx?.getImageData(0, 0, 1, 1);
+            if (imageData && imageData.data) {
+                const i = imageData.data;
+                const rgbColor = `rgba(${i[0]},${i[1]},${i[2]},${i[3]})`;
+                const hexColor = "#" + ((1 << 24) + (i[0] << 16) + (i[1] << 8) + i[2]).toString(16).slice(1);
+                const textColor = this.textColorBasedOnBgColor(hexColor, this.light, this.dark);
+                const hsv = this.RGB2HSV({ r: i[0], g: i[1], b: i[2] });
+                hsv.hue = this.HueShift(hsv.hue, 135.0);
+                const secondaryColor = this.HSV2RGB(hsv);
+                const highlightColor = this.lightenDarkenColor(secondaryColor.hex, 50);
+                this.el.nativeElement.style.backgroundColor = rgbColor;
+                this.el.nativeElement.style.color = textColor;
+            }
+            else {
+                console.error("Failed to get image data.");
+            }
+        };
+    }
+    textColorBasedOnBgColor(bgColor, lightColor = '#FFFFFF', darkColor = '#000000') {
+        const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
+        const r = parseInt(color.substring(0, 2), 16); // hexToR
+        const g = parseInt(color.substring(2, 4), 16); // hexToG
+        const b = parseInt(color.substring(4, 6), 16); // hexToB
+        const uicolors = [r / 255, g / 255, b / 255];
+        const c = uicolors.map((col) => {
+            if (col <= 0.03928)
+                return col / 12.92;
+            return Math.pow((col + 0.055) / 1.055, 2.4);
+        });
+        const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
+        return (L > 0.179) ? darkColor : lightColor;
+    }
+    RGB2HSV(rgb) {
+        const hsv = { saturation: 0, hue: 0, value: 0 };
+        const max = this.max3(rgb.r, rgb.g, rgb.b);
+        const dif = max - this.min3(rgb.r, rgb.g, rgb.b);
+        hsv.saturation = (max == 0.0) ? 0 : (100 * dif / max);
+        if (hsv.saturation == 0) {
+            hsv.hue = 0;
+        }
+        else if (rgb.r == max) {
+            hsv.hue = 60.0 * (rgb.g - rgb.b) / dif;
+        }
+        else if (rgb.g == max) {
+            hsv.hue = 120.0 + 60.0 * (rgb.b - rgb.r) / dif;
+        }
+        else if (rgb.b == max) {
+            hsv.hue = 240.0 + 60.0 * (rgb.r - rgb.g) / dif;
+        }
+        if (hsv.hue < 0.0)
+            hsv.hue += 360.0;
+        hsv.value = Math.round(max * 100 / 255);
+        hsv.hue = Math.round(hsv.hue);
+        hsv.saturation = Math.round(hsv.saturation);
+        return hsv;
+    }
+    HSV2RGB(hsv) {
+        const rgb = { r: 0, g: 0, b: 0 };
+        if (hsv.saturation == 0) {
+            rgb.r = rgb.g = rgb.b = Math.round(hsv.value * 2.55);
+        }
+        else {
+            hsv.hue /= 60;
+            hsv.saturation /= 100;
+            hsv.value /= 100;
+            const i = Math.floor(hsv.hue);
+            const f = hsv.hue - i;
+            const p = hsv.value * (1 - hsv.saturation);
+            const q = hsv.value * (1 - hsv.saturation * f);
+            const t = hsv.value * (1 - hsv.saturation * (1 - f));
+            switch (i) {
+                case 0:
+                    rgb.r = hsv.value;
+                    rgb.g = t;
+                    rgb.b = p;
+                    break;
+                case 1:
+                    rgb.r = q;
+                    rgb.g = hsv.value;
+                    rgb.b = p;
+                    break;
+                case 2:
+                    rgb.r = p;
+                    rgb.g = hsv.value;
+                    rgb.b = t;
+                    break;
+                case 3:
+                    rgb.r = p;
+                    rgb.g = q;
+                    rgb.b = hsv.value;
+                    break;
+                case 4:
+                    rgb.r = t;
+                    rgb.g = p;
+                    rgb.b = hsv.value;
+                    break;
+                default:
+                    rgb.r = hsv.value;
+                    rgb.g = p;
+                    rgb.b = q;
+            }
+            rgb.r = Math.round(rgb.r * 255);
+            rgb.g = Math.round(rgb.g * 255);
+            rgb.b = Math.round(rgb.b * 255);
+        }
+        const rgbColor = `rgba(${rgb.r},${rgb.g},${rgb.b},${1})`;
+        const hexColor = "#" + ((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1);
+        return { rgb: rgbColor, hex: hexColor };
+    }
+    HueShift(h, s) {
+        h += s;
+        while (h >= 360.0)
+            h -= 360.0;
+        while (h < 0.0)
+            h += 360.0;
+        return h;
+    }
+    min3(a, b, c) {
+        return (a < b) ? ((a < c) ? a : c) : ((b < c) ? b : c);
+    }
+    max3(a, b, c) {
+        return (a > b) ? ((a > c) ? a : c) : ((b > c) ? b : c);
+    }
+    lightenDarkenColor(colorCode, amount) {
+        var usePound = false;
+        if (colorCode[0] == "#") {
+            colorCode = colorCode.slice(1);
+            usePound = true;
+        }
+        var num = parseInt(colorCode, 16);
+        var r = (num >> 16) + amount;
+        if (r > 255) {
+            r = 255;
+        }
+        else if (r < 0) {
+            r = 0;
+        }
+        var b = ((num >> 8) & 0x00FF) + amount;
+        if (b > 255) {
+            b = 255;
+        }
+        else if (b < 0) {
+            b = 0;
+        }
+        var g = (num & 0x0000FF) + amount;
+        if (g > 255) {
+            g = 255;
+        }
+        else if (g < 0) {
+            g = 0;
+        }
+        return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorGrabberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ColorGrabberDirective, selector: "[colorGrabber]", inputs: { imageUrl: "imageUrl", light: "light", dark: "dark" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorGrabberDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[colorGrabber]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { imageUrl: [{
+                type: Input
+            }], light: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }] } });
+
+class ColorConversionService {
+    constructor() {
+        this.componentToHex = (c) => {
+            const hex = c.toString(16);
+            return hex.length === 1 ? "0" + hex : hex;
+        };
+    }
+    rgbToHex(rgb) {
+        if (rgb === null || rgb.length !== 3 || rgb.some(value => value < 0 || value > 255))
+            return '';
+        const [r, g, b] = rgb;
+        const hexR = this.componentToHex(r);
+        const hexG = this.componentToHex(g);
+        const hexB = this.componentToHex(b);
+        return "#" + hexR + hexG + hexB;
+    }
+    hexToRgb(hex) {
+        if (hex === null || hex === undefined)
+            return [];
+        hex = (hex.length === 3) ? hex + hex : hex;
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? [
+            parseInt(result[1], 16),
+            parseInt(result[2], 16),
+            parseInt(result[3], 16)
+        ] : [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorConversionService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorConversionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ColorPalletteService {
+    constructor(colorConversionService) {
+        this.colorConversionService = colorConversionService;
+        // define image path
+        // this.colorSelectionService.getColorsFromImage('../assets/sample2.jpg')
+        // get colors
+        // this.colorSelectionService.palette.subscribe(data => this.palette = data)
+        // sample html
+        //   <div *ngFor="let color of palette">
+        //     <div style="display: flex;">
+        //         <div
+        //             class="box"
+        //             [style.background-color]="color.color"
+        //         >
+        //         Color
+        //         </div>
+        //         <div
+        //             class="box"
+        //             [style.background-color]="color.complementaryColor"
+        //         >
+        //         Complementary
+        //         </div>
+        //     </div>
+        // </div>
+        // CSS
+        //   .box {
+        //     width: 100px;
+        //     height: 100px;
+        //     border: solid thin black;
+        //     color: black;
+        //     margin: 4px;
+        //     padding: 16px;
+        //     display: flex;
+        //     flex-wrap: wrap;
+        //     align-content: center;
+        //     justify-content: center;
+        // }
+        this.palette = new BehaviorSubject([]);
+        this.palette$ = this.palette.asObservable();
+    }
+    /**
+     * Retrieves a color palette from an image at the specified path.
+     *
+     * @param imagePath - The path to the image to extract the color palette from.
+     * @param colors - The number of colors to include in the palette (default is 3).
+     * @returns An observable that emits the generated color palette.
+     */
+    getColorsFromImage(imagePath, colors = 3) {
+        const image = new Image();
+        image.src = imagePath;
+        image.onload = () => {
+            const data = this.generateColorPalette(image, colors) || [];
+            this.palette.next(data);
+        };
+    }
+    /**
+     * Generates a color palette from an image.
+     *
+     * @param image - The HTML image element to extract the color palette from.
+     * @param colorCount - The number of colors to include in the palette (default is 6).
+     * @returns An array of color objects, each with a hex color and a complementary hex color.
+     */
+    generateColorPalette(image, colorCount = 6) {
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        if (!context)
+            return;
+        canvas.width = image.width;
+        canvas.height = image.height;
+        context.drawImage(image, 0, 0);
+        // Get the image data
+        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+        const pixels = imageData.data;
+        const pixelCount = imageData.width * imageData.height;
+        // Build an array of RGB colors
+        const colors = [];
+        for (let i = 0; i < pixelCount; i++) {
+            const offset = i * 4;
+            const r = pixels[offset];
+            const g = pixels[offset + 1];
+            const b = pixels[offset + 2];
+            colors.push([r, g, b]);
+        }
+        // Apply color quantization using k-means clustering
+        const quantizedColors = this.kMeansColorQuantization(colors, colorCount);
+        // Order colors by luminance
+        quantizedColors.sort((color1, color2) => {
+            const luminance1 = this.getLuminance(color1);
+            const luminance2 = this.getLuminance(color2);
+            return luminance2 - luminance1;
+        });
+        const palette = quantizedColors.map((color) => {
+            const complementaryColor = color.map((component) => 255 - component);
+            const hexColor = this.colorConversionService.rgbToHex(color);
+            const hexComplementaryColor = this.colorConversionService.rgbToHex(complementaryColor);
+            return { color: hexColor, complementaryColor: hexComplementaryColor };
+        });
+        return palette;
+    }
+    getLuminance(color) {
+        const [r, g, b] = color;
+        return 0.299 * r + 0.587 * g + 0.114 * b;
+    }
+    calculateColorDistance(color1, color2) {
+        const [r1, g1, b1] = color1;
+        const [r2, g2, b2] = color2;
+        const dr = r2 - r1;
+        const dg = g2 - g1;
+        const db = b2 - b1;
+        return Math.sqrt(dr * dr + dg * dg + db * db);
+    }
+    calculateMeanColor(colors) {
+        let sumR = 0;
+        let sumG = 0;
+        let sumB = 0;
+        for (let i = 0; i < colors.length; i++) {
+            const [r, g, b] = colors[i];
+            sumR += r;
+            sumG += g;
+            sumB += b;
+        }
+        const meanR = Math.round(sumR / colors.length);
+        const meanG = Math.round(sumG / colors.length);
+        const meanB = Math.round(sumB / colors.length);
+        return [meanR, meanG, meanB];
+    }
+    kMeansColorQuantization(colors, k) {
+        let clusterCenters = [];
+        for (let i = 0; i < k; i++) {
+            const randomColor = colors[Math.floor(Math.random() * colors.length)];
+            clusterCenters.push(randomColor);
+        }
+        let clusters = [];
+        for (let i = 0; i < colors.length; i++) {
+            const color = colors[i];
+            let minDistance = Infinity;
+            let nearestCenter = null;
+            for (let j = 0; j < clusterCenters.length; j++) {
+                const center = clusterCenters[j];
+                const distance = this.calculateColorDistance(color, center);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    nearestCenter = center;
+                }
+            }
+            clusters.push({ color, center: nearestCenter });
+        }
+        let updatedCenters = [];
+        for (let i = 0; i < clusterCenters.length; i++) {
+            const center = clusterCenters[i];
+            const clusterColors = clusters.filter(c => c.center === center).map(c => c.color);
+            if (clusterColors.length > 0) {
+                const updatedCenter = this.calculateMeanColor(clusterColors);
+                updatedCenters.push(updatedCenter);
+            }
+        }
+        return updatedCenters;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorPalletteService, deps: [{ token: ColorConversionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorPalletteService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorPalletteService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: ColorConversionService }] });
+
+class TextColorService {
+    constructor(colorConversionService) {
+        this.colorConversionService = colorConversionService;
+    }
+    textColorForBgColor(bgColor, lightColor, darkColor) {
+        const UIColors = this.fixColor(bgColor);
+        const r = UIColors[0];
+        const g = UIColors[1];
+        const b = UIColors[2];
+        return ((r * 0.299 + g * 0.587 + b * 0.114) > 149) ? darkColor : lightColor;
+    }
+    darkerColor(color1, color2) {
+        return this.isColorDarker(color1, color2) ? color1 : color2;
+    }
+    isColorDarker(color1, color2) {
+        const newColor1 = this.fixColor(color1);
+        const newColor2 = this.fixColor(color2);
+        const luminance1 = this.calculateLuminance(newColor1[0], newColor1[1], newColor1[2]);
+        const luminance2 = this.calculateLuminance(newColor2[0], newColor2[1], newColor2[2]);
+        return luminance1 < luminance2;
+    }
+    lighterColor(color1, color2) {
+        return (this.isColorLighter(color1, color2)) ? color1 : color2;
+    }
+    isColorLighter(color1, color2) {
+        const newColor1 = this.fixColor(color1);
+        const newColor2 = this.fixColor(color2);
+        const luminance1 = this.calculateLuminance(newColor1[0], newColor1[1], newColor1[2]);
+        const luminance2 = this.calculateLuminance(newColor2[0], newColor2[1], newColor2[2]);
+        return (luminance1 > luminance2);
+    }
+    calculateLuminance(r, g, b) {
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    }
+    fixColor(color) {
+        // Remove leading hash if present
+        const sanitizedColor = color.startsWith('#') ? color.slice(1) : color;
+        // Validate if the color is a valid hex (3 or 6 characters)
+        if (!this.isValidHex(sanitizedColor)) {
+            return this.parseRgb(sanitizedColor); // If not hex, attempt to parse as RGB
+        }
+        // Convert hex to RGB
+        const rgb = this.hexToRgb(sanitizedColor);
+        return rgb;
+    }
+    // Helper function to validate if a string is a valid 3 or 6 digit hex code
+    isValidHex(color) {
+        const hexRegex = /^[A-Fa-f0-9]{3}$|^[A-Fa-f0-9]{6}$/i;
+        return hexRegex.test(color);
+    }
+    // Helper function to convert a 3 or 6 digit hex color to RGB
+    hexToRgb(hex) {
+        if (hex.length === 3) {
+            hex = hex.split('').map(c => c + c).join(''); // Expand shorthand hex to full
+        }
+        return [
+            parseInt(hex.slice(0, 2), 16),
+            parseInt(hex.slice(2, 4), 16),
+            parseInt(hex.slice(4, 6), 16),
+        ];
+    }
+    // Helper function to parse an RGB string (e.g., rgb(255, 0, 0)) into an array
+    parseRgb(rgb) {
+        const match = rgb.match(/\d+/g);
+        return match ? match.map(num => parseInt(num)) : [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextColorService, deps: [{ token: ColorConversionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextColorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextColorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: ColorConversionService }] });
+
+class ColorLightenDarkenService {
+    // const color = '#3498db'; // Your color
+    // const lighterColor = lighten(color, 0.2); // 20% lighter
+    // const darkerColor = darken(color, 0.2);   // 20% darker
+    // console.log(lighterColor, darkerColor);
+    constructor() {
+        this.colors = inject(TextColorService);
+    }
+    lighten(color, amount) {
+        const rgb = this.colors.fixColor(color);
+        // const rgb = color.match(/\w\w/g)?.map((x) => parseInt(x, 16)) || [];
+        // Convert RGB to HSL
+        let [r, g, b] = rgb.map((c) => c / 255);
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h = 0, s = 0, l = (max + min) / 2;
+        if (max !== min) {
+            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;
+        }
+        // Modify the lightness and clamp it to [0, 1]
+        l = Math.min(1, l + amount);
+        // Convert HSL back to RGB
+        if (s === 0) {
+            r = g = b = l; // achromatic
+        }
+        else {
+            const 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;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        // Convert RGB back to hexadecimal color
+        const toHex = (x) => Math.round(x * 255)
+            .toString(16)
+            .padStart(2, '0');
+        return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    }
+    darken(color, amount) {
+        return this.lighten(color, -amount);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorLightenDarkenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorLightenDarkenService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorLightenDarkenService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorSchemeService {
+    constructor() { }
+    /**
+     * Generates a random hexadecimal color code.
+     *
+     * This function generates a random hue value between 0 and 360 degrees, and random saturation and lightness values between 50% and 100%. It then converts the HSL values to RGB values using the `hslToRgb` function, and finally converts the RGB values to a hexadecimal color code using the `rgbToHex` function.
+     *
+     * @returns A hexadecimal color code in the format "#RRGGBB".
+     */
+    generateRandomColor() {
+        // Generate a random hue between 0 and 360 (representing degrees on the color wheel)
+        const hue = Math.floor(Math.random() * 360);
+        // Generate random saturation and lightness values between 50% and 100%
+        const saturation = Math.floor(Math.random() * 51) + 50;
+        const lightness = Math.floor(Math.random() * 51) + 50;
+        // Convert HSL values to RGB values
+        const rgbColor = this.hslToRgb(hue, saturation, lightness);
+        // Convert RGB values to hexadecimal color code
+        const hexColor = this.rgbToHex(rgbColor.r, rgbColor.g, rgbColor.b);
+        return hexColor;
+    }
+    /**
+     * Converts HSL (Hue, Saturation, Lightness) color values to RGB (Red, Green, Blue) color values.
+     *
+     * @param h - The hue value, ranging from 0 to 360 degrees.
+     * @param s - The saturation value, ranging from 0 to 100 percent.
+     * @param l - The lightness value, ranging from 0 to 100 percent.
+     * @returns An object with the RGB color values, where each value is between 0 and 255.
+     */
+    hslToRgb(h, s, l) {
+        h /= 360;
+        s /= 100;
+        l /= 100;
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l; // Achromatic color (gray)
+        }
+        else {
+            const hueToRgb = (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;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = Math.round(hueToRgb(p, q, h + 1 / 3) * 255);
+            g = Math.round(hueToRgb(p, q, h) * 255);
+            b = Math.round(hueToRgb(p, q, h - 1 / 3) * 255);
+        }
+        return { r, g, b };
+    }
+    /**
+     * Converts RGB color values to a hexadecimal color string.
+     *
+     * @param r - The red color value, between 0 and 255.
+     * @param g - The green color value, between 0 and 255.
+     * @param b - The blue color value, between 0 and 255.
+     * @returns A hexadecimal color string in the format "#RRGGBB".
+     */
+    rgbToHex(r, g, b) {
+        const componentToHex = (c) => {
+            const hex = c.toString(16);
+            return hex.length === 1 ? "0" + hex : hex;
+        };
+        return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+    }
+    /**
+   * Adjusts a hexadecimal color value by a given percentage.
+   *
+   * @param hexColor - The hexadecimal color value to adjust.
+   * @param percentage - The percentage to adjust the color by, ranging from -100 to 100.
+   * @returns The adjusted hexadecimal color value.
+   */
+    adjustHexColor(hexColor, percentage) {
+        // Remove the "#" symbol if present
+        hexColor = hexColor.replace("#", "");
+        // Convert the hex color to RGB values
+        const red = parseInt(hexColor.substring(0, 2), 16);
+        const green = parseInt(hexColor.substring(2, 4), 16);
+        const blue = parseInt(hexColor.substring(4, 6), 16);
+        // Calculate the adjustment amount based on the percentage
+        const adjustAmount = Math.round(255 * (percentage / 100));
+        // Adjust the RGB values
+        const adjustedRed = this.clamp(red + adjustAmount);
+        const adjustedGreen = this.clamp(green + adjustAmount);
+        const adjustedBlue = this.clamp(blue + adjustAmount);
+        // Convert the adjusted RGB values back to hex
+        const adjustedHexColor = `#${(adjustedRed).toString(16).padStart(2, '0')}${(adjustedGreen).toString(16).padStart(2, '0')}${(adjustedBlue).toString(16).padStart(2, '0')}`;
+        return adjustedHexColor;
+    }
+    clamp(value) {
+        return Math.max(0, Math.min(value, 255));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorSchemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorSchemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorSchemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorUtilitiesDemoComponent {
+    constructor() {
+        this.colorConversionService = inject(ColorConversionService);
+        this.colorLightenDarkenService = inject(ColorLightenDarkenService);
+        this.colorPalletteService = inject(ColorPalletteService);
+        this.textColorService = inject(TextColorService);
+        this.colorSchemeService = inject(ColorSchemeService);
+        this.HEX = this.colorConversionService.rgbToHex([12, 56, 128]);
+        this.RGB = `rgb(${this.colorConversionService.hexToRgb('#AA11BB')})`;
+        this.lighten = this.colorLightenDarkenService.lighten('#AA11BB', .25);
+        this.darken = this.colorLightenDarkenService.darken('#AA11BB', .25);
+        this.colorIsDarker = this.textColorService.isColorDarker(this.lighten, this.darken);
+        this.darkBk = this.textColorService.textColorForBgColor(this.HEX, this.lighten, this.darken);
+        this.lightBk = this.textColorService.textColorForBgColor('whitesmoke', this.lighten, this.darken);
+        this.colors$ = this.colorPalletteService.palette$;
+        this.colorPick = this.colorSchemeService.generateRandomColor();
+        this.colorPickDarker = this.colorSchemeService.adjustHexColor(this.colorPick, -25);
+        this.colorPickLighter = this.colorSchemeService.adjustHexColor(this.colorPick, 25);
+    }
+    ngOnInit() {
+        // define image path
+        this.img = 'assets/picture.webp';
+        this.colorPalletteService.getColorsFromImage(this.img, 8);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorUtilitiesDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColorUtilitiesDemoComponent, selector: "app-color-utilities-demo", ngImport: i0, template: "<div style=\"margin: 2rem;\">\n\n  <h1>Color Conversion Service</h1>\n  <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n    <div style=\"display: flex\">\n      <div style=\"padding-top: .5rem; margin-right: .5rem;\">rgbToHex: {{ HEX }}</div>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"HEX\"></div>\n    </div>\n\n    <div style=\"display: flex\">\n      <div style=\"padding-top: .5rem; margin-right: .5rem;\"> hexToRgb: {{ RGB }} </div>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"RGB\"></div>\n    </div>\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Color Light/Darken Service</h1>\n\n  <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n\n    <div style=\"display: flex; gap: 1rem\">\n      Original Color: #AA11BB<br>\n      <div style=\"width: 32px; height: 32px; background-color: #AA11BB;\"></div>\n      Lighten (25%): {{ lighten }}<br>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n      Darken (25%): {{ darken }}<br>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Text Color Utility Services</h1>\n\n  <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n    <div style=\"display: flex; gap: 1rem\">\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n      is Darker : {{ colorIsDarker }}\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorIsDarker\"></div>\n    </div>\n\n    <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n\n      <div>\n        Use: {{ lightBk }} for '{{ HEX }}' background-color<br>\n        <div style=\"padding: 1rem;\" [style.backgroundColor]=\"HEX\" [style.color]=\"darkBk\">\n          Sample Text Color\n        </div>\n      </div>\n\n      <div>\n        Use: {{ lightBk }} for 'whitesmoke' background-color<br>\n        <div style=\"padding: 1rem; background-color: whitesmoke;\" [style.color]=\"lightBk\">\n          Sample Text Color\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Color Schema Services</h1>\n\n  <div style=\"display: flex; gap: 1rem\">\n    Pick Color: {{ colorPick }}<br>\n    <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPick\"></div>\n    Lighter Version: {{ colorPickLighter }}<br>\n    <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickLighter\"></div>\n    DarkerVersion: {{ colorPickDarker }}<br>\n    <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickDarker\"></div>\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Color Pallette Service</h1>\n  Creates Pallette from Image\n  <div style=\"display: flex; gap: 2rem;\">\n    <div>\n      <img [src]=\"img\" height=\"180\">\n    </div>\n\n    <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n      <div>Color Pick</div>\n      @for (color of (colors$ | async); track color) {\n        <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.color\"></div>\n      }\n    </div>\n\n    <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n      <div>Complementary</div>\n      @for (color of (colors$ | async); track color) {\n        <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.complementaryColor\"></div>\n      }\n    </div>\n  </div>\n\n</div>\n\n", styles: [".box{width:100px;height:100px;border:solid thin black;color:#000;margin:4px;padding:16px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: i1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorUtilitiesDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-color-utilities-demo', standalone: false, template: "<div style=\"margin: 2rem;\">\n\n  <h1>Color Conversion Service</h1>\n  <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n    <div style=\"display: flex\">\n      <div style=\"padding-top: .5rem; margin-right: .5rem;\">rgbToHex: {{ HEX }}</div>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"HEX\"></div>\n    </div>\n\n    <div style=\"display: flex\">\n      <div style=\"padding-top: .5rem; margin-right: .5rem;\"> hexToRgb: {{ RGB }} </div>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"RGB\"></div>\n    </div>\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Color Light/Darken Service</h1>\n\n  <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n\n    <div style=\"display: flex; gap: 1rem\">\n      Original Color: #AA11BB<br>\n      <div style=\"width: 32px; height: 32px; background-color: #AA11BB;\"></div>\n      Lighten (25%): {{ lighten }}<br>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n      Darken (25%): {{ darken }}<br>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Text Color Utility Services</h1>\n\n  <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n    <div style=\"display: flex; gap: 1rem\">\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n      is Darker : {{ colorIsDarker }}\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorIsDarker\"></div>\n    </div>\n\n    <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n\n      <div>\n        Use: {{ lightBk }} for '{{ HEX }}' background-color<br>\n        <div style=\"padding: 1rem;\" [style.backgroundColor]=\"HEX\" [style.color]=\"darkBk\">\n          Sample Text Color\n        </div>\n      </div>\n\n      <div>\n        Use: {{ lightBk }} for 'whitesmoke' background-color<br>\n        <div style=\"padding: 1rem; background-color: whitesmoke;\" [style.color]=\"lightBk\">\n          Sample Text Color\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Color Schema Services</h1>\n\n  <div style=\"display: flex; gap: 1rem\">\n    Pick Color: {{ colorPick }}<br>\n    <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPick\"></div>\n    Lighter Version: {{ colorPickLighter }}<br>\n    <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickLighter\"></div>\n    DarkerVersion: {{ colorPickDarker }}<br>\n    <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickDarker\"></div>\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Color Pallette Service</h1>\n  Creates Pallette from Image\n  <div style=\"display: flex; gap: 2rem;\">\n    <div>\n      <img [src]=\"img\" height=\"180\">\n    </div>\n\n    <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n      <div>Color Pick</div>\n      @for (color of (colors$ | async); track color) {\n        <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.color\"></div>\n      }\n    </div>\n\n    <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n      <div>Complementary</div>\n      @for (color of (colors$ | async); track color) {\n        <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.complementaryColor\"></div>\n      }\n    </div>\n  </div>\n\n</div>\n\n", styles: [".box{width:100px;height:100px;border:solid thin black;color:#000;margin:4px;padding:16px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ColorExtractorDirective {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.colorValue = new EventEmitter();
+    }
+    get currentElement() {
+        return window.getComputedStyle(this.elementRef.nativeElement);
+    }
+    onMouseEnter() {
+        // console.log('ENTER', this.currentElement)
+        this.colorValue.emit(this.currentElement.getPropertyValue('background-color'));
+    }
+    onMouseLeave() {
+        // console.log('LEAVE', this.currentElement.getPropertyValue('background-color'))
+        this.colorValue.emit('white');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorExtractorDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ColorExtractorDirective, selector: "[getColor]", outputs: { colorValue: "colorValue" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorExtractorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[getColor]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { colorValue: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class ColorUtilHelpersModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorUtilHelpersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ColorUtilHelpersModule, declarations: [ColorUtilitiesDemoComponent,
+            ColorGrabberDirective,
+            ColorExtractorDirective], imports: [CommonModule,
+            MatButtonModule,
+            MatDividerModule], exports: [ColorUtilitiesDemoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorUtilHelpersModule, imports: [CommonModule,
+            MatButtonModule,
+            MatDividerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorUtilHelpersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatDividerModule
+                    ],
+                    declarations: [
+                        ColorUtilitiesDemoComponent,
+                        ColorGrabberDirective,
+                        ColorExtractorDirective
+                    ],
+                    exports: [
+                        ColorUtilitiesDemoComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of color-util-helpers
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColorConversionService, ColorExtractorDirective, ColorGrabberDirective, ColorLightenDarkenService, ColorPalletteService, ColorSchemeService, ColorUtilHelpersModule, ColorUtilitiesDemoComponent, TextColorService };
+//# sourceMappingURL=color-util-helpers.mjs.map

package/fesm2022/color-util-helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-util-helpers.mjs","sources":["../../../projects/color-util-helpers/src/lib/color-grab.directive.ts","../../../projects/color-util-helpers/src/lib/color-conversion.service.ts","../../../projects/color-util-helpers/src/lib/color-pallette.service.ts","../../../projects/color-util-helpers/src/lib/text-color.service.ts","../../../projects/color-util-helpers/src/lib/color-lighten-darken.service.ts","../../../projects/color-util-helpers/src/lib/color-scheme.service.ts","../../../projects/color-util-helpers/src/lib/color-utilities-demo/color-utilities-demo.component.ts","../../../projects/color-util-helpers/src/lib/color-utilities-demo/color-utilities-demo.component.html","../../../projects/color-util-helpers/src/lib/color-extractor.directive.ts","../../../projects/color-util-helpers/src/lib/color-utils.module.ts","../../../projects/color-util-helpers/src/public-api.ts","../../../projects/color-util-helpers/src/color-util-helpers.ts"],"sourcesContent":["import { Directive, ElementRef, Input, OnInit } from '@angular/core';\n\n@Directive({\n    selector: '[colorGrabber]',\n    standalone: false\n})\nexport class ColorGrabberDirective implements OnInit {\n\n  ctx?: CanvasRenderingContext2D\n\n  @Input() imageUrl?: string\n  @Input() light?: string\n  @Input() dark?: string\n\n  constructor(private el: ElementRef) { }\n\n  ngOnInit() {\n\n    const canvas = document.createElement('canvas');\n    canvas.width = 1;\n    canvas.height = 1;\n\n    this.ctx = canvas.getContext('2d') as CanvasRenderingContext2D;\n\n    const img = new Image();\n    img.src = this.imageUrl || '';\n    img.setAttribute('crossOrigin', '');\n\n    img.onload = () => {\n      this.ctx?.drawImage(img, 0, 0, 1, 1);\n      const imageData = this.ctx?.getImageData(0, 0, 1, 1);\n\n      if (imageData && imageData.data) {\n        const i = imageData.data;\n\n        const rgbColor = `rgba(${i[0]},${i[1]},${i[2]},${i[3]})`;\n        const hexColor = \"#\" + ((1 << 24) + (i[0] << 16) + (i[1] << 8) + i[2]).toString(16).slice(1);\n\n        const textColor = this.textColorBasedOnBgColor(hexColor, this.light, this.dark);\n\n        const hsv = this.RGB2HSV({ r: i[0], g: i[1], b: i[2] });\n        hsv.hue = this.HueShift(hsv.hue, 135.0);\n\n        const secondaryColor = this.HSV2RGB(hsv);\n        const highlightColor = this.lightenDarkenColor(secondaryColor.hex, 50);\n\n        this.el.nativeElement.style.backgroundColor = rgbColor;\n        this.el.nativeElement.style.color = textColor;\n      } else {\n        console.error(\"Failed to get image data.\");\n      }\n    };\n  }\n\n  textColorBasedOnBgColor(\n    bgColor: string,\n    lightColor: string = '#FFFFFF',\n    darkColor: string = '#000000'\n    ) {\n\n    const color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor\n\n    const r = parseInt(color.substring(0, 2), 16) // hexToR\n    const g = parseInt(color.substring(2, 4), 16) // hexToG\n    const b = parseInt(color.substring(4, 6), 16) // hexToB\n\n    const uicolors = [r / 255, g / 255, b / 255]\n\n    const c = uicolors.map((col) => {\n\n      if (col <= 0.03928) return col / 12.92\n      return Math.pow((col + 0.055) / 1.055, 2.4)\n\n    })\n\n    const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2])\n\n    return (L > 0.179) ? darkColor : lightColor\n\n  }\n\n  RGB2HSV(rgb: { r: any, g: any, b: any}) {\n\n    const hsv = { saturation:0, hue:0, value: 0 }\n\n    const max = this.max3(rgb.r,rgb.g,rgb.b)\n    const dif = max - this.min3(rgb.r,rgb.g,rgb.b)\n    hsv.saturation = (max==0.0)?0:(100*dif/max)\n\n    if (hsv.saturation == 0) {\n      hsv.hue=0\n    } else if (rgb.r == max) {\n      hsv.hue=60.0*(rgb.g-rgb.b)/dif\n    } else if (rgb.g == max) {\n      hsv.hue=120.0+60.0*(rgb.b-rgb.r)/dif\n    } else if (rgb.b == max) {\n      hsv.hue=240.0+60.0*(rgb.r-rgb.g)/dif\n    }\n\n    if (hsv.hue<0.0) hsv.hue+=360.0\n\n    hsv.value = Math.round(max*100/255)\n    hsv.hue = Math.round(hsv.hue)\n    hsv.saturation = Math.round(hsv.saturation)\n\n    return hsv\n  }\n\n  HSV2RGB(hsv: any) {\n\n    const rgb = { r: 0, g: 0, b: 0}\n\n    if (hsv.saturation==0) {\n      rgb.r = rgb.g = rgb.b = Math.round(hsv.value*2.55)\n    } else {\n\n      hsv.hue/=60\n      hsv.saturation/=100\n      hsv.value/=100\n      const i = Math.floor(hsv.hue)\n      const f = hsv.hue-i\n\n      const p = hsv.value*(1-hsv.saturation)\n      const q = hsv.value*(1-hsv.saturation*f)\n      const t = hsv.value*(1-hsv.saturation*(1-f))\n\n      switch(i) {\n\n      case 0: rgb.r=hsv.value; rgb.g=t; rgb.b=p; break\n      case 1: rgb.r=q; rgb.g=hsv.value; rgb.b=p; break\n      case 2: rgb.r=p; rgb.g=hsv.value; rgb.b=t; break\n      case 3: rgb.r=p; rgb.g=q; rgb.b=hsv.value; break\n      case 4: rgb.r=t; rgb.g=p; rgb.b=hsv.value; break\n\n      default: rgb.r=hsv.value; rgb.g=p; rgb.b=q\n\n      }\n\n      rgb.r = Math.round(rgb.r*255)\n      rgb.g = Math.round(rgb.g*255)\n      rgb.b = Math.round(rgb.b*255)\n\n    }\n\n    const rgbColor = `rgba(${rgb.r},${rgb.g},${rgb.b},${1})`\n    const hexColor = \"#\" + ((1 << 24) + (rgb.r << 16) + (rgb.g << 8) + rgb.b).toString(16).slice(1)\n\n    return { rgb: rgbColor, hex: hexColor }\n  }\n\n  HueShift(h: any, s: any) {\n    h += s\n    while (h>=360.0) h-=360.0\n    while (h<0.0) h+=360.0\n    return h\n  }\n\n  min3(a: any, b: any, c: any) {\n    return (a<b)?((a<c)?a:c):((b<c)?b:c)\n  }\n\n  max3(a: any, b: any, c: any) {\n    return (a>b)?((a>c)?a:c):((b>c)?b:c)\n  }\n\n  lightenDarkenColor(colorCode: any, amount: number) {\n\n    var usePound = false;\n\n    if (colorCode[0] == \"#\") {\n        colorCode = colorCode.slice(1);\n        usePound = true;\n    }\n\n    var num = parseInt(colorCode, 16);\n\n    var r = (num >> 16) + amount;\n\n    if (r > 255) {\n        r = 255;\n    } else if (r < 0) {\n        r = 0;\n    }\n\n    var b = ((num >> 8) & 0x00FF) + amount;\n\n    if (b > 255) {\n        b = 255;\n    } else if (b < 0) {\n        b = 0;\n    }\n\n    var g = (num & 0x0000FF) + amount;\n\n    if (g > 255) {\n        g = 255;\n    } else if (g < 0) {\n        g = 0;\n    }\n\n    return (usePound ? \"#\" : \"\") + (g | (b << 8) | (r << 16)).toString(16)\n\n  }\n\n}\n","import { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class ColorConversionService {\r\n\r\n  rgbToHex(rgb: number[] | null): string {\r\n    if (rgb === null || rgb.length !== 3 || rgb.some(value => value < 0 || value > 255)) return '';\r\n\r\n    const [r, g, b] = rgb;\r\n    const hexR = this.componentToHex(r);\r\n    const hexG = this.componentToHex(g);\r\n    const hexB = this.componentToHex(b);\r\n    return \"#\" + hexR + hexG + hexB;\r\n  }\r\n\r\n  private componentToHex = (c: number) => {\r\n    const hex = c.toString(16);\r\n    return hex.length === 1 ? \"0\" + hex : hex;\r\n  }\r\n\r\n  hexToRgb(hex: string | null | undefined): number[] {\r\n    if (hex === null || hex === undefined) return [];\r\n\r\n    hex = (hex.length === 3) ? hex + hex : hex;\r\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\r\n\r\n    return result ? [\r\n      parseInt(result[1], 16),\r\n      parseInt(result[2], 16),\r\n      parseInt(result[3], 16)\r\n    ] : [];\r\n  }\r\n}\r\n","import { Injectable } from '@angular/core'\r\nimport { BehaviorSubject } from 'rxjs'\r\nimport { ColorConversionService } from './color-conversion.service'\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class ColorPalletteService {\r\n\r\n  // define image path\r\n  // this.colorSelectionService.getColorsFromImage('../assets/sample2.jpg')\r\n\r\n  // get colors\r\n  // this.colorSelectionService.palette.subscribe(data => this.palette = data)\r\n\r\n  // sample html\r\n  //   <div *ngFor=\"let color of palette\">\r\n  //     <div style=\"display: flex;\">\r\n  //         <div\r\n  //             class=\"box\"\r\n  //             [style.background-color]=\"color.color\"\r\n  //         >\r\n  //         Color\r\n  //         </div>\r\n  //         <div\r\n  //             class=\"box\"\r\n  //             [style.background-color]=\"color.complementaryColor\"\r\n  //         >\r\n  //         Complementary\r\n  //         </div>\r\n  //     </div>\r\n  // </div>\r\n\r\n  // CSS\r\n  //   .box {\r\n  //     width: 100px;\r\n  //     height: 100px;\r\n  //     border: solid thin black;\r\n  //     color: black;\r\n  //     margin: 4px;\r\n  //     padding: 16px;\r\n  //     display: flex;\r\n  //     flex-wrap: wrap;\r\n  //     align-content: center;\r\n  //     justify-content: center;\r\n  // }\r\n\r\n  private palette = new BehaviorSubject<{ color: string, complementaryColor: string }[]>([])\n  palette$ = this.palette.asObservable()\n\n  constructor(\n    private colorConversionService: ColorConversionService\n  ) { }\n\n  /**\n   * Retrieves a color palette from an image at the specified path.\n   *\n   * @param imagePath - The path to the image to extract the color palette from.\n   * @param colors - The number of colors to include in the palette (default is 3).\n   * @returns An observable that emits the generated color palette.\n   */\n  getColorsFromImage(imagePath: string, colors = 3) {\n    const image = new Image();\n    image.src = imagePath;\n\n    image.onload = () => {\n      const data = this.generateColorPalette(image, colors) || [];\n      this.palette.next(data);\n    };\n  }\n\n  /**\n   * Generates a color palette from an image.\n   *\n   * @param image - The HTML image element to extract the color palette from.\n   * @param colorCount - The number of colors to include in the palette (default is 6).\n   * @returns An array of color objects, each with a hex color and a complementary hex color.\n   */\n  generateColorPalette(image: HTMLImageElement, colorCount = 6) {\n    const canvas = document.createElement(\"canvas\");\n    const context = canvas.getContext(\"2d\");\n\n    if (!context) return;\n\n    canvas.width = image.width;\n    canvas.height = image.height;\n    context.drawImage(image, 0, 0);\n\n    // Get the image data\n    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);\n    const pixels = imageData.data;\n    const pixelCount = imageData.width * imageData.height;\n\n    // Build an array of RGB colors\n    const colors: number[][] = [];\n    for (let i = 0; i < pixelCount; i++) {\n      const offset = i * 4;\n      const r = pixels[offset];\n      const g = pixels[offset + 1];\n      const b = pixels[offset + 2];\n      colors.push([r, g, b]);\n    }\n\n    // Apply color quantization using k-means clustering\n    const quantizedColors = this.kMeansColorQuantization(colors, colorCount);\n\n    // Order colors by luminance\n    quantizedColors.sort((color1, color2) => {\n      const luminance1 = this.getLuminance(color1);\n      const luminance2 = this.getLuminance(color2);\n      return luminance2 - luminance1;\n    });\n\n    const palette = quantizedColors.map((color) => {\n      const complementaryColor = color.map((component: number) => 255 - component);\n      const hexColor = this.colorConversionService.rgbToHex(color);\n      const hexComplementaryColor =\n        this.colorConversionService.rgbToHex(complementaryColor);\n      return { color: hexColor, complementaryColor: hexComplementaryColor };\n    });\n\n    return palette;\n  }\n\n  private getLuminance(color: number[]) {\n    const [r, g, b] = color\n    return 0.299 * r + 0.587 * g + 0.114 * b\n  }\n\n  private calculateColorDistance(color1: number[], color2: number[]) {\n    const [r1, g1, b1] = color1\n    const [r2, g2, b2] = color2\n    const dr = r2 - r1\n    const dg = g2 - g1\n    const db = b2 - b1\n    return Math.sqrt(dr * dr + dg * dg + db * db)\n  }\n\n  private calculateMeanColor(colors: number[][]) {\n    let sumR = 0\n    let sumG = 0\n    let sumB = 0\n    for (let i = 0; i < colors.length; i++) {\n      const [r, g, b] = colors[i]\n      sumR += r\n      sumG += g\n      sumB += b\n    }\n    const meanR = Math.round(sumR / colors.length)\n    const meanG = Math.round(sumG / colors.length)\n    const meanB = Math.round(sumB / colors.length)\n    return [meanR, meanG, meanB]\n  }\n\n  private kMeansColorQuantization(colors: number[][], k: number) {\n    let clusterCenters: number[][] = []\n    for (let i = 0; i < k; i++) {\n      const randomColor = colors[Math.floor(Math.random() * colors.length)]\n      clusterCenters.push(randomColor)\n    }\n\n    let clusters: { color: number[], center: number[] | null }[] = []\n    for (let i = 0; i < colors.length; i++) {\n      const color = colors[i]\n      let minDistance = Infinity\n      let nearestCenter: number[] | null = null\n      for (let j = 0; j < clusterCenters.length; j++) {\n        const center = clusterCenters[j]\n        const distance = this.calculateColorDistance(color, center)\n        if (distance < minDistance) {\n          minDistance = distance\n          nearestCenter = center\n        }\n      }\n      clusters.push({ color, center: nearestCenter })\n    }\n\n    let updatedCenters: number[][] = []\n    for (let i = 0; i < clusterCenters.length; i++) {\n      const center = clusterCenters[i]\n      const clusterColors = clusters.filter(c => c.center === center).map(c => c.color)\n      if (clusterColors.length > 0) {\n        const updatedCenter = this.calculateMeanColor(clusterColors)\n        updatedCenters.push(updatedCenter)\n      }\n    }\n\n    return updatedCenters\n  }\n\r\n}\r\n","import { Injectable } from '@angular/core'\r\nimport { ColorConversionService } from './color-conversion.service'\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class TextColorService {\r\n\r\n  constructor(\r\n    private colorConversionService: ColorConversionService\r\n  ) {}\r\n\r\n  textColorForBgColor(bgColor: string, lightColor: string, darkColor: string) {\r\n\r\n    const UIColors = this.fixColor(bgColor)\r\n\r\n    const r = UIColors[0]\r\n    const g = UIColors[1]\r\n    const b = UIColors[2]\r\n\r\n    return ((r*0.299 + g*0.587 + b*0.114) > 149) ? darkColor : lightColor;\r\n\r\n  }\r\n\r\n  darkerColor(color1: string, color2: string) {\r\n    return this.isColorDarker(color1, color2) ? color1 : color2;\r\n  }\r\n\r\n  isColorDarker(color1: string, color2: string) {\r\n\r\n    const newColor1 = this.fixColor(color1);\r\n    const newColor2 = this.fixColor(color2);\r\n\r\n    const luminance1 = this.calculateLuminance(newColor1[0], newColor1[1], newColor1[2]);\r\n    const luminance2 = this.calculateLuminance(newColor2[0], newColor2[1], newColor2[2]);\r\n\r\n    return luminance1 < luminance2;\r\n  }\r\n\r\n\r\n  lighterColor(color1: string, color2: string): string {\r\n    return (this.isColorLighter(color1,color2)) ? color1 : color2;\r\n  }\r\n\r\n  isColorLighter(color1: string, color2: string) {\r\n\r\n    const newColor1 = this.fixColor(color1);\r\n    const newColor2 = this.fixColor(color2);\r\n\r\n    const luminance1 = this.calculateLuminance(newColor1[0], newColor1[1], newColor1[2]);\r\n    const luminance2 = this.calculateLuminance(newColor2[0], newColor2[1], newColor2[2]);\r\n\r\n    return (luminance1 > luminance2)\r\n\r\n  }\r\n\r\n  calculateLuminance(r: number, g: number, b: number): number {\r\n    return 0.2126 * r + 0.7152 * g + 0.0722 * b;\r\n  }\r\n\r\n  fixColor(color: string) {\r\n    // Remove leading hash if present\r\n    const sanitizedColor = color.startsWith('#') ? color.slice(1) : color;\r\n\r\n    // Validate if the color is a valid hex (3 or 6 characters)\r\n    if (!this.isValidHex(sanitizedColor)) {\r\n      return this.parseRgb(sanitizedColor); // If not hex, attempt to parse as RGB\r\n    }\r\n\r\n    // Convert hex to RGB\r\n    const rgb = this.hexToRgb(sanitizedColor);\r\n    return rgb;\r\n  }\r\n\r\n  // Helper function to validate if a string is a valid 3 or 6 digit hex code\r\n  isValidHex(color: string): boolean {\r\n    const hexRegex = /^[A-Fa-f0-9]{3}$|^[A-Fa-f0-9]{6}$/i;\r\n    return hexRegex.test(color);\r\n  }\r\n\r\n  // Helper function to convert a 3 or 6 digit hex color to RGB\r\n  hexToRgb(hex: string): number[] {\r\n    if (hex.length === 3) {\r\n      hex = hex.split('').map(c => c + c).join(''); // Expand shorthand hex to full\r\n    }\r\n\r\n    return [\r\n      parseInt(hex.slice(0, 2), 16),\r\n      parseInt(hex.slice(2, 4), 16),\r\n      parseInt(hex.slice(4, 6), 16),\r\n    ];\r\n  }\r\n\r\n  // Helper function to parse an RGB string (e.g., rgb(255, 0, 0)) into an array\r\n  parseRgb(rgb: string): number[] {\r\n    const match = rgb.match(/\\d+/g);\r\n    return match ? match.map(num => parseInt(num)) : [];\r\n  }\r\n\r\n\r\n}\r\n","import { Injectable, inject } from '@angular/core';\nimport { TextColorService } from './text-color.service';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ColorLightenDarkenService {\n\n  colors = inject(TextColorService)\n\n  // const color = '#3498db'; // Your color\n  // const lighterColor = lighten(color, 0.2); // 20% lighter\n  // const darkerColor = darken(color, 0.2);   // 20% darker\n\n  // console.log(lighterColor, darkerColor);\n\nconstructor() { }\n\n  lighten(color: string, amount: number) {\n\n    const rgb = this.colors.fixColor(color)\n    // const rgb = color.match(/\\w\\w/g)?.map((x) => parseInt(x, 16)) || [];\n\n    // Convert RGB to HSL\n    let [r, g, b] = rgb.map((c) => c / 255);\n    const max = Math.max(r, g, b),\n      min = Math.min(r, g, b);\n    let h = 0,\n      s = 0,\n      l = (max + min) / 2;\n\n    if (max !== min) {\n      const d = max - min;\n      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n      switch (max) {\n        case r:\n          h = (g - b) / d + (g < b ? 6 : 0);\n          break;\n        case g:\n          h = (b - r) / d + 2;\n          break;\n        case b:\n          h = (r - g) / d + 4;\n          break;\n      }\n      h /= 6;\n    }\n\n    // Modify the lightness and clamp it to [0, 1]\n    l = Math.min(1, l + amount);\n\n    // Convert HSL back to RGB\n    if (s === 0) {\n      r = g = b = l; // achromatic\n    } else {\n      const hue2rgb = (p: number, q: number, t: number) => {\n        if (t < 0) t += 1;\n        if (t > 1) t -= 1;\n        if (t < 1 / 6) return p + (q - p) * 6 * t;\n        if (t < 1 / 2) return q;\n        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n        return p;\n      };\n      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n      const p = 2 * l - q;\n      r = hue2rgb(p, q, h + 1 / 3);\n      g = hue2rgb(p, q, h);\n      b = hue2rgb(p, q, h - 1 / 3);\n    }\n\n    // Convert RGB back to hexadecimal color\n    const toHex = (x: number) =>\n      Math.round(x * 255)\n        .toString(16)\n        .padStart(2, '0');\n    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n  }\n\n  darken(color: string, amount: number) {\n    return this.lighten(color, -amount);\n  }\n\n}\n","import { Injectable } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ColorSchemeService {\n\n  constructor() { }\n\n  /**\n   * Generates a random hexadecimal color code.\n   *\n   * This function generates a random hue value between 0 and 360 degrees, and random saturation and lightness values between 50% and 100%. It then converts the HSL values to RGB values using the `hslToRgb` function, and finally converts the RGB values to a hexadecimal color code using the `rgbToHex` function.\n   *\n   * @returns A hexadecimal color code in the format \"#RRGGBB\".\n   */\n  generateRandomColor() {\n    // Generate a random hue between 0 and 360 (representing degrees on the color wheel)\n    const hue = Math.floor(Math.random() * 360);\n\n    // Generate random saturation and lightness values between 50% and 100%\n    const saturation = Math.floor(Math.random() * 51) + 50;\n    const lightness = Math.floor(Math.random() * 51) + 50;\n\n    // Convert HSL values to RGB values\n    const rgbColor = this.hslToRgb(hue, saturation, lightness);\n\n    // Convert RGB values to hexadecimal color code\n    const hexColor = this.rgbToHex(rgbColor.r, rgbColor.g, rgbColor.b);\n\n    return hexColor;\n  }\n\n  /**\n   * Converts HSL (Hue, Saturation, Lightness) color values to RGB (Red, Green, Blue) color values.\n   *\n   * @param h - The hue value, ranging from 0 to 360 degrees.\n   * @param s - The saturation value, ranging from 0 to 100 percent.\n   * @param l - The lightness value, ranging from 0 to 100 percent.\n   * @returns An object with the RGB color values, where each value is between 0 and 255.\n   */\n  hslToRgb(h: number, s: number, l: number) {\n    h /= 360;\n    s /= 100;\n    l /= 100;\n\n    let r, g, b;\n\n    if (s === 0) {\n      r = g = b = l; // Achromatic color (gray)\n    } else {\n      const hueToRgb = (p: number, q: number, t: number) => {\n        if (t < 0) t += 1;\n        if (t > 1) t -= 1;\n        if (t < 1 / 6) return p + (q - p) * 6 * t;\n        if (t < 1 / 2) return q;\n        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n        return p;\n      };\n\n      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n      const p = 2 * l - q;\n\n      r = Math.round(hueToRgb(p, q, h + 1 / 3) * 255);\n      g = Math.round(hueToRgb(p, q, h) * 255);\n      b = Math.round(hueToRgb(p, q, h - 1 / 3) * 255);\n    }\n\n    return { r, g, b };\n  }\n\n  /**\n   * Converts RGB color values to a hexadecimal color string.\n   *\n   * @param r - The red color value, between 0 and 255.\n   * @param g - The green color value, between 0 and 255.\n   * @param b - The blue color value, between 0 and 255.\n   * @returns A hexadecimal color string in the format \"#RRGGBB\".\n   */\n  rgbToHex(r: number, g: number, b: number) {\n    const componentToHex = (c: number) => {\n      const hex = c.toString(16);\n      return hex.length === 1 ? \"0\" + hex : hex;\n    };\n\n    return \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n  }\n\n    /**\n   * Adjusts a hexadecimal color value by a given percentage.\n   *\n   * @param hexColor - The hexadecimal color value to adjust.\n   * @param percentage - The percentage to adjust the color by, ranging from -100 to 100.\n   * @returns The adjusted hexadecimal color value.\n   */\n  adjustHexColor(hexColor: string, percentage: number) {\n    // Remove the \"#\" symbol if present\n    hexColor = hexColor.replace(\"#\", \"\");\n\n    // Convert the hex color to RGB values\n    const red = parseInt(hexColor.substring(0, 2), 16);\n    const green = parseInt(hexColor.substring(2, 4), 16);\n    const blue = parseInt(hexColor.substring(4, 6), 16);\n\n    // Calculate the adjustment amount based on the percentage\n    const adjustAmount = Math.round(255 * (percentage / 100));\n\n    // Adjust the RGB values\n    const adjustedRed = this.clamp(red + adjustAmount);\n    const adjustedGreen = this.clamp(green + adjustAmount);\n    const adjustedBlue = this.clamp(blue + adjustAmount);\n\n    // Convert the adjusted RGB values back to hex\n    const adjustedHexColor = `#${(adjustedRed).toString(16).padStart(2, '0')}${(adjustedGreen).toString(16).padStart(2, '0')}${(adjustedBlue).toString(16).padStart(2, '0')}`;\n\n    return adjustedHexColor;\n  }\n\n  clamp(value: number) {\n    return Math.max(0, Math.min(value, 255));\n  }\n\n}\n","import { Component, OnInit, inject } from '@angular/core';\n\nimport { ColorConversionService } from '../color-conversion.service';\nimport { ColorPalletteService } from '../color-pallette.service';\nimport { TextColorService } from '../text-color.service';\nimport { ColorLightenDarkenService } from '../color-lighten-darken.service';\nimport { ColorSchemeService } from '../color-scheme.service';\n\n@Component({\n    selector: 'app-color-utilities-demo',\n    templateUrl: './color-utilities-demo.component.html',\n    styleUrls: ['./color-utilities-demo.component.css'],\n    standalone: false\n})\nexport class ColorUtilitiesDemoComponent implements OnInit {\n\n  colorConversionService = inject(ColorConversionService)\n  colorLightenDarkenService = inject(ColorLightenDarkenService)\n  colorPalletteService = inject(ColorPalletteService)\n  textColorService = inject(TextColorService)\n  colorSchemeService = inject(ColorSchemeService)\n\n\n  HEX = this.colorConversionService.rgbToHex([12, 56, 128])\n  RGB = `rgb(${this.colorConversionService.hexToRgb('#AA11BB')})`\n\n\n  lighten = this.colorLightenDarkenService.lighten('#AA11BB', .25)\n  darken = this.colorLightenDarkenService.darken('#AA11BB', .25)\n\n  colorIsDarker = this.textColorService.isColorDarker(this.lighten, this.darken)\n\n  darkBk = this.textColorService.textColorForBgColor(this.HEX, this.lighten, this.darken)\n  lightBk = this.textColorService.textColorForBgColor('whitesmoke', this.lighten, this.darken)\n\n  palette: any\n  colors$ = this.colorPalletteService.palette$\n\n  colorPick = this.colorSchemeService.generateRandomColor()\n  colorPickDarker = this.colorSchemeService.adjustHexColor(this.colorPick, -25)\n  colorPickLighter = this.colorSchemeService.adjustHexColor(this.colorPick, 25)\n\n  img: string|any\n\n  constructor() { }\n\n  ngOnInit() {\n\n    // define image path\n    this.img = 'assets/picture.webp'\n    this.colorPalletteService.getColorsFromImage(this.img, 8)\n\n\n  }\n\n\n}\n\n","<div style=\"margin: 2rem;\">\n\n  <h1>Color Conversion Service</h1>\n  <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n    <div style=\"display: flex\">\n      <div style=\"padding-top: .5rem; margin-right: .5rem;\">rgbToHex: {{ HEX }}</div>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"HEX\"></div>\n    </div>\n\n    <div style=\"display: flex\">\n      <div style=\"padding-top: .5rem; margin-right: .5rem;\"> hexToRgb: {{ RGB }} </div>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"RGB\"></div>\n    </div>\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Color Light/Darken Service</h1>\n\n  <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n\n    <div style=\"display: flex; gap: 1rem\">\n      Original Color: #AA11BB<br>\n      <div style=\"width: 32px; height: 32px; background-color: #AA11BB;\"></div>\n      Lighten (25%): {{ lighten }}<br>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n      Darken (25%): {{ darken }}<br>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n    </div>\n\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Text Color Utility Services</h1>\n\n  <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n    <div style=\"display: flex; gap: 1rem\">\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"darken\"></div>\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"lighten\"></div>\n      is Darker : {{ colorIsDarker }}\n      <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorIsDarker\"></div>\n    </div>\n\n    <div style=\"display: flex; gap: 1rem; flex-direction: column;\">\n\n      <div>\n        Use: {{ lightBk }} for '{{ HEX }}' background-color<br>\n        <div style=\"padding: 1rem;\" [style.backgroundColor]=\"HEX\" [style.color]=\"darkBk\">\n          Sample Text Color\n        </div>\n      </div>\n\n      <div>\n        Use: {{ lightBk }} for 'whitesmoke' background-color<br>\n        <div style=\"padding: 1rem; background-color: whitesmoke;\" [style.color]=\"lightBk\">\n          Sample Text Color\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Color Schema Services</h1>\n\n  <div style=\"display: flex; gap: 1rem\">\n    Pick Color: {{ colorPick }}<br>\n    <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPick\"></div>\n    Lighter Version: {{ colorPickLighter }}<br>\n    <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickLighter\"></div>\n    DarkerVersion: {{ colorPickDarker }}<br>\n    <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"colorPickDarker\"></div>\n  </div>\n\n  <div style=\"margin-top: 1rem; margin-bottom: 1rem;\">\n    <mat-divider></mat-divider>\n  </div>\n\n  <h1>Color Pallette Service</h1>\n  Creates Pallette from Image\n  <div style=\"display: flex; gap: 2rem;\">\n    <div>\n      <img [src]=\"img\" height=\"180\">\n    </div>\n\n    <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n      <div>Color Pick</div>\n      @for (color of (colors$ | async); track color) {\n        <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.color\"></div>\n      }\n    </div>\n\n    <div style=\"display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;\">\n      <div>Complementary</div>\n      @for (color of (colors$ | async); track color) {\n        <div style=\"width: 32px; height: 32px;\" [style.backgroundColor]=\"color.complementaryColor\"></div>\n      }\n    </div>\n  </div>\n\n</div>\n\n","import { Directive, ElementRef, Renderer2, HostListener, EventEmitter, Output } from '@angular/core';\n\n@Directive({\n    selector: '[getColor]',\n    standalone: false\n})\nexport class ColorExtractorDirective {\n\n  @Output() colorValue: EventEmitter<string> = new EventEmitter<string>();\n\n  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}\n\n  get currentElement() {\n    return window.getComputedStyle(this.elementRef.nativeElement);\n  }\n\n  @HostListener('mouseenter')\n  onMouseEnter() {\n    // console.log('ENTER', this.currentElement)\n    this.colorValue.emit(this.currentElement.getPropertyValue('background-color'))\n  }\n\n  @HostListener('mouseleave')\n  onMouseLeave() {\n    // console.log('LEAVE', this.currentElement.getPropertyValue('background-color'))\n    this.colorValue.emit('white')\n  }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { ColorGrabberDirective } from './color-grab.directive';\n\nimport { ColorUtilitiesDemoComponent } from './color-utilities-demo/color-utilities-demo.component';\nimport { ColorExtractorDirective } from './color-extractor.directive';\n\n\n@NgModule({\n  imports: [\n    CommonModule,\n    MatButtonModule,\n    MatDividerModule\n  ],\n  declarations: [\n    ColorUtilitiesDemoComponent,\n    ColorGrabberDirective,\n    ColorExtractorDirective\n  ],\n  exports: [\n    ColorUtilitiesDemoComponent\n  ]\n})\nexport class ColorUtilHelpersModule { }\n","/*\n * Public API Surface of color-util-helpers\n */\n\nexport * from './lib/color-utils.module';\n\nexport * from './lib/color-utilities-demo/color-utilities-demo.component';\n\nexport * from './lib/color-conversion.service';\nexport * from './lib/color-extractor.directive';\nexport * from './lib/color-grab.directive';\nexport * from './lib/color-pallette.service';\nexport * from './lib/text-color.service';\n\nexport * from './lib/color-scheme.service';\nexport * from './lib/color-lighten-darken.service';\n\nexport * from './lib/color-utils.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.ColorConversionService"],"mappings":"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"}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "color-util-helpers",
+  "version": "0.0.21",
+  "homepage": "https://wavecoders.ca",
+  "author": "Mike Bonifacio <wavecoders@gmail.com> (http://wavecoders@gmail.com/)",
+  "description": "This is an Angular Module containing Components/Services using Material",
+  "funding": [
+    {
+      "type": "individual",
+      "url": "http://wavecoders.ca/donate"
+    }
+  ],
+  "peerDependencies": {
+    "@angular/common": "^15.2.0",
+    "@angular/core": "^15.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/color-util-helpers.mjs",
+  "typings": "types/color-util-helpers.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/color-util-helpers.d.ts",
+      "default": "./fesm2022/color-util-helpers.mjs"
+    }
+  }
+}

package/types/color-util-helpers.d.ts

@@ -0,0 +1,198 @@
+import * as i0 from '@angular/core';
+import { OnInit, ElementRef, EventEmitter, Renderer2 } from '@angular/core';
+import * as rxjs from 'rxjs';
+import * as i4 from '@angular/common';
+import * as i5 from '@angular/material/button';
+import * as i6 from '@angular/material/divider';
+
+declare class ColorConversionService {
+    rgbToHex(rgb: number[] | null): string;
+    private componentToHex;
+    hexToRgb(hex: string | null | undefined): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorConversionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColorConversionService>;
+}
+
+declare class ColorPalletteService {
+    private colorConversionService;
+    private palette;
+    palette$: rxjs.Observable<{
+        color: string;
+        complementaryColor: string;
+    }[]>;
+    constructor(colorConversionService: ColorConversionService);
+    /**
+     * Retrieves a color palette from an image at the specified path.
+     *
+     * @param imagePath - The path to the image to extract the color palette from.
+     * @param colors - The number of colors to include in the palette (default is 3).
+     * @returns An observable that emits the generated color palette.
+     */
+    getColorsFromImage(imagePath: string, colors?: number): void;
+    /**
+     * Generates a color palette from an image.
+     *
+     * @param image - The HTML image element to extract the color palette from.
+     * @param colorCount - The number of colors to include in the palette (default is 6).
+     * @returns An array of color objects, each with a hex color and a complementary hex color.
+     */
+    generateColorPalette(image: HTMLImageElement, colorCount?: number): {
+        color: string;
+        complementaryColor: string;
+    }[] | undefined;
+    private getLuminance;
+    private calculateColorDistance;
+    private calculateMeanColor;
+    private kMeansColorQuantization;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPalletteService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColorPalletteService>;
+}
+
+declare class TextColorService {
+    private colorConversionService;
+    constructor(colorConversionService: ColorConversionService);
+    textColorForBgColor(bgColor: string, lightColor: string, darkColor: string): string;
+    darkerColor(color1: string, color2: string): string;
+    isColorDarker(color1: string, color2: string): boolean;
+    lighterColor(color1: string, color2: string): string;
+    isColorLighter(color1: string, color2: string): boolean;
+    calculateLuminance(r: number, g: number, b: number): number;
+    fixColor(color: string): number[];
+    isValidHex(color: string): boolean;
+    hexToRgb(hex: string): number[];
+    parseRgb(rgb: string): number[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextColorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TextColorService>;
+}
+
+declare class ColorLightenDarkenService {
+    colors: TextColorService;
+    constructor();
+    lighten(color: string, amount: number): string;
+    darken(color: string, amount: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorLightenDarkenService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColorLightenDarkenService>;
+}
+
+declare class ColorSchemeService {
+    constructor();
+    /**
+     * Generates a random hexadecimal color code.
+     *
+     * This function generates a random hue value between 0 and 360 degrees, and random saturation and lightness values between 50% and 100%. It then converts the HSL values to RGB values using the `hslToRgb` function, and finally converts the RGB values to a hexadecimal color code using the `rgbToHex` function.
+     *
+     * @returns A hexadecimal color code in the format "#RRGGBB".
+     */
+    generateRandomColor(): string;
+    /**
+     * Converts HSL (Hue, Saturation, Lightness) color values to RGB (Red, Green, Blue) color values.
+     *
+     * @param h - The hue value, ranging from 0 to 360 degrees.
+     * @param s - The saturation value, ranging from 0 to 100 percent.
+     * @param l - The lightness value, ranging from 0 to 100 percent.
+     * @returns An object with the RGB color values, where each value is between 0 and 255.
+     */
+    hslToRgb(h: number, s: number, l: number): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    /**
+     * Converts RGB color values to a hexadecimal color string.
+     *
+     * @param r - The red color value, between 0 and 255.
+     * @param g - The green color value, between 0 and 255.
+     * @param b - The blue color value, between 0 and 255.
+     * @returns A hexadecimal color string in the format "#RRGGBB".
+     */
+    rgbToHex(r: number, g: number, b: number): string;
+    /**
+   * Adjusts a hexadecimal color value by a given percentage.
+   *
+   * @param hexColor - The hexadecimal color value to adjust.
+   * @param percentage - The percentage to adjust the color by, ranging from -100 to 100.
+   * @returns The adjusted hexadecimal color value.
+   */
+    adjustHexColor(hexColor: string, percentage: number): string;
+    clamp(value: number): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorSchemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ColorSchemeService>;
+}
+
+declare class ColorUtilitiesDemoComponent implements OnInit {
+    colorConversionService: ColorConversionService;
+    colorLightenDarkenService: ColorLightenDarkenService;
+    colorPalletteService: ColorPalletteService;
+    textColorService: TextColorService;
+    colorSchemeService: ColorSchemeService;
+    HEX: string;
+    RGB: string;
+    lighten: string;
+    darken: string;
+    colorIsDarker: boolean;
+    darkBk: string;
+    lightBk: string;
+    palette: any;
+    colors$: rxjs.Observable<{
+        color: string;
+        complementaryColor: string;
+    }[]>;
+    colorPick: string;
+    colorPickDarker: string;
+    colorPickLighter: string;
+    img: string | any;
+    constructor();
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorUtilitiesDemoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorUtilitiesDemoComponent, "app-color-utilities-demo", never, {}, {}, never, never, false, never>;
+}
+
+declare class ColorGrabberDirective implements OnInit {
+    private el;
+    ctx?: CanvasRenderingContext2D;
+    imageUrl?: string;
+    light?: string;
+    dark?: string;
+    constructor(el: ElementRef);
+    ngOnInit(): void;
+    textColorBasedOnBgColor(bgColor: string, lightColor?: string, darkColor?: string): string;
+    RGB2HSV(rgb: {
+        r: any;
+        g: any;
+        b: any;
+    }): {
+        saturation: number;
+        hue: number;
+        value: number;
+    };
+    HSV2RGB(hsv: any): {
+        rgb: string;
+        hex: string;
+    };
+    HueShift(h: any, s: any): any;
+    min3(a: any, b: any, c: any): any;
+    max3(a: any, b: any, c: any): any;
+    lightenDarkenColor(colorCode: any, amount: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorGrabberDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ColorGrabberDirective, "[colorGrabber]", never, { "imageUrl": { "alias": "imageUrl"; "required": false; }; "light": { "alias": "light"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class ColorExtractorDirective {
+    private elementRef;
+    private renderer;
+    colorValue: EventEmitter<string>;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    get currentElement(): CSSStyleDeclaration;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorExtractorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ColorExtractorDirective, "[getColor]", never, {}, { "colorValue": "colorValue"; }, never, never, false, never>;
+}
+
+declare class ColorUtilHelpersModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorUtilHelpersModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ColorUtilHelpersModule, [typeof ColorUtilitiesDemoComponent, typeof ColorGrabberDirective, typeof ColorExtractorDirective], [typeof i4.CommonModule, typeof i5.MatButtonModule, typeof i6.MatDividerModule], [typeof ColorUtilitiesDemoComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ColorUtilHelpersModule>;
+}
+
+export { ColorConversionService, ColorExtractorDirective, ColorGrabberDirective, ColorLightenDarkenService, ColorPalletteService, ColorSchemeService, ColorUtilHelpersModule, ColorUtilitiesDemoComponent, TextColorService };