Basic Usage
1. Initialize the API
const colorPicker = new ColorPickerAPI();
2. Load Images
// From URL
const image = await colorPicker.loadImage('https://example.com/image.jpg');
// From File Input
const fileInput = document.querySelector('input[type="file"]');
const image = await colorPicker.loadImage(fileInput.files[0]);
// From Clipboard
const clipboardData = await navigator.clipboard.read();
const image = await colorPicker.loadImage(clipboardData[0]);
3. Extract Colors
const colors = await colorPicker.extractColors(image, {
sampleSize: 10, // Pixel sampling interval
threshold: 60, // Color similarity threshold
maxClusters: 10, // Maximum number of colors to extract
minColorDistance: 30 // Minimum distance between distinct colors
});
4. Generate Color Variations
const baseColor = { r: 200, g: 50, b: 50 };
// Available variation types:
// 'opposite', 'adjacent', 'triadic', 'analogous', 'monochromatic'
const variations = colorPicker.getColorVariations(baseColor, 'analogous');
Advanced Features
Color Conversion
// RGB to HSL conversion
const { h, s, l } = colorPicker.rgbToHsl(200, 50, 50);
// HSL to RGB conversion
const { r, g, b } = colorPicker.hslToRgb(h, s, l);
Error Handling
try {
const image = await colorPicker.loadImage('invalid-url');
} catch (error) {
console.error('Failed to load image:', error);
}