color-util-helpers 1.0.4 → 1.0.7

package/src/lib/color-pallette.service.spec.ts

@@ -0,0 +1,85 @@
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ColorPalletteService } from './color-pallette.service';
+import { BehaviorSubject } from 'rxjs';
+import { ColorConversionService } from './color-conversion.service';
+
+describe('ColorPalletteService', () => {
+  let service: ColorPalletteService;
+  let palletteBehaviorMock: jasmine.SpyObj<BehaviorSubject<{ color: string, complementaryColor: string }[]>>;
+  let colorConversionService: jasmine.SpyObj<ColorConversionService>;
+
+  beforeEach(() => {
+    const colorConversionServiceSpy = jasmine.createSpyObj('ColorConversionService', ['rgbToHex', 'hexToRgb']);
+    palletteBehaviorMock = jasmine.createSpyObj('BehaviorSubject', ['next', 'subscribe']);
+    TestBed.configureTestingModule({
+      providers: [ColorPalletteService,
+        {
+          provide: BehaviorSubject,
+          useValue: palletteBehaviorMock
+        },
+        {
+          provide: ColorConversionService,
+          useValue: colorConversionServiceSpy
+        }
+      ]
+    });
+    service = TestBed.inject(ColorPalletteService);
+    colorConversionService = TestBed.inject(ColorConversionService) as jasmine.SpyObj<ColorConversionService>;
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should handle null context gracefully', fakeAsync(() => {
+    const image = new Image();
+    const colorCount = 5;
+    service.getColorsFromImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/gbKkAAAAABJRU5ErkJggg==');
+
+    image.onload = () => {
+      // Mock the canvas context to return null
+      const canvas = document.createElement('canvas');
+      spyOn(canvas, 'getContext').and.returnValue(null);
+      spyOn(document, 'createElement').and.returnValue(canvas);
+      const palette = service.generateColorPalette(image, colorCount);
+      expect(palette).toBeUndefined();
+    };
+    tick(1000);
+
+    // Trigger the image load
+    image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAwAB/gbKkAAAAABJRU5ErkJggg==';
+  }));
+
+  it('should quantize colors using k-means', () => {
+    const colors = [[255, 0, 0], [0, 255, 0], [0, 0, 255]];
+    const colorCount = 5;
+    const quantizedColors = (service as any).kMeansColorQuantization(colors, colorCount);
+    expect(quantizedColors.length).toEqual(5);
+  });
+
+  it('should sort colors by luminance', () => {
+    const colors = [[255, 0, 0], [0, 255, 0], [0, 0, 255]];
+    colors.sort((color1, color2) => {
+      const luminance1 = (service as any).getLuminance(color1);
+      const luminance2 = (service as any).getLuminance(color2);
+      return luminance2 - luminance1;
+    });
+    expect(colors[0]).toEqual([0, 255, 0]);
+  });
+
+  it('should call the color conversion service', () => {
+    const color = [255, 0, 0];
+    const hexColor = '#FF0000';
+    colorConversionService.rgbToHex.and.returnValue(hexColor);
+    const result = colorConversionService.rgbToHex(color);
+    expect(result).toEqual(hexColor);
+  });
+
+  it('should call behavior subject next', () => {
+    const data = [{ color: '#FF0000', complementaryColor: '#00FF00' }];
+
+    (service as any).palette = palletteBehaviorMock;
+    (service as any).palette.next(data);
+    expect(palletteBehaviorMock.next).toHaveBeenCalledWith(data);
+  });
+});

package/src/lib/color-pallette.service.ts

@@ -0,0 +1,191 @@
+import { Injectable } from '@angular/core'
+import { BehaviorSubject } from 'rxjs'
+import { ColorConversionService } from './color-conversion.service'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ColorPalletteService {
+
+  // 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;
+  // }
+
+  private palette = new BehaviorSubject<{ color: string, complementaryColor: string }[]>([])
+  palette$ = this.palette.asObservable()
+
+  constructor(
+    private 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 = 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: HTMLImageElement, 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;
+  }
+
+  private getLuminance(color: number[]) {
+    const [r, g, b] = color
+    return 0.299 * r + 0.587 * g + 0.114 * b
+  }
+
+  private calculateColorDistance(color1: number[], color2: number[]) {
+    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)
+  }
+
+  private calculateMeanColor(colors: number[][]) {
+    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]
+  }
+
+  private kMeansColorQuantization(colors: number[][], k: number) {
+    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
+  }
+
+}

package/src/lib/color-scheme.service.ts

@@ -0,0 +1,123 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export 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: number, s: number, l: number) {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+
+    let r, g, b;
+
+    if (s === 0) {
+      r = g = b = l; // Achromatic color (gray)
+    } else {
+      const hueToRgb = (p: number, q: number, t: number) => {
+        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: number, g: number, b: number) {
+    const componentToHex = (c: number) => {
+      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: string, percentage: number) {
+    // 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: number) {
+    return Math.max(0, Math.min(value, 255));
+  }
+
+}

package/src/lib/color-utilities-demo/color-utilities-demo.component.css

@@ -0,0 +1,12 @@
+.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;
+}

package/src/lib/color-utilities-demo/color-utilities-demo.component.html

@@ -0,0 +1,109 @@
+<div style="margin: 2rem;">
+
+  <h1>Color Conversion Service</h1>
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <div style="display: flex">
+      <div style="padding-top: .5rem; margin-right: .5rem;">rgbToHex: {{ HEX }}</div>
+      <div style="width: 32px; height: 32px;" [style.backgroundColor]="HEX"></div>
+    </div>
+
+    <div style="display: flex">
+      <div style="padding-top: .5rem; margin-right: .5rem;"> hexToRgb: {{ RGB }} </div>
+      <div style="width: 32px; height: 32px;" [style.backgroundColor]="RGB"></div>
+    </div>
+  </div>
+
+  <div style="margin-top: 1rem; margin-bottom: 1rem;">
+    <mat-divider></mat-divider>
+  </div>
+
+  <h1>Color Light/Darken Service</h1>
+
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+
+    <div style="display: flex; gap: 1rem">
+      Original Color: #AA11BB<br>
+      <div style="width: 32px; height: 32px; background-color: #AA11BB;"></div>
+      Lighten (25%): {{ lighten }}<br>
+      <div style="width: 32px; height: 32px;" [style.backgroundColor]="lighten"></div>
+      Darken (25%): {{ darken }}<br>
+      <div style="width: 32px; height: 32px;" [style.backgroundColor]="darken"></div>
+    </div>
+
+  </div>
+
+  <div style="margin-top: 1rem; margin-bottom: 1rem;">
+    <mat-divider></mat-divider>
+  </div>
+
+  <h1>Text Color Utility Services</h1>
+
+  <div style="display: flex; gap: 1rem; flex-direction: column;">
+    <div style="display: flex; gap: 1rem">
+      <div style="width: 32px; height: 32px;" [style.backgroundColor]="darken"></div>
+      <div style="width: 32px; height: 32px;" [style.backgroundColor]="lighten"></div>
+      is Darker : {{ colorIsDarker }}
+      <div style="width: 32px; height: 32px;" [style.backgroundColor]="colorIsDarker"></div>
+    </div>
+  
+    <div style="display: flex; gap: 1rem; flex-direction: column;">
+      
+      <div>
+        Use: {{ lightBk }} for '{{ HEX }}' background-color<br>
+        <div style="padding: 1rem;" [style.backgroundColor]="HEX" [style.color]="darkBk">
+        Sample Text Color
+        </div>
+      </div>
+
+      <div>
+        Use: {{ lightBk }} for 'whitesmoke' background-color<br>
+        <div style="padding: 1rem; background-color: whitesmoke;" [style.color]="lightBk">
+          Sample Text Color
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div style="margin-top: 1rem; margin-bottom: 1rem;">
+    <mat-divider></mat-divider>
+  </div>
+  
+ <h1>Color Schema Services</h1>
+
+  <div style="display: flex; gap: 1rem">
+    Pick Color: {{ colorPick }}<br>
+    <div style="width: 32px; height: 32px;" [style.backgroundColor]="colorPick"></div>
+    Lighter Version: {{ colorPickLighter }}<br>
+    <div style="width: 32px; height: 32px;" [style.backgroundColor]="colorPickLighter"></div>
+    DarkerVersion: {{ colorPickDarker }}<br>
+    <div style="width: 32px; height: 32px;" [style.backgroundColor]="colorPickDarker"></div>
+  </div>
+
+  <div style="margin-top: 1rem; margin-bottom: 1rem;">
+    <mat-divider></mat-divider>
+  </div>
+
+  <h1>Color Pallette Service</h1>
+  Creates Pallette from Image
+  <div style="display: flex; gap: 2rem;">
+    <div>
+      <img [src]="img" height="180">
+    </div>
+
+    <div style="display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;">
+      <div>Color Pick</div>
+      <ng-container *ngFor="let color of (colors$ | async)">
+          <div style="width: 32px; height: 32px;" [style.backgroundColor]="color.color"></div>
+      </ng-container>
+    </div>
+  
+    <div style="display: flex; gap: .5rem; width: 120px; border: 1px solid black; flex-wrap: wrap; padding: .5rem;">
+      <div>Complementary</div>
+      <ng-container *ngFor="let color of (colors$ | async)">
+          <div style="width: 32px; height: 32px;" [style.backgroundColor]="color.complementaryColor"></div>
+      </ng-container>
+    </div>
+  </div>
+
+</div>
+

package/src/lib/color-utilities-demo/color-utilities-demo.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit, inject } from '@angular/core';
+
+import { ColorConversionService } from '../color-conversion.service';
+import { ColorPalletteService } from '../color-pallette.service';
+import { TextColorService } from '../text-color.service';
+import { ColorLightenDarkenService } from '../color-lighten-darken.service';
+import { ColorSchemeService } from '../color-scheme.service';
+
+@Component({
+  selector: 'app-color-utilities-demo',
+  templateUrl: './color-utilities-demo.component.html',
+  styleUrls: ['./color-utilities-demo.component.css'],
+})
+export class ColorUtilitiesDemoComponent implements OnInit {
+
+  colorConversionService = inject(ColorConversionService)
+  colorLightenDarkenService = inject(ColorLightenDarkenService)
+  colorPalletteService = inject(ColorPalletteService)
+  textColorService = inject(TextColorService)
+  colorSchemeService = inject(ColorSchemeService)
+
+
+  HEX = this.colorConversionService.rgbToHex([12, 56, 128])
+  RGB = `rgb(${this.colorConversionService.hexToRgb('#AA11BB')})`
+
+
+  lighten = this.colorLightenDarkenService.lighten('#AA11BB', .25)
+  darken = this.colorLightenDarkenService.darken('#AA11BB', .25)
+
+  colorIsDarker = this.textColorService.isColorDarker(this.lighten, this.darken)
+
+  darkBk = this.textColorService.textColorForBgColor(this.HEX, this.lighten, this.darken)
+  lightBk = this.textColorService.textColorForBgColor('whitesmoke', this.lighten, this.darken)
+
+  palette: any
+  colors$ = this.colorPalletteService.palette$
+
+  colorPick = this.colorSchemeService.generateRandomColor()
+  colorPickDarker = this.colorSchemeService.adjustHexColor(this.colorPick, -25)
+  colorPickLighter = this.colorSchemeService.adjustHexColor(this.colorPick, 25)
+
+  img: string|any
+
+  constructor() { }
+
+  ngOnInit() {
+
+    // define image path
+    this.img = 'assets/picture.webp'
+    this.colorPalletteService.getColorsFromImage(this.img, 8)
+
+
+  }
+
+
+}
+

package/src/lib/color-utils.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { ColorGrabberDirective } from './color-grab.directive';
+
+import { ColorUtilitiesDemoComponent } from './color-utilities-demo/color-utilities-demo.component';
+import { ColorExtractorDirective } from './color-extractor.directive';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDividerModule
+  ],
+  declarations: [
+    ColorUtilitiesDemoComponent,
+    ColorGrabberDirective,
+    ColorExtractorDirective
+  ],
+  exports: [
+    ColorUtilitiesDemoComponent
+  ]
+})
+export class ColorUtilitiesModule { }

package/src/lib/text-color.service.spec.ts

@@ -0,0 +1,75 @@
+import { TestBed } from '@angular/core/testing';
+import { TextColorService } from './text-color.service';
+import { ColorConversionService } from './color-conversion.service';
+
+describe('TextColorService', () => {
+  let service: TextColorService;
+  let colorConversionServiceSpy: jasmine.SpyObj<ColorConversionService>;
+
+  beforeEach(() => {
+    const spy = jasmine.createSpyObj('ColorConversionService', ['hexToRgb']);
+
+    TestBed.configureTestingModule({
+      providers: [
+        TextColorService,
+        { provide: ColorConversionService, useValue: spy }
+      ]
+    });
+    service = TestBed.inject(TextColorService);
+    colorConversionServiceSpy = TestBed.inject(ColorConversionService) as jasmine.SpyObj<ColorConversionService>;
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should return dark text for light background', () => {
+    colorConversionServiceSpy.hexToRgb.and.returnValue([255, 255, 255]); // White
+    expect(service.textColorForBgColor('#FFFFFF', '#FFFFFF', '#000000')).toBe('#000000');
+  });
+
+  it('should return light text for dark background', () => {
+    colorConversionServiceSpy.hexToRgb.and.returnValue([0, 0, 0]); // Black
+    expect(service.textColorForBgColor('#000000', '#FFFFFF', '#000000')).toBe('#FFFFFF');
+  });
+
+  it('should determine darker color correctly', () => {
+    colorConversionServiceSpy.hexToRgb.withArgs('#0000FF').and.returnValue([0, 0, 255]); // Blue
+    colorConversionServiceSpy.hexToRgb.withArgs('#FF0000').and.returnValue([255, 0, 0]); // Red
+    expect(service.darkerColor('#0000FF', '#FF0000')).toBe('#0000FF');
+  });
+
+  it('should determine lighter color correctly', () => {
+    colorConversionServiceSpy.hexToRgb.withArgs('#0000FF').and.returnValue([0, 0, 255]); // Blue
+    colorConversionServiceSpy.hexToRgb.withArgs('#FF0000').and.returnValue([255, 0, 0]); // Red
+    expect(service.lighterColor('#FF0000', '#0000FF')).toBe('#FF0000');
+  });
+
+  it('should calculate luminance accurately', () => {
+    expect(service.calculateLuminance(255, 255, 255)).toBeCloseTo(255, 2); // White
+    expect(service.calculateLuminance(0, 0, 0)).toBeCloseTo(0, 2); // Black
+  });
+
+  it('should fix color to RGB array for hex input', () => {
+    colorConversionServiceSpy.hexToRgb.withArgs('#FF0000').and.returnValue([255, 0, 0]);
+    expect(service.fixColor('#FF0000')).toEqual([255, 0, 0]);
+  });
+
+  it('should handle 3-digit hex color', () => {
+    colorConversionServiceSpy.hexToRgb.withArgs('#F00').and.returnValue([255, 0, 0]);
+    expect(service.fixColor('#F00')).toEqual([255, 0, 0]);
+  });
+
+  it('should return empty array for invalid hex color', () => {
+    colorConversionServiceSpy.hexToRgb.and.returnValue([]);
+    expect(service.fixColor('#GGG')).toEqual([]);
+  });
+
+  it('should convert RGB string to array', () => {
+    expect(service.fixColor('rgb(100, 200, 50)')).toEqual([100, 200, 50]);
+  });
+
+  it('should handle malformed color input', () => {
+    expect(service.fixColor('not a color')).toEqual([]);
+  });
+});