@soarlin/angular-color-thief NPM

@soarlin/angular-color-thief

An Angular service for extracting dominant colors and color palettes from images. Rewritten based on the concept of Color Thief.

Features

Extract dominant color from images
Generate color palette from images
Support loading images from URLs
Full TypeScript support
Angular v19+ support

Installation

# Using npm
npm install @soarlin/angular-color-thief

# Using yarn
yarn add @soarlin/angular-color-thief

Usage

1. Import Module

import { ColorThiefModule } from '@soarlin/angular-color-thief';

@NgModule({
  imports: [ColorThiefModule]
})
export class AppModule { }

// Or in a standalone component
@Component({
  // ...
  imports: [ColorThiefModule]
})

2. Use in Component

import { Component } from '@angular/core';
import { ColorThiefService } from '@soarlin/angular-color-thief';

@Component({
  selector: 'app-root',
  template: `
    <img #sourceImage [src]="imageUrl" (load)="onImageLoad(sourceImage)">
    <div *ngIf="dominantColor" [style.background-color]="'rgb(' + dominantColor.join(',') + ')'">
      Dominant Color
    </div>
    <div *ngFor="let color of palette"
         [style.background-color]="'rgb(' + color.join(',') + ')'">
      Palette Color
    </div>
  `
})
export class AppComponent {
  imageUrl = 'your-image-url.jpg';
  dominantColor: [number, number, number] | null = null;
  palette: [number, number, number][] | null = null;

  constructor(private colorThief: ColorThiefService) {}

  onImageLoad(imageElement: HTMLImageElement) {
    // Get dominant color
    this.dominantColor = this.colorThief.getColor(imageElement);

    // Get color palette (default 10 colors)
    this.palette = this.colorThief.getPalette(imageElement);
  }

  // Or get palette directly from URL
  async loadPaletteFromUrl() {
    try {
      this.palette = await this.colorThief.getPaletteFromUrl(this.imageUrl);
    } catch (error) {
      console.error('Failed to load image:', error);
    }
  }
}

API

ColorThiefService

getColor(sourceImage: HTMLImageElement, quality?: number): number, number, number

Extract the dominant color from an image. Returns an RGB color array.

sourceImage: The image element
quality: Sampling quality (1 is highest quality, 10 is default)

getPalette(sourceImage: HTMLImageElement, colorCount?: number, quality?: number): number, number, number

Extract a color palette from an image. Returns an array of RGB color arrays.

sourceImage: The image element
colorCount: Number of colors to extract (default is 10)
quality: Sampling quality (1 is highest quality, 10 is default)

getPaletteFromUrl(imageUrl: string, count?: number, quality?: number): Promise<number, number, number>

Extract a color palette from an image URL. Returns a Promise that resolves to an array of RGB color arrays.

imageUrl: URL of the image
count: Number of colors to extract (default is 5)
quality: Sampling quality (1 is highest quality, 10 is default)

Important Notes

Images must be from the same domain or have appropriate CORS settings
It's recommended to call color extraction methods after the image is fully loaded
Lower quality values result in longer processing time but more accurate results