{"id":28354584,"url":"https://github.com/rtcoder/dominant-color","last_synced_at":"2025-10-18T23:08:49.457Z","repository":{"id":88948256,"uuid":"409510609","full_name":"rtcoder/dominant-color","owner":"rtcoder","description":"Get dominant color and palette of colors from an image","archived":false,"fork":false,"pushed_at":"2025-01-01T21:20:16.000Z","size":24510,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-22T11:35:37.654Z","etag":null,"topics":["canvas","color","dominant-colors","images","javascript","typescript"],"latest_commit_sha":null,"homepage":"https://rtcoder.github.io/dominant-color/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rtcoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-23T08:30:37.000Z","updated_at":"2025-03-15T15:39:01.000Z","dependencies_parsed_at":"2025-05-28T03:07:35.687Z","dependency_job_id":"4f778ec5-15a2-437e-aa2a-395156442ebf","html_url":"https://github.com/rtcoder/dominant-color","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/rtcoder/dominant-color","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtcoder%2Fdominant-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtcoder%2Fdominant-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtcoder%2Fdominant-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtcoder%2Fdominant-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rtcoder","download_url":"https://codeload.github.com/rtcoder/dominant-color/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rtcoder%2Fdominant-color/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266160816,"owners_count":23885885,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","color","dominant-colors","images","javascript","typescript"],"created_at":"2025-05-28T03:07:28.971Z","updated_at":"2025-10-18T23:08:49.368Z","avatar_url":"https://github.com/rtcoder.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dominant Color\n\nThis 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.\n\n## Installation\n\nTo install the library, use the following command:\n\n```bash\nnpm i @rtcoder/dominant-color\n```\n\n## Usage\n\nImport the `getDominantColor` function from `@rtcoder/dominant-color` in your JavaScript file:\n\n```javascript\nimport { getDominantColor } from \"@rtcoder/dominant-color\";\n```\n\nSelect an image element from your HTML:\n\n```javascript\nconst img = document.querySelector('img');\n```\n\nCall the `getDominantColor` function with the image element and configuration options:\n\n```javascript\ngetDominantColor(img, {\n    downScaleFactor: 1,\n    skipPixels: 0,\n    colorsPaletteLength: 5,\n    paletteWithCountOfOccurrences: false,\n    colorFormat: 'rgb',\n    callback: (color, palette) =\u003e {\n        // Your code here\n    }\n});\n```\n\n## Configuration Options\n\nThe `getDominantColor` function accepts the following configuration options:\n\n| Name                        | Type     | Default Value | Description                                                  |\n| --------------------------- | -------- | ------------- | ------------------------------------------------------------ |\n| `downScaleFactor`           | number   | 1             | Factor of scale down for the image. Recommended for large images. |\n| `skipPixels`                | number   | 0             | Skips every `n` pixels while determining the dominant color. Recommended for large images. |\n| `colorsPaletteLength`       | number   | 5             | Length of the returned color palette.                        |\n| `paletteWithCountOfOccurrences` | boolean  | false         | Determines whether to return colors with the number of occurrences. |\n| `colorFormat`               | string   | `'rgb'`       | Defines the format of the returned colors. Available values are `'rgb'`, `'hsl'`, and `'hex'`. |\n| `callback`                  | function | [empty function] | Callback function that receives the dominant color and the colors palette. |\n\n## Interfaces\n\nThe library provides the following interfaces for type checking:\n\n```typescript\ntype ColorFormat = 'rgb' | 'hsl' | 'hex';\n\ninterface PrimaryColor {\n  color: string;\n  count: number;\n}\n\ninterface DominantColorOptions {\n  downScaleFactor: number;\n  skipPixels: number;\n  colorsPaletteLength: number;\n  paletteWithCountOfOccurrences: boolean;\n  colorFormat: ColorFormat;\n  callback: DominantColorCallback;\n}\n\ntype DominantColorCallback = (dominant: string, colorsPalette: string[] | PrimaryColor[]) =\u003e void;\n\nfunction getDominantColor(element: HTMLImageElement, options: Partial\u003cDominantColorOptions\u003e): void;\n```\n\nFeel free to explore and utilize these interfaces for better code development.\n\nRemember to replace `your code here` in the usage example with your own code to handle the dominant color and colors palette.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtcoder%2Fdominant-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frtcoder%2Fdominant-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frtcoder%2Fdominant-color/lists"}