https://github.com/rtcoder/dominant-color
Get dominant color and palette of colors from an image
https://github.com/rtcoder/dominant-color
canvas color dominant-colors images javascript typescript
Last synced: 4 months ago
JSON representation
Get dominant color and palette of colors from an image
- Host: GitHub
- URL: https://github.com/rtcoder/dominant-color
- Owner: rtcoder
- Created: 2021-09-23T08:30:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-01T21:20:16.000Z (about 1 year ago)
- Last Synced: 2025-06-22T11:35:37.654Z (8 months ago)
- Topics: canvas, color, dominant-colors, images, javascript, typescript
- Language: HTML
- Homepage: https://rtcoder.github.io/dominant-color/
- Size: 23.4 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dominant Color
This is a JavaScript library that allows you to extract the dominant color from images. It provides an easy-to-use interface to get started quickly.
## Installation
To install the library, use the following command:
```bash
npm i @rtcoder/dominant-color
```
## Usage
Import the `getDominantColor` function from `@rtcoder/dominant-color` in your JavaScript file:
```javascript
import { getDominantColor } from "@rtcoder/dominant-color";
```
Select an image element from your HTML:
```javascript
const img = document.querySelector('img');
```
Call the `getDominantColor` function with the image element and configuration options:
```javascript
getDominantColor(img, {
downScaleFactor: 1,
skipPixels: 0,
colorsPaletteLength: 5,
paletteWithCountOfOccurrences: false,
colorFormat: 'rgb',
callback: (color, palette) => {
// Your code here
}
});
```
## Configuration Options
The `getDominantColor` function accepts the following configuration options:
| Name | Type | Default Value | Description |
| --------------------------- | -------- | ------------- | ------------------------------------------------------------ |
| `downScaleFactor` | number | 1 | Factor of scale down for the image. Recommended for large images. |
| `skipPixels` | number | 0 | Skips every `n` pixels while determining the dominant color. Recommended for large images. |
| `colorsPaletteLength` | number | 5 | Length of the returned color palette. |
| `paletteWithCountOfOccurrences` | boolean | false | Determines whether to return colors with the number of occurrences. |
| `colorFormat` | string | `'rgb'` | Defines the format of the returned colors. Available values are `'rgb'`, `'hsl'`, and `'hex'`. |
| `callback` | function | [empty function] | Callback function that receives the dominant color and the colors palette. |
## Interfaces
The library provides the following interfaces for type checking:
```typescript
type ColorFormat = 'rgb' | 'hsl' | 'hex';
interface PrimaryColor {
color: string;
count: number;
}
interface DominantColorOptions {
downScaleFactor: number;
skipPixels: number;
colorsPaletteLength: number;
paletteWithCountOfOccurrences: boolean;
colorFormat: ColorFormat;
callback: DominantColorCallback;
}
type DominantColorCallback = (dominant: string, colorsPalette: string[] | PrimaryColor[]) => void;
function getDominantColor(element: HTMLImageElement, options: Partial): void;
```
Feel free to explore and utilize these interfaces for better code development.
Remember to replace `your code here` in the usage example with your own code to handle the dominant color and colors palette.