apexify.js 4.9.30 → 5.0.0

package/lib/Canvas/utils/General/general functions.ts

@@ -1,7 +1,7 @@
-import path from 'path'
+import path from 'path';
 import sharp from 'sharp';
-import { cropOptions, ResizeOptions } from '../types';
-import { createCanvas, loadImage, SKRSContext2D } from '@napi-rs/canvas';
+import { cropOptions, ResizeOptions, GradientConfig, gradient, ImageFilter } from '../types';
+import { createCanvas, loadImage, SKRSContext2D, Image, Canvas } from '@napi-rs/canvas';
 import fs from "fs";
 import axios from "axios";
 
@@ -100,9 +100,9 @@ export async function converter(imagePath: string, newExtension: string) {
   }
 }
 
-export async function applyColorFilters(imagePath: string, gradientOptions?: any, opacity: number = 1) {
+export async function applyColorFilters(imagePath: string, gradientOptions?: string | GradientConfig, opacity: number = 1): Promise<Buffer> {
   try {
-    let image: any;
+    let image: sharp.Sharp;
 
     if (imagePath.startsWith("http")) {
       const pngBuffer = await converter(imagePath, "png");
@@ -117,8 +117,10 @@ export async function applyColorFilters(imagePath: string, gradientOptions?: any
 
     if (typeof gradientOptions === 'string') {
       gradientImage = createSolidColorImage(metadata.width, metadata.height, gradientOptions, opacity);
-    } else {
+    } else if (gradientOptions) {
       gradientImage = createGradientImage(metadata.width, metadata.height, gradientOptions, opacity);
+    } else {
+      throw new Error("applyColorFilters: gradientOptions must be a string or GradientConfig object.");
     }
 
     const outputBuffer = await image
@@ -132,9 +134,13 @@ export async function applyColorFilters(imagePath: string, gradientOptions?: any
   }
 }
 
-function createSolidColorImage(width: number, height: number, color: string, opacity: number) {
+function createSolidColorImage(width: number | undefined, height: number | undefined, color: string, opacity: number): Buffer {
+  if (!width || !height) {
+    throw new Error("createSolidColorImage: width and height are required.");
+  }
   const solidColorCanvas = createCanvas(width, height);
-  const ctx = solidColorCanvas.getContext('2d');
+  const ctx = solidColorCanvas.getContext('2d') as SKRSContext2D;
+  if (!ctx) throw new Error("Unable to get 2D context");
 
   ctx.globalAlpha = opacity;
 
@@ -144,11 +150,15 @@ function createSolidColorImage(width: number, height: number, color: string, opa
   return solidColorCanvas.toBuffer('image/png');
 }
 
-function createGradientImage(width: number, height: number, options: any, opacity: number) {
+function createGradientImage(width: number | undefined, height: number | undefined, options: GradientConfig, opacity: number): Buffer {
+  if (!width || !height) {
+    throw new Error("createGradientImage: width and height are required.");
+  }
   const { type, colors } = options;
 
   const gradientCanvas = createCanvas(width, height);
-  const ctx = gradientCanvas.getContext('2d');
+  const ctx = gradientCanvas.getContext('2d') as SKRSContext2D;
+  if (!ctx) throw new Error("Unable to get 2D context");
 
   if (type === 'linear') {
     const gradient = ctx.createLinearGradient(
@@ -158,7 +168,7 @@ function createGradientImage(width: number, height: number, options: any, opacit
       options.endY || height
     );
 
-    colors.forEach(({ stop, color }: any) => {
+    colors.forEach(({ stop, color }: { stop: number; color: string }) => {
       gradient.addColorStop(stop, color);
     });
 
@@ -173,7 +183,7 @@ function createGradientImage(width: number, height: number, options: any, opacit
       options.endRadius || Math.max(width, height)
     );
 
-    colors.forEach(({ stop, color }: any) => {
+    colors.forEach(({ stop, color }: { stop: number; color: string }) => {
       gradient.addColorStop(stop, color);
     });
 
@@ -189,9 +199,33 @@ function createGradientImage(width: number, height: number, options: any, opacit
 
 
 
-export async function imgEffects(imagePath: string, filters: any[]) {
+// Legacy filter type for imgEffects (different from ImageFilter)
+// This supports both legacy filter types and standard ImageFilter types
+type LegacyImageFilter = {
+  type: 'flip' | 'rotate' | 'brightness' | 'contrast' | 'invert' | 'greyscale' | 'sepia' | 'blur' | 'posterize' | 'pixelate';
+  horizontal?: boolean;
+  vertical?: boolean;
+  deg?: number;
+  value?: number;
+  radius?: number;
+  levels?: number;
+  size?: number;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+} | {
+  type: 'brightness' | 'contrast' | 'invert' | 'grayscale' | 'sepia' | 'posterize' | 'pixelate' | 'gaussianBlur';
+  value?: number;
+  intensity?: number;
+  radius?: number;
+  levels?: number;
+  size?: number;
+};
+
+export async function imgEffects(imagePath: string, filters: LegacyImageFilter[] | ImageFilter[]): Promise<Buffer> {
   try {
-    let image;
+    let image: Image;
 
     if (imagePath.startsWith("http")) {
       const response = await axios.get(imagePath, { responseType: "arraybuffer" });
@@ -202,7 +236,8 @@ export async function imgEffects(imagePath: string, filters: any[]) {
     }
 
     const canvas = createCanvas(image.width, image.height);
-    const ctx = canvas.getContext("2d");
+    const ctx = canvas.getContext("2d") as SKRSContext2D;
+    if (!ctx) throw new Error("Unable to get 2D context");
 
     ctx.drawImage(image, 0, 0);
 
@@ -212,13 +247,13 @@ export async function imgEffects(imagePath: string, filters: any[]) {
           flipCanvas(ctx, image.width, image.height, filter.horizontal, filter.vertical);
           break;
         case "rotate":
-          rotateCanvas(ctx, canvas, filter.deg);
+          rotateCanvas(ctx, canvas, filter.deg ?? 0);
           break;
         case "brightness":
-          adjustBrightness(ctx, filter.value);
+          adjustBrightness(ctx, filter.value ?? 0);
           break;
         case "contrast":
-          adjustContrast(ctx, filter.value);
+          adjustContrast(ctx, filter.value ?? 0);
           break;
         case "invert":
           invertColors(ctx);
@@ -230,13 +265,19 @@ export async function imgEffects(imagePath: string, filters: any[]) {
           applySepia(ctx);
           break;
         case "blur":
-          applyBlur(ctx, filter.radius);
+          applyBlur(ctx, filter.radius ?? 0);
           break;
         case "posterize":
-          posterize(ctx, filter.levels);
+          posterize(ctx, filter.levels ?? 4);
           break;
         case "pixelate":
-          pixelate(ctx, filter.size, filter.x, filter.y, filter.w, filter.h);
+          if ('x' in filter && 'y' in filter && 'w' in filter && 'h' in filter) {
+            // Legacy filter with x, y, w, h properties
+            pixelate(ctx, filter.size ?? 10, filter.x ?? 0, filter.y ?? 0, filter.w ?? image.width, filter.h ?? image.height);
+          } else {
+            // Standard ImageFilter - use default values
+            pixelate(ctx, filter.size ?? 10, 0, 0, image.width, image.height);
+          }
           break;
         default:
           console.error(`Unsupported filter type: ${filter.type}`);
@@ -244,9 +285,9 @@ export async function imgEffects(imagePath: string, filters: any[]) {
     }
 
     return canvas.toBuffer("image/png");
-  } catch (error: any) {
-    console.error("Error processing image:", error.message);
-    throw new Error("Failed to process image");
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+    throw new Error(`imgEffects failed: ${errorMessage}`);
   }
 }
 
@@ -258,7 +299,7 @@ export async function imgEffects(imagePath: string, filters: any[]) {
 export async function cropInner(options: cropOptions): Promise<Buffer> {
   try {
     // Load the image (from HTTP or local path)
-    let image;
+    let image: Image;
     if (options.imageSource.startsWith("http")) {
       image = await loadImage(options.imageSource);
     } else {
@@ -327,7 +368,7 @@ export async function cropInner(options: cropOptions): Promise<Buffer> {
  */
 export async function cropOuter(options: cropOptions): Promise<Buffer> {
   try {
-    let image;
+    let image: Image;
     if (options.imageSource.startsWith("http")) {
       image = await loadImage(options.imageSource);
     } else {
@@ -380,7 +421,7 @@ export async function cropOuter(options: cropOptions): Promise<Buffer> {
  */
 export async function detectColors(imagePath: string): Promise<{ color: string; frequency: string }[]> {
   try {
-      let image: any;
+      let image: Image;
 
       if (imagePath.startsWith('http')) {
           const response = await fetch(imagePath);
@@ -393,7 +434,8 @@ export async function detectColors(imagePath: string): Promise<{ color: string;
       }
 
       const canvas = createCanvas(image.width, image.height);
-      const ctx = canvas.getContext('2d');
+      const ctx = canvas.getContext('2d') as SKRSContext2D;
+      if (!ctx) throw new Error("Unable to get 2D context");
       ctx.drawImage(image, 0, 0, image.width, image.height);
 
       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -427,7 +469,7 @@ export async function detectColors(imagePath: string): Promise<{ color: string;
 
 export async function removeColor(inputImagePath: string, colorToRemove: { red: number; green: number; blue: number }): Promise<Buffer | undefined> {
   try {
-      let image: any;
+      let image: Image;
       if (inputImagePath.startsWith('http')) {
           const response = await fetch(inputImagePath);
           if (!response.ok) {
@@ -441,7 +483,8 @@ export async function removeColor(inputImagePath: string, colorToRemove: { red:
       }
 
       const canvas = createCanvas(image.width, image.height);
-      const ctx = canvas.getContext('2d') as any;
+      const ctx = canvas.getContext('2d') as SKRSContext2D;
+      if (!ctx) throw new Error("Unable to get 2D context");
 
       ctx.drawImage(image, 0, 0, image.width, image.height);
 
@@ -498,7 +541,7 @@ export async function bgRemoval(imgURL: string, API_KEY: string): Promise<Buffer
 }
 
 
-function flipCanvas(ctx: any, width: number, height: number, horizontal = false, vertical = false) {
+function flipCanvas(ctx: SKRSContext2D, width: number, height: number, horizontal = false, vertical = false): void {
   const imageData = ctx.getImageData(0, 0, width, height);
   const pixels = imageData.data;
 
@@ -521,10 +564,11 @@ function flipCanvas(ctx: any, width: number, height: number, horizontal = false,
   ctx.putImageData(new ImageData(newData, width, height), 0, 0);
 }
 
-function rotateCanvas(ctx: any, canvas: any, degrees: number) {
+function rotateCanvas(ctx: SKRSContext2D, canvas: Canvas, degrees: number): void {
   const radians = (degrees * Math.PI) / 180;
   const newCanvas = createCanvas(canvas.width, canvas.height);
-  const newCtx = newCanvas.getContext("2d");
+  const newCtx = newCanvas.getContext("2d") as SKRSContext2D;
+  if (!newCtx) throw new Error("Unable to get 2D context");
 
   newCtx.translate(canvas.width / 2, canvas.height / 2);
   newCtx.rotate(radians);
@@ -533,7 +577,7 @@ function rotateCanvas(ctx: any, canvas: any, degrees: number) {
   ctx.drawImage(newCanvas, 0, 0);
 }
 
-function adjustBrightness(ctx: any, value: number) {
+function adjustBrightness(ctx: SKRSContext2D, value: number): void {
   const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
   const pixels = imageData.data;
   for (let i = 0; i < pixels.length; i += 4) {
@@ -544,7 +588,7 @@ function adjustBrightness(ctx: any, value: number) {
   ctx.putImageData(imageData, 0, 0);
 }
 
-function adjustContrast(ctx: any, value: number) {
+function adjustContrast(ctx: SKRSContext2D, value: number): void {
   const factor = (259 * (value + 255)) / (255 * (259 - value));
   const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
   const pixels = imageData.data;
@@ -556,7 +600,7 @@ function adjustContrast(ctx: any, value: number) {
   ctx.putImageData(imageData, 0, 0);
 }
 
-function invertColors(ctx: any) {
+function invertColors(ctx: SKRSContext2D): void {
   const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
   const pixels = imageData.data;
   for (let i = 0; i < pixels.length; i += 4) {
@@ -567,7 +611,7 @@ function invertColors(ctx: any) {
   ctx.putImageData(imageData, 0, 0);
 }
 
-function grayscale(ctx: any) {
+function grayscale(ctx: SKRSContext2D): void {
   const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
   const pixels = imageData.data;
   for (let i = 0; i < pixels.length; i += 4) {
@@ -577,7 +621,7 @@ function grayscale(ctx: any) {
   ctx.putImageData(imageData, 0, 0);
 }
 
-function applySepia(ctx: any) {
+function applySepia(ctx: SKRSContext2D): void {
   const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
   const pixels = imageData.data;
   for (let i = 0; i < pixels.length; i += 4) {
@@ -593,7 +637,7 @@ function applySepia(ctx: any) {
 }
 
 
-function applyBlur(ctx: any, radius: number) {
+function applyBlur(ctx: SKRSContext2D, radius: number): void {
   if (radius <= 0) return;
   const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
   const pixels = imageData.data;
@@ -625,7 +669,7 @@ function applyBlur(ctx: any, radius: number) {
   ctx.putImageData(imageData, 0, 0);
 }
 
-function posterize(ctx: any, levels: number) {
+function posterize(ctx: SKRSContext2D, levels: number): void {
   if (levels < 2 || levels > 255) return;
   const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
   const pixels = imageData.data;
@@ -640,7 +684,7 @@ function posterize(ctx: any, levels: number) {
   ctx.putImageData(imageData, 0, 0);
 }
 
-function pixelate(ctx: any, size: number, startX = 0, startY = 0, width = ctx.canvas.width, height = ctx.canvas.height) {
+function pixelate(ctx: SKRSContext2D, size: number, startX = 0, startY = 0, width = ctx.canvas.width, height = ctx.canvas.height): void {
   if (size < 1) return;
   const imageData = ctx.getImageData(startX, startY, width, height);
   const pixels = imageData.data;

package/lib/Canvas/utils/General/imageCompression.ts

@@ -0,0 +1,316 @@
+import sharp from 'sharp';
+import path from 'path';
+import { CompressionOptions, PaletteOptions } from '../types';
+
+/**
+ * Compresses an image with quality control
+ * @param image - Image source (path, URL, or Buffer)
+ * @param options - Compression options
+ * @returns Compressed image buffer
+ */
+export async function compressImage(
+  image: string | Buffer,
+  options: CompressionOptions = {}
+): Promise<Buffer> {
+  const {
+    quality = 90,
+    format = 'jpeg',
+    maxWidth,
+    maxHeight,
+    progressive = false
+  } = options;
+
+  let sharpImage: sharp.Sharp;
+
+  if (Buffer.isBuffer(image)) {
+    sharpImage = sharp(image);
+  } else if (typeof image === 'string' && image.startsWith('http')) {
+    const response = await fetch(image);
+    const buffer = await response.arrayBuffer();
+    sharpImage = sharp(Buffer.from(buffer));
+  } else {
+    const imagePath = path.join(process.cwd(), image);
+    sharpImage = sharp(imagePath);
+  }
+
+  // Resize if needed
+  if (maxWidth || maxHeight) {
+    sharpImage = sharpImage.resize(maxWidth, maxHeight, {
+      fit: 'inside',
+      withoutEnlargement: true
+    });
+  }
+
+  // Convert and compress
+  switch (format) {
+    case 'jpeg':
+      return await sharpImage
+        .jpeg({ quality, progressive })
+        .toBuffer();
+        
+    case 'webp':
+      return await sharpImage
+        .webp({ quality })
+        .toBuffer();
+        
+    case 'avif':
+      return await sharpImage
+        .avif({ quality })
+        .toBuffer();
+        
+    default:
+      return await sharpImage
+        .jpeg({ quality, progressive })
+        .toBuffer();
+  }
+}
+
+/**
+ * Extracts color palette from an image
+ * @param image - Image source (path, URL, or Buffer)
+ * @param options - Palette extraction options
+ * @returns Array of colors with percentages
+ */
+export async function extractPalette(
+  image: string | Buffer,
+  options: PaletteOptions = {}
+): Promise<Array<{ color: string; percentage: number }>> {
+  const {
+    count = 10,
+    method = 'kmeans',
+    format = 'hex'
+  } = options;
+
+  let sharpImage: sharp.Sharp;
+
+  if (Buffer.isBuffer(image)) {
+    sharpImage = sharp(image);
+  } else if (typeof image === 'string' && image.startsWith('http')) {
+    const response = await fetch(image);
+    const buffer = await response.arrayBuffer();
+    sharpImage = sharp(Buffer.from(buffer));
+  } else {
+    const imagePath = path.join(process.cwd(), image);
+    sharpImage = sharp(imagePath);
+  }
+
+  // Resize for faster processing
+  const { data, info } = await sharpImage
+    .resize(200, 200, { fit: 'inside' })
+    .raw()
+    .toBuffer({ resolveWithObject: true });
+
+  const pixels: Array<{ r: number; g: number; b: number }> = [];
+  for (let i = 0; i < data.length; i += info.channels) {
+    pixels.push({
+      r: data[i],
+      g: data[i + 1],
+      b: data[i + 2]
+    });
+  }
+
+  // Extract colors based on method
+  let colors: Array<{ r: number; g: number; b: number; count: number }> = [];
+
+  if (method === 'median-cut') {
+    colors = medianCut(pixels, count);
+  } else if (method === 'octree') {
+    colors = octreeQuantization(pixels, count);
+  } else {
+    // kmeans (default)
+    colors = kmeansClustering(pixels, count);
+  }
+
+  // Convert to requested format and calculate percentages
+  const totalPixels = pixels.length;
+  const palette = colors.map(color => {
+    let colorString: string;
+    
+    if (format === 'hex') {
+      colorString = `#${[color.r, color.g, color.b].map(c => 
+        c.toString(16).padStart(2, '0')
+      ).join('')}`;
+    } else if (format === 'rgb') {
+      colorString = `rgb(${color.r}, ${color.g}, ${color.b})`;
+    } else {
+      // hsl
+      const hsl = rgbToHsl(color.r, color.g, color.b);
+      colorString = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+    }
+
+    return {
+      color: colorString,
+      percentage: (color.count / totalPixels) * 100
+    };
+  });
+
+  // Sort by percentage descending
+  return palette.sort((a, b) => b.percentage - a.percentage);
+}
+
+/**
+ * K-means clustering for color extraction
+ */
+function kmeansClustering(
+  pixels: Array<{ r: number; g: number; b: number }>,
+  k: number
+): Array<{ r: number; g: number; b: number; count: number }> {
+  // Initialize centroids randomly
+  const centroids: Array<{ r: number; g: number; b: number }> = [];
+  for (let i = 0; i < k; i++) {
+    const randomPixel = pixels[Math.floor(Math.random() * pixels.length)];
+    centroids.push({ r: randomPixel.r, g: randomPixel.g, b: randomPixel.b });
+  }
+
+  // Iterate
+  for (let iter = 0; iter < 10; iter++) {
+    const clusters: Array<Array<{ r: number; g: number; b: number }>> = 
+      new Array(k).fill(null).map(() => []);
+
+    // Assign pixels to nearest centroid
+    for (const pixel of pixels) {
+      let minDist = Infinity;
+      let nearestCluster = 0;
+      
+      for (let i = 0; i < centroids.length; i++) {
+        const dist = Math.sqrt(
+          Math.pow(pixel.r - centroids[i].r, 2) +
+          Math.pow(pixel.g - centroids[i].g, 2) +
+          Math.pow(pixel.b - centroids[i].b, 2)
+        );
+        if (dist < minDist) {
+          minDist = dist;
+          nearestCluster = i;
+        }
+      }
+      clusters[nearestCluster].push(pixel);
+    }
+
+    // Update centroids
+    for (let i = 0; i < k; i++) {
+      if (clusters[i].length > 0) {
+        const avgR = clusters[i].reduce((sum, p) => sum + p.r, 0) / clusters[i].length;
+        const avgG = clusters[i].reduce((sum, p) => sum + p.g, 0) / clusters[i].length;
+        const avgB = clusters[i].reduce((sum, p) => sum + p.b, 0) / clusters[i].length;
+        centroids[i] = { r: Math.round(avgR), g: Math.round(avgG), b: Math.round(avgB) };
+      }
+    }
+  }
+
+  // Count pixels in each cluster
+  const counts: number[] = new Array(k).fill(0);
+  for (const pixel of pixels) {
+    let minDist = Infinity;
+    let nearestCluster = 0;
+    
+    for (let i = 0; i < centroids.length; i++) {
+      const dist = Math.sqrt(
+        Math.pow(pixel.r - centroids[i].r, 2) +
+        Math.pow(pixel.g - centroids[i].g, 2) +
+        Math.pow(pixel.b - centroids[i].b, 2)
+      );
+      if (dist < minDist) {
+        minDist = dist;
+        nearestCluster = i;
+      }
+    }
+    counts[nearestCluster]++;
+  }
+
+  return centroids.map((centroid, i) => ({
+    ...centroid,
+    count: counts[i]
+  })).filter(c => c.count > 0);
+}
+
+/**
+ * Median cut algorithm for color extraction
+ */
+function medianCut(
+  pixels: Array<{ r: number; g: number; b: number }>,
+  count: number
+): Array<{ r: number; g: number; b: number; count: number }> {
+  // Simplified median cut - divide color space
+  const buckets: Array<Array<{ r: number; g: number; b: number }>> = [pixels];
+  
+  while (buckets.length < count && buckets.length < 8) {
+    const largestBucket = buckets.reduce((max, bucket, i) => 
+      bucket.length > buckets[max].length ? i : max, 0
+    );
+    
+    const bucket = buckets[largestBucket];
+    if (bucket.length <= 1) break;
+    
+    // Find color channel with largest range
+    const ranges = {
+      r: Math.max(...bucket.map(p => p.r)) - Math.min(...bucket.map(p => p.r)),
+      g: Math.max(...bucket.map(p => p.g)) - Math.min(...bucket.map(p => p.g)),
+      b: Math.max(...bucket.map(p => p.b)) - Math.min(...bucket.map(p => p.b))
+    };
+    
+    const channel = ranges.r > ranges.g && ranges.r > ranges.b ? 'r' :
+                   ranges.g > ranges.b ? 'g' : 'b';
+    
+    // Sort by channel and split at median
+    bucket.sort((a, b) => a[channel] - b[channel]);
+    const median = Math.floor(bucket.length / 2);
+    
+    buckets.splice(largestBucket, 1, bucket.slice(0, median), bucket.slice(median));
+  }
+
+  // Calculate average color for each bucket
+  return buckets.map(bucket => {
+    const avgR = Math.round(bucket.reduce((sum, p) => sum + p.r, 0) / bucket.length);
+    const avgG = Math.round(bucket.reduce((sum, p) => sum + p.g, 0) / bucket.length);
+    const avgB = Math.round(bucket.reduce((sum, p) => sum + p.b, 0) / bucket.length);
+    return {
+      r: avgR,
+      g: avgG,
+      b: avgB,
+      count: bucket.length
+    };
+  });
+}
+
+/**
+ * Octree quantization (simplified)
+ */
+function octreeQuantization(
+  pixels: Array<{ r: number; g: number; b: number }>,
+  count: number
+): Array<{ r: number; g: number; b: number; count: number }> {
+  // Simplified octree - use kmeans as fallback
+  return kmeansClustering(pixels, count);
+}
+
+/**
+ * Converts RGB to HSL
+ */
+function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+