{"id":17472469,"url":"https://github.com/sleeplessbyte/use-color-luminance","last_synced_at":"2025-08-19T04:43:20.544Z","repository":{"id":40766432,"uuid":"265975547","full_name":"SleeplessByte/use-color-luminance","owner":"SleeplessByte","description":"Hooks to calculate a colour's luminance, or its contrast with another colour.","archived":false,"fork":false,"pushed_at":"2023-01-06T07:31:15.000Z","size":1283,"stargazers_count":1,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-15T10:02:53.215Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SleeplessByte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-21T23:46:01.000Z","updated_at":"2022-03-28T13:28:11.000Z","dependencies_parsed_at":"2023-02-05T15:32:30.770Z","dependency_job_id":null,"html_url":"https://github.com/SleeplessByte/use-color-luminance","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/SleeplessByte/use-color-luminance","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleeplessByte%2Fuse-color-luminance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleeplessByte%2Fuse-color-luminance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleeplessByte%2Fuse-color-luminance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleeplessByte%2Fuse-color-luminance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SleeplessByte","download_url":"https://codeload.github.com/SleeplessByte/use-color-luminance/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SleeplessByte%2Fuse-color-luminance/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271102819,"owners_count":24699636,"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","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"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":[],"created_at":"2024-10-18T17:18:22.158Z","updated_at":"2025-08-19T04:43:20.463Z","avatar_url":"https://github.com/SleeplessByte.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-color-luminance\n\nHooks to calculate color luminance and color contrasts.\n\n## Installation\n\n```bash\nyarn add use-color-luminance\n# assumes react is already installed\n```\n\n## Usage\n\nCalculate the perceived luminance between 0 and 1:\n\n```typescript\nimport { colorLuminance } from 'use-color-luminance';\n\ncolorLuminance('#fff');\n// =\u003e 1\n\ncolorLuminance('#AA5522FF');\n// =\u003e ~0.1516\n\ncolorLuminance([0, 255, 0]);\n// =\u003e 0.7152\n```\n\nCalculate the contrast between two colors (between 1 and 21):\n\n```typescript\nimport { contrast } from 'use-color-luminance';\n\ncontrast('#fff', '#000000');\n// =\u003e 21\n\ncontrast('rgba(0, 0, 0, 1)', '#000');\n// =\u003e 1\n\ncontrast('#00f', '#000');\n// =\u003e 2.444\n```\n\nYou can import `AA_THRESHOLD_CONTRAST`, `AAA_THRESHOLD_CONTRAST` if you want to compare the output with threshold values.\n\n### Hooks\n\n- `useColorLuminance` is the hook for `colorLuminance`\n\n### Formats\n\nSupported formats for string input are:\n\n- `#rgb`\n- `#rrggbb`\n- `#rrggbbFF`\n- `rgb(r, g, b)` _with `(0 \u003c= rgb \u003c= 255)`_\n- `rgba(r, g, b, 1)` _with `(0 \u003c= rgb \u003c= 255)`_\n\nSupported formats for array input are:\n\n- `[r, g, b]` _with `(0 \u003c= rgb \u003c= 255)`_\n- `[r, g, b, 1]` _with `(0 \u003c= rgb \u003c= 255)`_\n\n### Opaque colors only\n\nCalculating the luminance or contrast of a color, only works if it's fully opaque. In other words, they can not be translucent.\n\nColors with that are (semi-)translucent need to be alpha-blended, which means\nthat you need to know the background color(s) in order to calculate the color\nthat will show on screen.\n\nThe package `use-alpha-blended-color` has both a React hook as well as a general\nutility function to blend colors.\n\n```typescript\nimport { useAlphaBlendedColor } from 'use-alpha-blended-color';\n```\n\n**Note**: Even alpha blended colors might _not_ be fully opaque. An alpha blended color will **only** be fully opaque, if either the foreground or background is.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleeplessbyte%2Fuse-color-luminance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsleeplessbyte%2Fuse-color-luminance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsleeplessbyte%2Fuse-color-luminance/lists"}