{"id":18879760,"url":"https://github.com/loilo/color-blend","last_synced_at":"2025-04-04T10:07:19.102Z","repository":{"id":14307942,"uuid":"76308264","full_name":"loilo/color-blend","owner":"loilo","description":"🎨 Blends RGBA colors with various blend modes in JavaScript","archived":false,"fork":false,"pushed_at":"2024-04-09T04:59:19.000Z","size":633,"stargazers_count":120,"open_issues_count":2,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T10:16:04.888Z","etag":null,"topics":["blend-modes","colors","javascript"],"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/loilo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2016-12-13T00:41:00.000Z","updated_at":"2024-04-22T05:37:22.639Z","dependencies_parsed_at":"2024-04-22T05:50:16.022Z","dependency_job_id":null,"html_url":"https://github.com/loilo/color-blend","commit_stats":{"total_commits":92,"total_committers":8,"mean_commits":11.5,"dds":0.4347826086956522,"last_synced_commit":"237e34b1184320b1e5c34b63160ce799988c3b01"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loilo%2Fcolor-blend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loilo%2Fcolor-blend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loilo%2Fcolor-blend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loilo%2Fcolor-blend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loilo","download_url":"https://codeload.github.com/loilo/color-blend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157079,"owners_count":20893202,"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":["blend-modes","colors","javascript"],"created_at":"2024-11-08T06:39:12.759Z","updated_at":"2025-04-04T10:07:19.082Z","avatar_url":"https://github.com/loilo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\n![color-blend logo showing two half-transparent, overlapping circles](https://cdn.jsdelivr.net/gh/Loilo/color-blend@61bf569ab93e02df2291f47585d3e554acc0c9a1/color-blend.svg)\n\n  \u003cbr\u003e\n\u003c/div\u003e\n\n# color-blend\n\n[![Tests](https://badgen.net/github/checks/loilo/color-blend/master)](https://github.com/loilo/color-blend/actions)\n[![Version on npm](https://badgen.net/npm/v/color-blend)](https://www.npmjs.com/package/color-blend)\n\n\u003e Blends RGBA colors with different blend modes\n\nThis is a zero-dependency JavaScript implementation of the blend modes introduced in the [W3C Compositing and Blending spec](https://www.w3.org/TR/compositing-1/).\n\nAltogether it's a whopping 1.1 KB small (minified \u0026 gzipped), going down to as far as 0.4 KB if you use just one blending method and a [tree-shaking](https://en.wikipedia.org/wiki/Tree_shaking) bundler.\n\n## Install\n\n```console\n$ npm install --save color-blend\n```\n\n## Usage\n\n### Example\n\nIt's really easy to wrap your head around. Consider the following simple example:\n\n```js\n// Using vanilla Node.js\nconst { normal } = require('color-blend')\n\n// Using a bundler? It will automatically pick up a\n// tree-shakeable ES modules version of color-blend:\nimport { normal } from 'color-blend'\n\n// Mix some green and pink\nconst pinkBackground = { r: 255, g: 0, b: 87, a: 0.42 }\nconst greenForeground = { r: 70, g: 217, b: 98, a: 0.6 }\n\nnormal(pinkBackground, greenForeground)\n// returns { r: 110, g: 170, b: 96, a: 0.768 }\n```\n\nBy the way, those are the colors from the logo above. See?\n\n![Visual representation of the example code](explanation.png)\n\n### Explanation\n\nThis module provides an implementation for all blend modes listed in the aforementioned W3C document, which are:\n\n- `normal`\n- `multiply`\n- `screen`\n- `overlay`\n- `darken`\n- `lighten`\n- `colorDodge`\n- `colorBurn`\n- `hardLight`\n- `softLight`\n- `difference`\n- `exclusion`\n- `hue`\n- `saturation`\n- `color`\n- `luminosity`\n\nAll those methods have the same API: they take a `background` and a `foreground` color as arguments.\nThose are expected to be RGBA colors, similar to how they appear in CSS — represented as plain objects containing the keys\n\n- `r`, `g`, `b` (each ranging from 0 to 255)\n- `a` (ranging from 0 to 1)\n\nThe result of the blending operation will be returned as such an RGBA object as well.\n\n### Unit Colors\n\nIf you need higher precision (resulting RGB channels will be rounded to integers!) or just have a different flavor, this package offers the `/unit` entry point, where all accepted and returned color channels are values between 0 and 1:\n\n```javascript\nimport { normal } from 'color-blend/unit'\n\n// Still mix some green and pink\nconst pinkBackground = { r: 1, g: 0, b: 0.34, a: 0.42 }\nconst greenForeground = { r: 0.27, g: 0.85, b: 0.38, a: 0.6 }\n\nnormal(pinkBackground, greenForeground)\n// returns { r: 0.43, g: 0.665, b: 0.372, a: 0.768 } (rounded to 3 decimals for brevity)\n```\n\n## Thanks\n\nA special \"thank you\" goes to [Christos Lytras](https://github.com/clytras) who helped me [digging deep](https://stackoverflow.com/questions/40796852/mix-two-non-opaque-colors-with-hue-blend-mode) into the rabbit hole of color blending.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floilo%2Fcolor-blend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floilo%2Fcolor-blend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floilo%2Fcolor-blend/lists"}