├── .gitignore
├── tsconfig.json
├── package.json
├── README.md
└── src
    └── index.ts


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | 
3 | node_modules
4 | 
5 | .env


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES6",
 4 |     "module": "CommonJS",
 5 |     "declaration": true,
 6 |     "outDir": "dist",
 7 |     "strict": true
 8 |   },
 9 |   "include": ["src"]
10 | }
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "major-color-picker",
 3 |   "version": "1.0.2",
 4 |   "description": "major-color-picker is a lightweight JavaScript utility that detects the most dominant color from an image using the HTML Canvas API. Ideal for generating color palettes, styling backgrounds, or enhancing visual UI effects based on image content.",
 5 |   "main": "dist/index.js",
 6 |   "types": "dist/index.d.ts",
 7 |   "files": [
 8 |     "dist"
 9 |   ],
10 |   "scripts": {
11 |     "build": "tsc"
12 |   },
13 |   "keywords": [
14 |     "color",
15 |     "dominant-color",
16 |     "image",
17 |     "picker",
18 |     "palette",
19 |     "color-picker",
20 |     "color-palette",
21 |     "color-extractor",
22 |     "color-extraction",
23 |     "color-detection",
24 |     "color-detection-library",
25 |     "color-detection-tool",
26 |     "color-detection-algorithm",
27 |     "color-detection-api",
28 |     "color-detection-service",
29 |     "color-detection-software",
30 |     "color-detection-framework",
31 |     "color-detection-system",
32 |     "color-detection-toolkit",
33 |     "color-detection-library",
34 |     "color-detection-utility",
35 |     "major-color-picker",
36 |     "major-color-extractor",
37 |     "major-color-detection",
38 |     "major-color-extraction",
39 |     "mostcolor",
40 |     "colors-on-image",
41 |     "colors",
42 |     "color-tool"
43 |   ],
44 |   "author": "Saba Babluani",
45 |   "license": "MIT"
46 | }
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # major-color-picker
 2 | 
 3 | `major-color-picker` is a simple and lightweight JavaScript/TypeScript utility that extracts the most dominant color from an image. It uses the HTML Canvas API to analyze image pixel data and returns the most frequent color in HEX format.
 4 | 
 5 | ## Installation
 6 | 
 7 | You can install the package using npm:
 8 | 
 9 | ```bash
10 | npm install major-color-picker
11 | ```
12 | 
13 | # Usage
14 | 
15 | ```js
16 | import { getDominantColorFromImage } from 'major-color-picker';
17 | 
18 | <input
19 |   type="file"
20 |   accept="image/*"
21 |   onChange={async (e) => {
22 |     const file = e.target.files?.[0];
23 |     if (file) {
24 |       const color = await getDominantColorFromImage(file);
25 |       console.log('Dominant color:', color);
26 |     }
27 |   }}
28 | />
29 | ```
30 | 
31 | # API
32 | 
33 |     getDominantColorFromImage(imgFile: File): Promise<string>
34 | 
35 | Parameters:
36 | 
37 |     imgFile (File): An image file object (from an input field or file picker).
38 | 
39 | Returns:
40 | 
41 |     Promise<string>: A Promise that resolves to the most dominant color in HEX format (e.g., #ff5733).
42 | 
43 | # How It Works
44 | 
45 |     The image is loaded into memory using a FileReader.
46 | 
47 |     It is rendered onto a temporary canvas element.
48 | 
49 |     The pixel data is extracted and analyzed to determine the most frequently occurring RGB value.
50 | 
51 |     The dominant RGB color is converted to a HEX string.
52 | 
53 | If you have any ideas or adjustment feel free to contribute
54 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | export async function getDominantColorFromImage(imgFile: File): Promise<string> {
 2 |   return new Promise((resolve, reject) => {
 3 |     const img = new Image();
 4 |     const reader = new FileReader();
 5 | 
 6 |     reader.onload = () => {
 7 |       img.src = reader.result as string;
 8 |     };
 9 | 
10 |     img.onload = () => {
11 |       const canvas = document.createElement('canvas');
12 |       const ctx = canvas.getContext('2d');
13 |       if (!ctx) return reject('Canvas context not available');
14 | 
15 |       canvas.width = img.width;
16 |       canvas.height = img.height;
17 |       ctx.drawImage(img, 0, 0, img.width, img.height);
18 | 
19 |       const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
20 |       const data = imageData.data;
21 |       const step = 10;
22 | 
23 |       let rTotal = 0, gTotal = 0, bTotal = 0;
24 |       let pixelCount = 0;
25 | 
26 |       for (let i = 0; i < data.length; i += 4 * step) {
27 |         rTotal += data[i];
28 |         gTotal += data[i + 1];
29 |         bTotal += data[i + 2];
30 |         pixelCount++;
31 |       }
32 | 
33 |       if (pixelCount === 0) return reject('No visible pixels');
34 | 
35 |       const r = Math.round(rTotal / pixelCount);
36 |       const g = Math.round(gTotal / pixelCount);
37 |       const b = Math.round(bTotal / pixelCount);
38 | 
39 |       const hex = `#${r.toString(16).padStart(2, '0')}${g
40 |         .toString(16)
41 |         .padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
42 | 
43 |       resolve(hex);
44 |     };
45 | 
46 |     img.onerror = reject;
47 |     reader.onerror = reject;
48 | 
49 |     reader.readAsDataURL(imgFile);
50 |   });
51 | }
52 | 


--------------------------------------------------------------------------------