@etsoo/shared 1.1.15 → 1.1.18

package/README.md

@@ -26,7 +26,12 @@ Etsoo implmented Color
 |static getColors|Get HEX or RGB colors|
 |static getEColors|Get EColors|
 |static parse|Parse HTML color to EColor|
+|clone|Clone color with adjustments|
+|getContrastRatio|Get contrast ratio, a value between 0 and 1|
+|getDeltaValue|Get Delta value (perceptible by human eyes)|
+|getLuminance|Get luminance|
 |toHEXColor|To HEX color string|
+|toLabValue|To Lab value|
 |toRGBColor|To RGB color string|
 
 ## Keyboard

package/__tests__/{EColor.ts → ColorUtils.ts}

@@ -1,4 +1,5 @@
 import { EColor } from '../src/types/EColor';
+import { ColorUtils } from '../src/ColorUtils';
 
 test('Tests for parse', () => {
     // Arrange & act
@@ -13,5 +14,13 @@ test('Tests for parse', () => {
 });
 
 test('Tests for getColors', () => {
-    expect(EColor.getColors(undefined, 128).length).toBe(8);
+    const colors = ColorUtils.getColors(undefined, 128);
+    expect(colors.length).toBe(8);
+});
+
+test('Tests for toRGBColor', () => {
+    const color = new EColor(0, 0, 0);
+    expect(color.toRGBColor()).toBe('RGB(0, 0, 0)');
+    expect(color.toRGBColor(0.1)).toBe('RGBA(0, 0, 0, 0.1)');
+    expect(color.alpha).toBeUndefined();
 });

package/lib/cjs/ColorUtils.d.ts

@@ -0,0 +1,23 @@
+import { EColor } from './types/EColor';
+/**
+ * Color utils
+ */
+export declare namespace ColorUtils {
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    function getColors(init?: string, factor?: number, adjustOrder?: boolean, hex?: boolean): string[];
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    function getEColors(init?: string, factor?: number, adjustOrder?: boolean): EColor[];
+}

package/lib/cjs/ColorUtils.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorUtils = void 0;
+const EColor_1 = require("./types/EColor");
+/**
+ * Color utils
+ */
+var ColorUtils;
+(function (ColorUtils) {
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    function getColors(init = '#000', factor = 51, adjustOrder = true, hex = true) {
+        return getEColors(init, factor, adjustOrder).map((c) => hex ? c.toHEXColor() : c.toRGBColor());
+    }
+    ColorUtils.getColors = getColors;
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    function getEColors(init = '#000', factor = 51, adjustOrder = true) {
+        var _a;
+        // Init color
+        const initColor = (_a = EColor_1.EColor.parse(init)) !== null && _a !== void 0 ? _a : new EColor_1.EColor(0, 0, 0);
+        // Factors elements
+        // 51 = '00', '33', '66', '99', 'cc', 'ff'
+        const factors = [];
+        let f = 0;
+        while (f <= 255) {
+            factors.push(f);
+            f += factor;
+        }
+        // RGB loop
+        const colors = [initColor];
+        for (const r of factors) {
+            for (const g of factors) {
+                for (const b of factors) {
+                    colors.push(initColor.clone(r, g, b));
+                }
+            }
+        }
+        // Non-nullable colors
+        const nColors = colors.filter((color) => color != null);
+        // Adjust order
+        if (adjustOrder) {
+            const firstColor = nColors.shift();
+            if (firstColor) {
+                let color = firstColor;
+                const newColors = [color];
+                while (nColors.length > 0) {
+                    const result = nColors.reduce((p, c, index) => {
+                        const delta = color.getDeltaValue(c);
+                        if (delta != null && delta > p.delta) {
+                            p.delta = delta;
+                            p.color = c;
+                            p.index = index;
+                        }
+                        return p;
+                    }, { delta: 0, color, index: -1 });
+                    if (result.delta > 0) {
+                        color = result.color;
+                        newColors.push(color);
+                        nColors.splice(result.index, 1);
+                    }
+                }
+                return newColors;
+            }
+        }
+        return nColors;
+    }
+    ColorUtils.getEColors = getEColors;
+})(ColorUtils = exports.ColorUtils || (exports.ColorUtils = {}));

package/lib/cjs/index.d.ts

@@ -4,6 +4,7 @@ export * from './types/FormData';
 export * from './storage/IStorage';
 export * from './storage/WindowStorage';
 export * from './DataTypes';
+export * from './ColorUtils';
 export * from './DateUtils';
 export * from './DomUtils';
 export * from './ExtendUtils';

package/lib/cjs/index.js

@@ -20,6 +20,7 @@ __exportStar(require("./types/FormData"), exports);
 __exportStar(require("./storage/IStorage"), exports);
 __exportStar(require("./storage/WindowStorage"), exports);
 __exportStar(require("./DataTypes"), exports);
+__exportStar(require("./ColorUtils"), exports);
 __exportStar(require("./DateUtils"), exports);
 __exportStar(require("./DomUtils"), exports);
 __exportStar(require("./ExtendUtils"), exports);

package/lib/cjs/types/EColor.d.ts

@@ -13,21 +13,6 @@ export declare class EColor {
      * @returns Adjusted value
      */
     static adjust(value: number, adjust?: number): number;
-    /**
-     * Get HEX or RGB colors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @param hex to HEX or not
-     * @returns Result
-     */
-    static getColors(init?: string, factor?: number, hex?: boolean): string[];
-    /**
-     * Get EColors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @returns Result
-     */
-    static getEColors(init?: string, factor?: number): EColor[];
     /**
      * HEX string to integer value
      * @param hex HEX string
@@ -55,7 +40,7 @@ export declare class EColor {
      */
     constructor(r: number, g: number, b: number, alpha?: number | undefined);
     /**
-     * Clone color with adjusts
+     * Clone color with adjustments
      * @param adjustR Adjust R value
      * @param adjustG Adjust G value
      * @param adjustB Adjust B value
@@ -63,14 +48,41 @@ export declare class EColor {
      */
     clone(adjustR?: number, adjustG?: number, adjustB?: number, alpha?: number): EColor | undefined;
     /**
-     * To RGB color string
-     * @param includeAlpha Include alpha or not
-     * @returns RGB color string
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
+     */
+    getContrastRatio(color: EColor): number;
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color: EColor): number;
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
      */
-    toRGBColor(includeAlpha?: boolean): string;
+    getLuminance(): number;
     /**
      * To HEX color string
      * @returns HEX color string
      */
     toHEXColor(): string;
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue(): [number, number, number];
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha?: boolean | number): string;
 }

package/lib/cjs/types/EColor.js

@@ -32,47 +32,6 @@ class EColor {
             return value % 255;
         return value;
     }
-    /**
-     * Get HEX or RGB colors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @param hex to HEX or not
-     * @returns Result
-     */
-    static getColors(init = '#000', factor = 51, hex = true) {
-        return EColor.getEColors(init, factor).map((c) => hex ? c.toHEXColor() : c.toRGBColor());
-    }
-    /**
-     * Get EColors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @returns Result
-     */
-    static getEColors(init = '#000', factor = 51) {
-        var _a;
-        // Init color
-        const initColor = (_a = EColor.parse(init)) !== null && _a !== void 0 ? _a : new EColor(0, 0, 0);
-        // Factors elements
-        // 51 = '00', '33', '66', '99', 'cc', 'ff'
-        const factors = [];
-        let f = 0;
-        while (f <= 255) {
-            factors.push(f);
-            f += factor;
-        }
-        // RGB loop
-        const colors = [initColor];
-        for (const r of factors) {
-            for (const g of factors) {
-                for (const b of factors) {
-                    const newColor = initColor.clone(r, g, b);
-                    if (newColor)
-                        colors.push(newColor);
-                }
-            }
-        }
-        return colors;
-    }
     /**
      * HEX string to integer value
      * @param hex HEX string
@@ -98,7 +57,7 @@ class EColor {
         // Null
         if (htmlColor == null)
             return undefined;
-        htmlColor = htmlColor.toUpperCase();
+        htmlColor = htmlColor.trim().toUpperCase();
         // HEX color
         if (htmlColor.startsWith('#')) {
             htmlColor = htmlColor.substring(1);
@@ -124,7 +83,7 @@ class EColor {
         return undefined;
     }
     /**
-     * Clone color with adjusts
+     * Clone color with adjustments
      * @param adjustR Adjust R value
      * @param adjustG Adjust G value
      * @param adjustB Adjust B value
@@ -142,17 +101,60 @@ class EColor {
         return new EColor(r, g, b, alpha);
     }
     /**
-     * To RGB color string
-     * @param includeAlpha Include alpha or not
-     * @returns RGB color string
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
      */
-    toRGBColor(includeAlpha) {
-        var _a;
-        // Default case
-        includeAlpha !== null && includeAlpha !== void 0 ? includeAlpha : (includeAlpha = this.alpha != null);
-        if (includeAlpha)
-            return `RGBA(${this.r}, ${this.g}, ${this.b}, ${(_a = this.alpha) !== null && _a !== void 0 ? _a : 1})`;
-        return `RGB(${this.r}, ${this.g}, ${this.b})`;
+    getContrastRatio(color) {
+        const lum1 = this.getLuminance();
+        const lum2 = color.getLuminance();
+        const brightest = Math.max(lum1, lum2);
+        const darkest = Math.min(lum1, lum2);
+        return (brightest + 0.05) / (darkest + 0.05);
+    }
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color) {
+        const labA = this.toLabValue();
+        const labB = color.toLabValue();
+        const deltaL = labA[0] - labB[0];
+        const deltaA = labA[1] - labB[1];
+        const deltaB = labA[2] - labB[2];
+        const c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+        const c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+        const deltaC = c1 - c2;
+        let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+        deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+        const sc = 1.0 + 0.045 * c1;
+        const sh = 1.0 + 0.015 * c1;
+        const deltaLKlsl = deltaL / 1.0;
+        const deltaCkcsc = deltaC / sc;
+        const deltaHkhsh = deltaH / sh;
+        const i = deltaLKlsl * deltaLKlsl +
+            deltaCkcsc * deltaCkcsc +
+            deltaHkhsh * deltaHkhsh;
+        return i < 0 ? 0 : Math.sqrt(i);
+    }
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+     */
+    getLuminance() {
+        const a = [this.r, this.g, this.b].map((v) => {
+            v /= 255;
+            return v <= 0.03928
+                ? v / 12.92
+                : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
     }
     /**
      * To HEX color string
@@ -161,5 +163,44 @@ class EColor {
     toHEXColor() {
         return `#${EColor.toHex(this.r)}${EColor.toHex(this.g)}${EColor.toHex(this.b)}`;
     }
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue() {
+        let r = this.r / 255, g = this.g / 255, b = this.b / 255, x, y, z;
+        r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+        g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+        b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+        x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+        y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
+        z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+        x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+        y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+        z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+        return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+    }
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha) {
+        // Decide
+        let includeAlpha, alphaValue = this.alpha;
+        if (typeof alpha === 'number') {
+            alphaValue = alpha;
+            includeAlpha = true;
+        }
+        else if (alpha == null) {
+            includeAlpha = this.alpha != null;
+        }
+        else {
+            includeAlpha = alpha;
+        }
+        if (includeAlpha)
+            return `RGBA(${this.r}, ${this.g}, ${this.b}, ${alphaValue !== null && alphaValue !== void 0 ? alphaValue : 1})`;
+        return `RGB(${this.r}, ${this.g}, ${this.b})`;
+    }
 }
 exports.EColor = EColor;

package/lib/mjs/ColorUtils.d.ts

@@ -0,0 +1,23 @@
+import { EColor } from './types/EColor';
+/**
+ * Color utils
+ */
+export declare namespace ColorUtils {
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    function getColors(init?: string, factor?: number, adjustOrder?: boolean, hex?: boolean): string[];
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    function getEColors(init?: string, factor?: number, adjustOrder?: boolean): EColor[];
+}

package/lib/mjs/ColorUtils.js

@@ -0,0 +1,77 @@
+import { EColor } from './types/EColor';
+/**
+ * Color utils
+ */
+export var ColorUtils;
+(function (ColorUtils) {
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    function getColors(init = '#000', factor = 51, adjustOrder = true, hex = true) {
+        return getEColors(init, factor, adjustOrder).map((c) => hex ? c.toHEXColor() : c.toRGBColor());
+    }
+    ColorUtils.getColors = getColors;
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    function getEColors(init = '#000', factor = 51, adjustOrder = true) {
+        var _a;
+        // Init color
+        const initColor = (_a = EColor.parse(init)) !== null && _a !== void 0 ? _a : new EColor(0, 0, 0);
+        // Factors elements
+        // 51 = '00', '33', '66', '99', 'cc', 'ff'
+        const factors = [];
+        let f = 0;
+        while (f <= 255) {
+            factors.push(f);
+            f += factor;
+        }
+        // RGB loop
+        const colors = [initColor];
+        for (const r of factors) {
+            for (const g of factors) {
+                for (const b of factors) {
+                    colors.push(initColor.clone(r, g, b));
+                }
+            }
+        }
+        // Non-nullable colors
+        const nColors = colors.filter((color) => color != null);
+        // Adjust order
+        if (adjustOrder) {
+            const firstColor = nColors.shift();
+            if (firstColor) {
+                let color = firstColor;
+                const newColors = [color];
+                while (nColors.length > 0) {
+                    const result = nColors.reduce((p, c, index) => {
+                        const delta = color.getDeltaValue(c);
+                        if (delta != null && delta > p.delta) {
+                            p.delta = delta;
+                            p.color = c;
+                            p.index = index;
+                        }
+                        return p;
+                    }, { delta: 0, color, index: -1 });
+                    if (result.delta > 0) {
+                        color = result.color;
+                        newColors.push(color);
+                        nColors.splice(result.index, 1);
+                    }
+                }
+                return newColors;
+            }
+        }
+        return nColors;
+    }
+    ColorUtils.getEColors = getEColors;
+})(ColorUtils || (ColorUtils = {}));

package/lib/mjs/index.d.ts

@@ -4,6 +4,7 @@ export * from './types/FormData';
 export * from './storage/IStorage';
 export * from './storage/WindowStorage';
 export * from './DataTypes';
+export * from './ColorUtils';
 export * from './DateUtils';
 export * from './DomUtils';
 export * from './ExtendUtils';

package/lib/mjs/index.js

@@ -4,6 +4,7 @@ export * from './types/FormData';
 export * from './storage/IStorage';
 export * from './storage/WindowStorage';
 export * from './DataTypes';
+export * from './ColorUtils';
 export * from './DateUtils';
 export * from './DomUtils';
 export * from './ExtendUtils';

package/lib/mjs/types/EColor.d.ts

@@ -13,21 +13,6 @@ export declare class EColor {
      * @returns Adjusted value
      */
     static adjust(value: number, adjust?: number): number;
-    /**
-     * Get HEX or RGB colors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @param hex to HEX or not
-     * @returns Result
-     */
-    static getColors(init?: string, factor?: number, hex?: boolean): string[];
-    /**
-     * Get EColors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @returns Result
-     */
-    static getEColors(init?: string, factor?: number): EColor[];
     /**
      * HEX string to integer value
      * @param hex HEX string
@@ -55,7 +40,7 @@ export declare class EColor {
      */
     constructor(r: number, g: number, b: number, alpha?: number | undefined);
     /**
-     * Clone color with adjusts
+     * Clone color with adjustments
      * @param adjustR Adjust R value
      * @param adjustG Adjust G value
      * @param adjustB Adjust B value
@@ -63,14 +48,41 @@ export declare class EColor {
      */
     clone(adjustR?: number, adjustG?: number, adjustB?: number, alpha?: number): EColor | undefined;
     /**
-     * To RGB color string
-     * @param includeAlpha Include alpha or not
-     * @returns RGB color string
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
+     */
+    getContrastRatio(color: EColor): number;
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color: EColor): number;
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
      */
-    toRGBColor(includeAlpha?: boolean): string;
+    getLuminance(): number;
     /**
      * To HEX color string
      * @returns HEX color string
      */
     toHEXColor(): string;
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue(): [number, number, number];
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha?: boolean | number): string;
 }

package/lib/mjs/types/EColor.js

@@ -29,47 +29,6 @@ export class EColor {
             return value % 255;
         return value;
     }
-    /**
-     * Get HEX or RGB colors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @param hex to HEX or not
-     * @returns Result
-     */
-    static getColors(init = '#000', factor = 51, hex = true) {
-        return EColor.getEColors(init, factor).map((c) => hex ? c.toHEXColor() : c.toRGBColor());
-    }
-    /**
-     * Get EColors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @returns Result
-     */
-    static getEColors(init = '#000', factor = 51) {
-        var _a;
-        // Init color
-        const initColor = (_a = EColor.parse(init)) !== null && _a !== void 0 ? _a : new EColor(0, 0, 0);
-        // Factors elements
-        // 51 = '00', '33', '66', '99', 'cc', 'ff'
-        const factors = [];
-        let f = 0;
-        while (f <= 255) {
-            factors.push(f);
-            f += factor;
-        }
-        // RGB loop
-        const colors = [initColor];
-        for (const r of factors) {
-            for (const g of factors) {
-                for (const b of factors) {
-                    const newColor = initColor.clone(r, g, b);
-                    if (newColor)
-                        colors.push(newColor);
-                }
-            }
-        }
-        return colors;
-    }
     /**
      * HEX string to integer value
      * @param hex HEX string
@@ -95,7 +54,7 @@ export class EColor {
         // Null
         if (htmlColor == null)
             return undefined;
-        htmlColor = htmlColor.toUpperCase();
+        htmlColor = htmlColor.trim().toUpperCase();
         // HEX color
         if (htmlColor.startsWith('#')) {
             htmlColor = htmlColor.substring(1);
@@ -121,7 +80,7 @@ export class EColor {
         return undefined;
     }
     /**
-     * Clone color with adjusts
+     * Clone color with adjustments
      * @param adjustR Adjust R value
      * @param adjustG Adjust G value
      * @param adjustB Adjust B value
@@ -139,17 +98,60 @@ export class EColor {
         return new EColor(r, g, b, alpha);
     }
     /**
-     * To RGB color string
-     * @param includeAlpha Include alpha or not
-     * @returns RGB color string
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
      */
-    toRGBColor(includeAlpha) {
-        var _a;
-        // Default case
-        includeAlpha !== null && includeAlpha !== void 0 ? includeAlpha : (includeAlpha = this.alpha != null);
-        if (includeAlpha)
-            return `RGBA(${this.r}, ${this.g}, ${this.b}, ${(_a = this.alpha) !== null && _a !== void 0 ? _a : 1})`;
-        return `RGB(${this.r}, ${this.g}, ${this.b})`;
+    getContrastRatio(color) {
+        const lum1 = this.getLuminance();
+        const lum2 = color.getLuminance();
+        const brightest = Math.max(lum1, lum2);
+        const darkest = Math.min(lum1, lum2);
+        return (brightest + 0.05) / (darkest + 0.05);
+    }
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color) {
+        const labA = this.toLabValue();
+        const labB = color.toLabValue();
+        const deltaL = labA[0] - labB[0];
+        const deltaA = labA[1] - labB[1];
+        const deltaB = labA[2] - labB[2];
+        const c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+        const c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+        const deltaC = c1 - c2;
+        let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+        deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+        const sc = 1.0 + 0.045 * c1;
+        const sh = 1.0 + 0.015 * c1;
+        const deltaLKlsl = deltaL / 1.0;
+        const deltaCkcsc = deltaC / sc;
+        const deltaHkhsh = deltaH / sh;
+        const i = deltaLKlsl * deltaLKlsl +
+            deltaCkcsc * deltaCkcsc +
+            deltaHkhsh * deltaHkhsh;
+        return i < 0 ? 0 : Math.sqrt(i);
+    }
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+     */
+    getLuminance() {
+        const a = [this.r, this.g, this.b].map((v) => {
+            v /= 255;
+            return v <= 0.03928
+                ? v / 12.92
+                : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
     }
     /**
      * To HEX color string
@@ -158,4 +160,43 @@ export class EColor {
     toHEXColor() {
         return `#${EColor.toHex(this.r)}${EColor.toHex(this.g)}${EColor.toHex(this.b)}`;
     }
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue() {
+        let r = this.r / 255, g = this.g / 255, b = this.b / 255, x, y, z;
+        r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+        g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+        b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+        x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+        y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
+        z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+        x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+        y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+        z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+        return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+    }
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha) {
+        // Decide
+        let includeAlpha, alphaValue = this.alpha;
+        if (typeof alpha === 'number') {
+            alphaValue = alpha;
+            includeAlpha = true;
+        }
+        else if (alpha == null) {
+            includeAlpha = this.alpha != null;
+        }
+        else {
+            includeAlpha = alpha;
+        }
+        if (includeAlpha)
+            return `RGBA(${this.r}, ${this.g}, ${this.b}, ${alphaValue !== null && alphaValue !== void 0 ? alphaValue : 1})`;
+        return `RGB(${this.r}, ${this.g}, ${this.b})`;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/shared",
-    "version": "1.1.15",
+    "version": "1.1.18",
     "description": "TypeScript shared utilities and functions",
     "main": "lib/cjs/index.js",
     "module": "lib/mjs/index.js",
@@ -55,13 +55,13 @@
     "dependencies": {},
     "devDependencies": {
         "@types/jest": "^27.4.1",
-        "@typescript-eslint/eslint-plugin": "^5.13.0",
-        "@typescript-eslint/parser": "^5.13.0",
-        "eslint": "^8.10.0",
+        "@typescript-eslint/eslint-plugin": "^5.16.0",
+        "@typescript-eslint/parser": "^5.16.0",
+        "eslint": "^8.11.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
         "jest": "^27.5.1",
-        "ts-jest": "^27.1.3",
-        "typescript": "^4.6.2"
+        "ts-jest": "^27.1.4",
+        "typescript": "^4.6.3"
     }
 }

package/src/ColorUtils.ts

@@ -0,0 +1,99 @@
+import { EColor } from './types/EColor';
+
+/**
+ * Color utils
+ */
+export namespace ColorUtils {
+    /**
+     * Get HEX or RGB colors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @param hex to HEX or not
+     * @returns Result
+     */
+    export function getColors(
+        init: string = '#000',
+        factor: number = 51,
+        adjustOrder: boolean = true,
+        hex: boolean = true
+    ) {
+        return getEColors(init, factor, adjustOrder).map((c) =>
+            hex ? c.toHEXColor() : c.toRGBColor()
+        );
+    }
+
+    /**
+     * Get EColors
+     * @param init Initial color
+     * @param factor Increase factor
+     * @param adjustOrder Adjust order to increase difference
+     * @returns Result
+     */
+    export function getEColors(
+        init: string = '#000',
+        factor: number = 51,
+        adjustOrder: boolean = true
+    ): EColor[] {
+        // Init color
+        const initColor = EColor.parse(init) ?? new EColor(0, 0, 0);
+
+        // Factors elements
+        // 51 = '00', '33', '66', '99', 'cc', 'ff'
+        const factors: number[] = [];
+        let f = 0;
+        while (f <= 255) {
+            factors.push(f);
+            f += factor;
+        }
+
+        // RGB loop
+        const colors: (EColor | undefined)[] = [initColor];
+        for (const r of factors) {
+            for (const g of factors) {
+                for (const b of factors) {
+                    colors.push(initColor.clone(r, g, b));
+                }
+            }
+        }
+
+        // Non-nullable colors
+        const nColors = colors.filter(
+            (color): color is EColor => color != null
+        );
+
+        // Adjust order
+        if (adjustOrder) {
+            const firstColor = nColors.shift();
+            if (firstColor) {
+                let color = firstColor;
+                const newColors: EColor[] = [color];
+
+                while (nColors.length > 0) {
+                    const result = nColors.reduce(
+                        (p, c, index) => {
+                            const delta = color.getDeltaValue(c);
+                            if (delta != null && delta > p.delta) {
+                                p.delta = delta;
+                                p.color = c;
+                                p.index = index;
+                            }
+                            return p;
+                        },
+                        { delta: 0, color, index: -1 }
+                    );
+
+                    if (result.delta > 0) {
+                        color = result.color;
+                        newColors.push(color);
+                        nColors.splice(result.index, 1);
+                    }
+                }
+
+                return newColors;
+            }
+        }
+
+        return nColors;
+    }
+}

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './storage/IStorage';
 export * from './storage/WindowStorage';
 
 export * from './DataTypes';
+export * from './ColorUtils';
 export * from './DateUtils';
 export * from './DomUtils';
 export * from './ExtendUtils';

package/src/types/EColor.ts

@@ -15,53 +15,6 @@ export class EColor {
         return value;
     }
 
-    /**
-     * Get HEX or RGB colors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @param hex to HEX or not
-     * @returns Result
-     */
-    static getColors(init = '#000', factor: number = 51, hex: boolean = true) {
-        return EColor.getEColors(init, factor).map((c) =>
-            hex ? c.toHEXColor() : c.toRGBColor()
-        );
-    }
-
-    /**
-     * Get EColors
-     * @param init Initial color
-     * @param factor Increase factor
-     * @returns Result
-     */
-    static getEColors(init = '#000', factor: number = 51): EColor[] {
-        // Init color
-        const initColor = EColor.parse(init) ?? new EColor(0, 0, 0);
-
-        // Factors elements
-        // 51 = '00', '33', '66', '99', 'cc', 'ff'
-        const factors: number[] = [];
-        let f = 0;
-        while (f <= 255) {
-            factors.push(f);
-            f += factor;
-        }
-
-        // RGB loop
-        const colors: EColor[] = [initColor];
-
-        for (const r of factors) {
-            for (const g of factors) {
-                for (const b of factors) {
-                    const newColor = initColor.clone(r, g, b);
-                    if (newColor) colors.push(newColor);
-                }
-            }
-        }
-
-        return colors;
-    }
-
     /**
      * HEX string to integer value
      * @param hex HEX string
@@ -88,7 +41,7 @@ export class EColor {
     static parse(htmlColor?: string | null): EColor | undefined {
         // Null
         if (htmlColor == null) return undefined;
-        htmlColor = htmlColor.toUpperCase();
+        htmlColor = htmlColor.trim().toUpperCase();
 
         // HEX color
         if (htmlColor.startsWith('#')) {
@@ -143,7 +96,7 @@ export class EColor {
     ) {}
 
     /**
-     * Clone color with adjusts
+     * Clone color with adjustments
      * @param adjustR Adjust R value
      * @param adjustG Adjust G value
      * @param adjustB Adjust B value
@@ -169,18 +122,63 @@ export class EColor {
     }
 
     /**
-     * To RGB color string
-     * @param includeAlpha Include alpha or not
-     * @returns RGB color string
+     * Get contrast ratio, a value between 0 and 1
+     * @param color Contrast color
      */
-    toRGBColor(includeAlpha?: boolean) {
-        // Default case
-        includeAlpha ??= this.alpha != null;
+    getContrastRatio(color: EColor) {
+        const lum1 = this.getLuminance();
+        const lum2 = color.getLuminance();
+        const brightest = Math.max(lum1, lum2);
+        const darkest = Math.min(lum1, lum2);
+        return (brightest + 0.05) / (darkest + 0.05);
+    }
 
-        if (includeAlpha)
-            return `RGBA(${this.r}, ${this.g}, ${this.b}, ${this.alpha ?? 1})`;
+    /**
+     * Get Delta value (perceptible by human eyes)
+     * <= 1, Not perceptible by human eyes
+     * 1 - 2, Perceptible through close observation
+     * 2 - 10, Perceptible at a glance
+     * 11 - 49, Colors are more similar than opposite
+     * 100+, Colors are exact opposite
+     * @param color Contrast color
+     * @returns Value
+     */
+    getDeltaValue(color: EColor) {
+        const labA = this.toLabValue();
+        const labB = color.toLabValue();
+        const deltaL = labA[0] - labB[0];
+        const deltaA = labA[1] - labB[1];
+        const deltaB = labA[2] - labB[2];
+        const c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+        const c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+        const deltaC = c1 - c2;
+        let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+        deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+        const sc = 1.0 + 0.045 * c1;
+        const sh = 1.0 + 0.015 * c1;
+        const deltaLKlsl = deltaL / 1.0;
+        const deltaCkcsc = deltaC / sc;
+        const deltaHkhsh = deltaH / sh;
+        const i =
+            deltaLKlsl * deltaLKlsl +
+            deltaCkcsc * deltaCkcsc +
+            deltaHkhsh * deltaHkhsh;
+        return i < 0 ? 0 : Math.sqrt(i);
+    }
 
-        return `RGB(${this.r}, ${this.g}, ${this.b})`;
+    /**
+     * Get luminance
+     * Darker one has higher luminance
+     * https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o
+     */
+    getLuminance() {
+        const a = [this.r, this.g, this.b].map((v) => {
+            v /= 255;
+            return v <= 0.03928
+                ? v / 12.92
+                : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
     }
 
     /**
@@ -192,4 +190,52 @@ export class EColor {
             this.b
         )}`;
     }
+
+    /**
+     * To Lab value
+     * @returns Lab value
+     */
+    toLabValue(): [number, number, number] {
+        let r = this.r / 255,
+            g = this.g / 255,
+            b = this.b / 255,
+            x,
+            y,
+            z;
+        r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+        g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+        b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+        x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+        y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
+        z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+        x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+        y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+        z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+        return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+    }
+
+    /**
+     * To RGB color string
+     * @param alpha Alpha value, false means ignore it
+     * @returns RGB color string
+     */
+    toRGBColor(alpha?: boolean | number) {
+        // Decide
+        let includeAlpha: boolean,
+            alphaValue: number | undefined = this.alpha;
+
+        if (typeof alpha === 'number') {
+            alphaValue = alpha;
+            includeAlpha = true;
+        } else if (alpha == null) {
+            includeAlpha = this.alpha != null;
+        } else {
+            includeAlpha = alpha;
+        }
+
+        if (includeAlpha)
+            return `RGBA(${this.r}, ${this.g}, ${this.b}, ${alphaValue ?? 1})`;
+
+        return `RGB(${this.r}, ${this.g}, ${this.b})`;
+    }
 }