{"id":12956967,"url":"https://github.com/Namide/extract-colors","last_synced_at":"2025-03-04T02:32:26.141Z","repository":{"id":36938598,"uuid":"231800554","full_name":"Namide/extract-colors","owner":"Namide","description":"Pulls the most common colors out of an image","archived":false,"fork":false,"pushed_at":"2024-12-23T13:26:57.000Z","size":3743,"stargazers_count":244,"open_issues_count":1,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-01T06:31:42.677Z","etag":null,"topics":["backend-web","browser","color","colors","frontend-web","hsl","javascript","javascript-library","nodejs","palette","rgb","typescript","typescript-library","webworkers"],"latest_commit_sha":null,"homepage":"https://extract-colors.namide.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Namide.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"security.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-04T17:17:20.000Z","updated_at":"2025-02-28T19:05:12.000Z","dependencies_parsed_at":"2023-12-21T16:32:06.528Z","dependency_job_id":"1976672f-5f09-4ce3-a80c-ff6e93cc3e3f","html_url":"https://github.com/Namide/extract-colors","commit_stats":{"total_commits":343,"total_committers":4,"mean_commits":85.75,"dds":"0.14868804664723034","last_synced_commit":"1bee1d30247b90ce3aae4888e1d6a52f2e62be2e"},"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namide%2Fextract-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namide%2Fextract-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namide%2Fextract-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Namide%2Fextract-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Namide","download_url":"https://codeload.github.com/Namide/extract-colors/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241771280,"owners_count":20017780,"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":["backend-web","browser","color","colors","frontend-web","hsl","javascript","javascript-library","nodejs","palette","rgb","typescript","typescript-library","webworkers"],"created_at":"2024-07-23T04:11:33.507Z","updated_at":"2025-03-04T02:32:26.131Z","avatar_url":"https://github.com/Namide.png","language":"TypeScript","readme":"# Extract Colors\n\n[![package version](https://badge.fury.io/js/extract-colors.svg)](https://www.npmjs.com/package/extract-colors)\n[![npm min bundle size](https://img.shields.io/bundlephobia/min/extract-colors?style=flat\u0026color=brightgreen)](https://bundlephobia.com/result?p=extract-colors)\n[![npm gzip bundle size](https://img.shields.io/bundlephobia/minzip/extract-colors?style=flat\u0026color=brightgreen)](https://bundlephobia.com/result?p=extract-colors)\n[![zero dependency](https://img.shields.io/badge/dependency-zero-brightgreen)](https://www.npmjs.com/package/extract-colors?activeTab=dependencies)\n[![CI](https://github.com/Namide/extract-colors/workflows/CI/badge.svg)](https://github.com/Namide/extract-colors/actions)\n[![code coverage](https://codecov.io/gh/Namide/extract-colors/branch/master/graph/badge.svg?token=80PUQ24PW5)](https://codecov.io/gh/Namide/extract-colors)\n[![GNU GPL software License](https://img.shields.io/badge/license-GNU_GPL-brightgreen.svg)](#license)\n[![Downloaded](https://img.shields.io/npm/dt/extract-colors)](https://www.npmjs.com/package/extract-colors)\n\nExtract color palettes from images.  \nSimple use, \u003c 6kB minified, gzip ≈ 2kB, fast process and no dependencies for browser.  \nNeed image reader dependence for node.js\n\n[Website](https://extract-colors.namide.com/) | [Demo](https://extract-colors.namide.com/demo) | [Guide](https://extract-colors.namide.com/guide)\n\n![3 examples of colors extraction](./doc/colors-2.jpg)\n\n## Requirements\n\n### Browsers\n\n- Firefox: 29+\n- Chrome: 33+\n- Edge: 12+\n- Opera: 19+\n- Safari: 8+\n- Webview Android: 4.4.3+\n- Samsung Internet: 2.0+\n- ~~Internet Explorer~~\n\n### Node\n\n- Node.js: 6.0+\n\n## Install\n\n### For browser\n\n```bash\nnpm install --save extract-colors\n```\n\n### For node.js\n\nNeed to install an ImageData extractor like `get-pixels`\n\n```bash\nnpm install --save extract-colors get-pixels\n```\n\n## Usage\n\n### Browser example\n\n```js\nimport { extractColors } from \"extract-colors\";\n\nconst src = \"my-image.jpg\";\n\nextractColors(src).then(console.log).catch(console.error);\n```\n\n\u003e You can use different types for `src` param (`String` for a path of image, `HTMLImageElement` or `ImageData`).\n\n### Node.js example\n\n```js\nconst path = require(\"path\");\nconst getPixels = require(\"get-pixels\");\nconst { extractColors } = require(\"extract-colors\");\n\nconst src = path.join(__dirname, \"./my-image.jpg\");\n\ngetPixels(src, (err, pixels) =\u003e {\n  if (!err) {\n    const data = [...pixels.data];\n    const [width, height] = pixels.shape;\n\n    extractColors({ data, width, height }).then(console.log).catch(console.log);\n  }\n});\n```\n\n\u003e This example use `get-pixels` but you can change the lib.\n\u003e Just send the ImageData object to `extractColors(imageData)`.\n\n### ExtractorOptions\n\n```js\nconst options = {\n  pixels: 64000,\n  distance: 0.22,\n  colorValidator: (red, green, blue, alpha = 255) =\u003e alpha \u003e 250,\n  saturationDistance: 0.2,\n  lightnessDistance: 0.2,\n  hueDistance: 0.083333333,\n};\n\nextractColors(src, options).then(console.log).catch(console.error);\n```\n\n**pixels**  \n_Total pixel number of the resized picture for calculation_  \nType: `Integer`  \nDefault: `64000`\n\n**distance**  \n_From 0 to 1 is the color distance to not have near colors (1 distance is between white and black)_  \nType: `Number`  \nDefault: `0.22`\n\n**colorValidator**  \n_Test function to enable only some colors_  \nType: `Function`  \nDefault: `(red, green, blue, alpha = 255) =\u003e alpha \u003e 250`\n\n**crossOrigin**  \n_Only for browser, can be 'Anonymous' to avoid client side CORS_\n_(the server side images need authorizations too)_  \nType: `String`  \nDefault: `\"\"`\n\n**requestMode**  \n_Only for Web Workers in browser: it's used to determine if cross-origin requests lead to valid responses, and which properties of the response are readable_  \nType: `String`  \nDefault: `cors`\n\n**saturationDistance**  \n_Minimum saturation value between two colors otherwise the colors will be merged (from 0 to 1)_\nType: `String`  \nDefault: `0.2`\n\n**lightnessDistance**  \n_Minimum lightness value between two colors otherwise the colors will be merged (from 0 to 1)_\nType: `String`  \nDefault: `0.2`\n\n**hueDistance**  \n_Minimum hue value between two colors otherwise the colors will be merged (from 0 to 1)_\nType: `String`  \nDefault: `0.083333333`\n\n## Return of the promise\n\nArray of colors with the followed properties:\n\n```js\n[\n  {\n    hex: \"#858409\",​​\n    red: 133,​​\n    green: 132,​​\n    blue: 9,​​\n    hue: 0.16532258064516128,​​\n    intensity: 0.4862745098039216,​​\n    lightness: 0.2784313725490196,​​\n    saturation: 0.8732394366197184,\n    area: 0.0004\n  },\n  ...\n]\n```\n\n| Field      | Example | Type    | Description                                               |\n| ---------- | ------- | ------- | --------------------------------------------------------- |\n| hex        | #858409 | String  | color in hexadecimal string                               |\n| red        | 133     | Integer | red canal from 0 to 255                                   |\n| green      | 132     | Integer | green canal from 0 to 255                                 |\n| blue       | 9       | Integer | blue canal from 0 to 255                                  |\n| hue        | 0.1653  | Number  | color tone from 0 to 1                                    |\n| intensity  | 0.4862  | Number  | color intensity from 0 to 1                               |\n| lightness  | 0.2784  | Number  | color lightness from 0 to 1                               |\n| saturation | 0.8732  | Number  | color saturation from 0 to 1                              |\n| area       | 0.0004  | Number  | area of the color and his neighbouring colors from 0 to 1 |\n\n## License\n\nCopyright (C) 2019-present Damien Doussaud\n\nThis program is free software: you can redistribute it and/or modify\nit under the terms of the GNU General Public License as published by\nthe Free Software Foundation, either version 3 of the License, or\n(at your option) any later version.\n\nThis program is distributed in the hope that it will be useful,\nbut WITHOUT ANY WARRANTY; without even the implied warranty of\nMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\nGNU General Public License for more details.\n\nYou should have received a copy of the GNU General Public License\nalong with this program. If not, see \u003chttps://www.gnu.org/licenses/\u003e.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNamide%2Fextract-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNamide%2Fextract-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNamide%2Fextract-colors/lists"}