@fils/color 0.0.9 → 0.1.1

package/lib/canvas-utils.js

@@ -21,6 +21,7 @@ export function drawColorPickerBar(canvas, x, y, width, height) {
     const h = height !== undefined ? height : canvas.height;
     const ctx = canvas.getContext('2d');
     for (let i = 0; i < w; i++) {
+        // const rad = (i * Math.PI) / 180;
         const dx = _x + i;
         const angle = 360 * i / w;
         ctx.fillStyle = `hsl(${angle}, 100%, 50%)`;
@@ -42,7 +43,7 @@ export function drawColorPickerSL(canvas, angle, x, y, width, height) {
                 s: j,
                 b: i
             });
-            ctx.fillStyle = hex;
+            ctx.fillStyle = hex; //`hsl(${angle}, ${j}%, ${100-i}%)`;
             ctx.fillRect(_x + w * j / 100, _y + h - h * i / 100, sw, sh);
         }
     }

package/lib/utils.d.ts

@@ -13,6 +13,8 @@ export type HSLColor = {
     s: number;
     l: number;
 };
+export type HexColor = `#${string}`;
+export declare function isValidHexColor(color: string): color is HexColor;
 export declare function componentToHex(c: number): string;
 export declare function rgbToHex(color: RGBColor): string;
 export declare function hexToRgb(hex: string): RGBColor;
@@ -26,3 +28,15 @@ export declare function hsbToHex(color: HSBColor): string;
 export declare function rgbToString(color: RGBColor): string;
 export declare function hsbToString(color: HSBColor): string;
 export declare function fixHex(color: string): string;
+export type LABColor = {
+    l: number;
+    a: number;
+    b: number;
+};
+export declare function rgbToLab(color: RGBColor): LABColor;
+export declare function colorDistance(color1: RGBColor, color2: RGBColor): number;
+export declare function findClosestColor(target: RGBColor, palette: RGBColor[]): {
+    color: RGBColor;
+    distance: number;
+    index: number;
+};

package/lib/utils.js

@@ -1,3 +1,6 @@
+export function isValidHexColor(color) {
+    return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color);
+}
 export function componentToHex(c) {
     const hex = c.toString(16);
     return hex.length === 1 ? '0' + hex : hex;
@@ -22,7 +25,7 @@ export function rgbToHsl(color) {
     const min = Math.min(r, g, b);
     let h, s, l = (max + min) / 2;
     if (max == min) {
-        h = s = 0;
+        h = s = 0; // achromatic
     }
     else {
         let d = max - min;
@@ -63,9 +66,10 @@ export function hslToRgb(color) {
     let r, g, b;
     const h = color.h, s = color.s, l = color.l;
     if (s == 0) {
-        r = g = b = l;
+        r = g = b = l; // achromatic
     }
     else {
+        // eslint-disable-next-line no-inner-declarations
         let q = color.l < 0.5 ? l * (1 + s) : l + s - l * s;
         let p = 2 * l - q;
         r = hue2rgb(p, q, h + 1 / 3);
@@ -143,6 +147,7 @@ export function fixHex(color) {
     while (fixedColor.length < 7) {
         fixedColor += "F";
     }
+    // Replace invalid characters with their closest valid hexadecimal equivalent using a regular expression
     fixedColor = fixedColor.replace(/[^A-F0-9]/g, (c) => {
         switch (c) {
             case "#":
@@ -174,3 +179,59 @@ export function fixHex(color) {
     });
     return fixedColor;
 }
+// RGB to LAB conversion (via XYZ)
+export function rgbToLab(color) {
+    // Convert RGB to linear RGB
+    let r = color.r / 255;
+    let g = color.g / 255;
+    let b = color.b / 255;
+    // Apply sRGB gamma correction
+    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;
+    // Convert to XYZ using sRGB matrix (D65 illuminant)
+    let x = (r * 0.4124564 + g * 0.3575761 + b * 0.1804375) * 100;
+    let y = (r * 0.2126729 + g * 0.7151522 + b * 0.0721750) * 100;
+    let z = (r * 0.0193339 + g * 0.1191920 + b * 0.9503041) * 100;
+    // Normalize for D65 white point
+    x /= 95.047;
+    y /= 100.000;
+    z /= 108.883;
+    // Convert XYZ to LAB
+    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 {
+        l: (116 * y) - 16,
+        a: 500 * (x - y),
+        b: 200 * (y - z)
+    };
+}
+// Simple ΔE*ab color difference (good enough for most cases)
+export function colorDistance(color1, color2) {
+    const lab1 = rgbToLab(color1);
+    const lab2 = rgbToLab(color2);
+    const deltaL = lab1.l - lab2.l;
+    const deltaA = lab1.a - lab2.a;
+    const deltaB = lab1.b - lab2.b;
+    return Math.sqrt(deltaL * deltaL + deltaA * deltaA + deltaB * deltaB);
+}
+// Find closest color in palette
+export function findClosestColor(target, palette) {
+    let minDistance = Infinity;
+    let closestColor = palette[0];
+    let closestIndex = 0;
+    palette.forEach((paletteColor, index) => {
+        const distance = colorDistance(target, paletteColor);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closestColor = paletteColor;
+            closestIndex = index;
+        }
+    });
+    return {
+        color: closestColor,
+        distance: minDistance,
+        index: closestIndex
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fils/color",
-	"version": "0.0.9",
+	"version": "0.1.1",
 	"description": "Color Package written in TypeScript",
 	"main": "lib/main.js",
 	"repository": "git@github.com:fil-studio/fils.git",
@@ -9,15 +9,13 @@
 	"license": "Apache-2.0",
 	"private": false,
 	"scripts": {
-		"prepare": "yarn build",
-		"build": "tsc --build tsconfig.color.json"
+		"prepublishOnly": "yarn build",
+		"build": "tsc"
 	},
 	"files": [
-		"lib",
-		"examples",
-		"README.md"
+		"lib"
 	],
 	"devDependencies": {
-		"typescript": "^4.8.4"
+		"typescript": "^5.9.3"
 	}
 }