Get Some Pixel Colors

A lightweight JavaScript utility for extracting colors from images using various sampling methods. Perfect for getting color schemes, dominant colors, or quick color analysis from images.

Features

• 🚀 Multiple sampling methods for different use cases
• 📦 Zero dependencies
• 🎨 Returns RGB color values
• 💻 Works in browser environments
• ⚡ Fast and efficient processing
• 🔄 Async/Promise-based API

Installation

npm install get-some-pixel-colors

Usage

import { analyzeImageColor } from "get-some-pixel-colors";

// Using with an image element
const imgElement = document.querySelector("img");
const color = await analyzeImageColor(imgElement, "dominant");
console.log(color); // { r: 255, g: 128, b: 0 }

// Using with an image URL
import { getImageColor } from "get-some-pixel-colors";
const color = await getImageColor("path/to/image.jpg", "firstRow");

Example with Color Display

const imgElement = document.querySelector("img");
const color = await analyzeImageColor(imgElement, "dominant");
document.body.style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`;

Available Methods

• firstRow: Samples the first row of pixels (fastest)
  • Best for headers or banners where top color is most important
• topLeft: Samples the top-left corner (10x10 pixels)
  • Good for thumbnails or icons
• fourCorners: Samples all four corners (5x5 pixels each)
  • Better overall color representation without full analysis
• dominant: Full image analysis for dominant color (most accurate)
  • Best when accuracy is more important than speed

API

analyzeImageColor(imageElement, method)

Analyzes an image element using the specified method.

Parameters

• imageElement: HTML Image Element
• method: String (optional, defaults to 'firstRow')
  • 'firstRow'
  • 'topLeft'
  • 'fourCorners'
  • 'dominant'

Returns

Promise resolving to an object with RGB values:

{
  r: number, // Red (0-255)
  g: number, // Green (0-255)
  b: number  // Blue (0-255)
}

getImageColor(imageUrl, method)

Same as analyzeImageColor but accepts an image URL instead of an element.

Browser Support

Works in all modern browsers that support:

• Canvas API
• Promises
• Async/Await

Error Handling

try {
  const color = await getImageColor("path/to/image.jpg", "dominant");
  console.log(color);
} catch (error) {
  console.error("Error analyzing image:", error);
}

Performance Considerations

• firstRow and topLeft methods are fastest
• dominant method may be slower on large images
• Consider using fourCorners for a good balance of speed and accuracy

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT