{"id":16483600,"url":"https://github.com/trevorblades/color-loader","last_synced_at":"2025-03-23T12:32:24.446Z","repository":{"id":57203376,"uuid":"93997900","full_name":"trevorblades/color-loader","owner":"trevorblades","description":"🎨 A webpack loader that extracts the color palette of an image","archived":false,"fork":false,"pushed_at":"2018-11-30T00:16:35.000Z","size":1422,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T20:16:26.153Z","etag":null,"topics":["color","color-palette","image","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"https://npm.im/color-loader","language":"JavaScript","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/trevorblades.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}},"created_at":"2017-06-11T10:43:34.000Z","updated_at":"2024-02-07T03:56:22.000Z","dependencies_parsed_at":"2022-09-17T06:21:45.826Z","dependency_job_id":null,"html_url":"https://github.com/trevorblades/color-loader","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trevorblades%2Fcolor-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trevorblades%2Fcolor-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trevorblades%2Fcolor-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trevorblades%2Fcolor-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trevorblades","download_url":"https://codeload.github.com/trevorblades/color-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245104464,"owners_count":20561376,"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":["color","color-palette","image","webpack","webpack-loader"],"created_at":"2024-10-11T13:14:30.467Z","updated_at":"2025-03-23T12:32:24.029Z","avatar_url":"https://github.com/trevorblades.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Color Loader\n\n[![Build Status](https://travis-ci.com/trevorblades/color-loader.svg?branch=master)](https://travis-ci.com/trevorblades/color-loader)\n\nA webpack loader that extracts the color palette of an image\n\n## Installation\n\n```shell\n$ npm install --save-dev color-loader file-loader\n```\n\nThis loader depends on [`file-loader`](https://github.com/webpack-contrib/file-loader), so be sure to install that too if you don't have it already.\n\n## Usage\n\nThis loader supports JPEG, PNG, GIF, and SVG files and is designed to be a drop-in replacement for `file-loader`, in case you're already using that. The loader will output the path to the provided image file, along with information about the colors in the image.\n\n```js\nimport image, {color, colors} from 'color-loader!./path/to/image.jpg';\n```\n\n - `image` is the image path generated by the file loader\n - `color` is the most dominant color in the image\n - `colors` is an array of the dominant colors in the image\n\nYou can use it in your webpack configuration, too! This means that all images that you `import` or `require` will always return the colors extracted from the image.\n\n```js\n{\n  // ...your awesome webpack config options\n  module: {\n    rules: [\n      {\n        test: /\\.(jpg|png|gif|svg)$/,\n        use: 'color-loader'\n      }\n    ]\n  }\n}\n```\n\n## Options\n\nYou can pass along any options you would normally pass to [`file-loader`](https://github.com/webpack-contrib/file-loader).\n\n## Example\n\nThis image:\n\n![example image](https://raw.githubusercontent.com/trevorblades/color-loader/master/example.png)\n\nWill result in these colors:\n - ![#3a4f25](https://placehold.it/24/3a4f25/000000?text=+) #3a4f25\n - ![#b37a5d](https://placehold.it/24/b37a5d/000000?text=+) #b37a5d\n - ![#78993b](https://placehold.it/24/78993b/000000?text=+) #78993b\n - ![#839795](https://placehold.it/24/839795/000000?text=+) #839795\n - ![#8c472f](https://placehold.it/24/8c472f/000000?text=+) #8c472f\n\n You could use it in a React component like this:\n\n ```js\nimport image, {color} from './example.png';\n\nconst Component = () =\u003e (\n  \u003cdiv\n    style={{\n      backgroundColor: color, // #3a4f25\n      backgroundImage: image\n    }}\n  \u003e\n    \u003ch1\u003eThey ate the Pokémon...\u003c/h1\u003e\n  \u003c/div\u003e\n);\n ```\n \n And it might look something like this (results may vary):\n \n ![example gif](https://raw.githubusercontent.com/trevorblades/color-loader/master/example.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrevorblades%2Fcolor-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrevorblades%2Fcolor-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrevorblades%2Fcolor-loader/lists"}