{"id":50483734,"url":"https://github.com/jonyw4/color-thief-react","last_synced_at":"2026-06-01T19:56:00.090Z","repository":{"id":37029784,"uuid":"237066571","full_name":"jonyw4/color-thief-react","owner":"jonyw4","description":"🎨 A React component with hooks for Color Thief. Grab color palette from an image with javascript","archived":false,"fork":false,"pushed_at":"2026-05-28T20:58:19.000Z","size":1405,"stargazers_count":42,"open_issues_count":26,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-06-01T19:55:55.950Z","etag":null,"topics":["color-thief","color-thief-hooks","color-thief-react","javascript","palette","react","react-color-thief","react-color-thief-hooks"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/color-thief-react100-zh6f8","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonyw4.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-01-29T19:38:08.000Z","updated_at":"2025-11-21T18:59:32.000Z","dependencies_parsed_at":"2024-04-01T04:25:11.723Z","dependency_job_id":"7a068bc8-c8c5-4bb0-bc9b-00062c44d6ab","html_url":"https://github.com/jonyw4/color-thief-react","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/jonyw4/color-thief-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonyw4%2Fcolor-thief-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonyw4%2Fcolor-thief-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonyw4%2Fcolor-thief-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonyw4%2Fcolor-thief-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonyw4","download_url":"https://codeload.github.com/jonyw4/color-thief-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonyw4%2Fcolor-thief-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33790933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-thief","color-thief-hooks","color-thief-react","javascript","palette","react","react-color-thief","react-color-thief-hooks"],"created_at":"2026-06-01T19:55:59.160Z","updated_at":"2026-06-01T19:56:00.077Z","avatar_url":"https://github.com/jonyw4.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/jonycelio"],"categories":[],"sub_categories":[],"readme":"# Color Thief (React)\n🎨 A React component with hooks for Color Thief. Grab color palette from an image with javascript\nUse the official Lokesh's [color-thief](https://github.com/lokesh/color-thief/).\n\n[![npm (scoped)](https://img.shields.io/npm/v/color-thief-react.svg)](https://www.npmjs.com/package/color-thief-react)\n![Build Status](https://github.com/jonyw4/color-thief-react/workflows/Test,%20build%20and%20deploy/badge.svg)\n[![codecov](https://codecov.io/gh/jonyw4/color-thief-react/branch/master/graph/badge.svg)](https://codecov.io/gh/jonyw4/color-thief-react)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n![GitHub](https://img.shields.io/github/license/jonyw4/color-thief-react)\n\n### Do you like?\n*Please, consider supporting my work as a lot of effort takes place to create this component! Thanks a lot.*\n\n\u003ca href=\"https://www.buymeacoffee.com/jonycelio\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 51px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\n\n### Demo\n**See a real [demo in the Codesandbox](https://codesandbox.io/s/color-thief-react100-zh6f8)**\n\n## Install\n```\nnpm i -S color-thief-react\n```\n\n```\nyarn add color-thief-react\n```\n\n## Basic Usage\n```jsx\nimport Color from 'color-thief-react';\n// In your render...\n\u003cColor src={IMAGE_URL}\u003e\n  {({ data, loading, error }) =\u003e (\n    \u003cdiv style={{ color: data }}\u003e\n      Text with the predominant color\n    \u003c/div\u003e\n  )}\n\u003c/Color\u003e\n```\n\n## API\n### Color\n\nReturn the predominant color of the image. You can use a React component or hook. Both have the same props.\n\n`src`: **Required**. Link of the image\n\n---\n\n`format`: Format of the response. Can be `rgbString`, `rgbArray`, `hslString`, `hslArray`, `hex` or a CSS `keyword`. Default is `rgbString`\n\nColor conversion is made possible by the [color-convert](https://www.npmjs.com/package/color-convert) package.\n\n**Examples**\n\nrgbString: `'rgb(89, 197, 182)'`\nrgbArray: `[89, 197, 182]`\nhslString: `'hsl(172, 48%, 56%)'`\nhslArray: `[172, 48, 56]`\nhex: `'#59c5b6'`\nkeyword: `'mediumaquamarine'`\n\n\n**CSS Keywords**\n`keyword`: Color keywords are case-insensitive identifiers that represent a specific color, such as `red`, `blue`, `black`, or `lightseagreen`. \n\nKeywords are matched to the closest color. See this page on [Web Colors](https://drafts.csswg.org/css-color/#named-colors) for a complete list of colors that can be returned with the `keyword` color format.  \n\n---\n`crossOrigin`: Tag cross-origin for image\n\n---\n\n`quality`: Quality determines how many pixels are skipped before the next one is sampled. We rarely need to sample every single pixel in the image to get good results. The bigger the number, the faster a value will be returned. Read more in https://lokeshdhakar.com/projects/color-thief/\n\n### Usage\n```jsx\nimport { useColor } from 'color-thief-react'\n\nconst { data, loading, error } = useColor(src, format, { crossOrigin, quality})\n\n\u003cdiv style={{ color: data }}\u003e\n  Text with the predominant color\n\u003c/div\u003e\n```\n```jsx\nimport Color from 'color-thief-react';\n// In your render...\n\u003cColor src={IMAGE_URL} format=\"hex\"\u003e\n  {({ data, loading, error }) =\u003e (\n    \u003cdiv style={{ color: data }}\u003e\n      Text with the predominant color\n    \u003c/div\u003e\n  )}\n\u003c/Color\u003e\n```\n### Palette\nReturn a palette of colors based on the predominance of colors on the image. You can use a React component or hook. Both have the same props.\n\n`src`: **Required**. Link of the image\n\n`colorCount`: Count of colors of the palette. Default is 2\n\n`format`: Format of the response. See the `format` section in the [Color](#color) chapter for a detailed API.\n\n`crossOrigin`: Tag cross-origin for image\n\n`quality`: Default is `10`. Quality determines how many pixels are skipped before the next one is sampled. We rarely need to sample every single pixel in the image to get good results. The bigger the number, the faster a value will be returned. Read more in https://lokeshdhakar.com/projects/color-thief/\n\n```jsx\nimport { Palette } from 'color-thief-react';\n// In your render...\n\u003cPalette src={IMAGE_URL} colorCount={2}\u003e\n  {({ data, loading, error }) =\u003e (\n    \u003cdiv style={{ color: data[0], backgroundColor: data[1] }}\u003e\n      Text with the predominant color\n    \u003c/div\u003e\n  )}\n\u003c/Palette\u003e\n```\n\n```jsx\nimport { usePalette } from 'color-thief-react'\n\nconst { data, loading, error } = usePalette(src, colorCount, format, { crossOrigin, quality})\n\n\u003cdiv style={{ color: data[0], backgroundPalette: data[1] }}\u003e\n  Text with the predominant color\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonyw4%2Fcolor-thief-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonyw4%2Fcolor-thief-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonyw4%2Fcolor-thief-react/lists"}