{"id":13606048,"url":"https://github.com/cdonohue/polychrome","last_synced_at":"2025-04-06T02:12:50.236Z","repository":{"id":57327015,"uuid":"85709336","full_name":"cdonohue/polychrome","owner":"cdonohue","description":"🎨 Easy color manipulation in ~2kb (gzipped)","archived":false,"fork":false,"pushed_at":"2018-02-11T02:12:26.000Z","size":387,"stargazers_count":288,"open_issues_count":6,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T00:11:06.854Z","etag":null,"topics":["color","color-manipulation","css-color","css-in-js","immutable","palette","tiny"],"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/cdonohue.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}},"created_at":"2017-03-21T14:06:26.000Z","updated_at":"2024-09-25T07:48:15.000Z","dependencies_parsed_at":"2022-09-13T19:21:50.383Z","dependency_job_id":null,"html_url":"https://github.com/cdonohue/polychrome","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdonohue%2Fpolychrome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdonohue%2Fpolychrome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdonohue%2Fpolychrome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdonohue%2Fpolychrome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdonohue","download_url":"https://codeload.github.com/cdonohue/polychrome/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423516,"owners_count":20936626,"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-manipulation","css-color","css-in-js","immutable","palette","tiny"],"created_at":"2024-08-01T19:01:05.556Z","updated_at":"2025-04-06T02:12:50.216Z","avatar_url":"https://github.com/cdonohue.png","language":"TypeScript","readme":"# `polychrome` \n\u003eA small `~2kB (gzipped)` library for parsing and manipulating colors\n\n![logo](images/logo.png)\n\n## Installation\n\u003efeel free to replace `yarn add` with `npm install`\n```shell\n$\u003e yarn add polychrome\n```\n\n## Usage\n```js\n// using ES6 modules\nimport polychrome from \"polychrome\";\n\n// using CommonJS modules\nconst polychrome = require(\"polychrome\");\n```\n\n```js\n// Make a polychrome color from hex, rgb(a), and hsl(a) strings\nconst red = polychrome(\"#F00\");\n\n// Get a string representation of a polychrome color in other formats\nred.rgb() // \"rgb(255,0,0)\"\n\n// Manipulate polychrome colors\nconst darkerRed = red.darken(20); // (pass in an integer percentage)\ndarkerRed.hsl() // \"hsl(0,100%,40%)\"\n\n// Chain polychrome methods together before outputting\npolychrome(\"#F00\").darken(20).fadeOut(60).rgb() // \"rgba(204,0,0,0.4)\"\n```\n\n---\n\n## API Reference\n- [Polychrome](#polychrome-object)\n- [Alpha](#alpha)\n- [Hue](#hue)\n- [Lightness](#lightness)\n- [Mix](#mix)\n- [Saturation](#saturation)\n\n### Polychrome Object\n`polychrome(colorString)`\n\u003e`colorString` can be a hex (3 or 6 digit), rgb(a), or hsl(a) string. Returns a `polychrome` object.\n\nA polychrome object consists of the following properties:\n- `rHex` - 2 character hex string representation of the red color channel\n- `gHex` - 2 character hex string representation of the green color channel\n- `bHex` - 2 character hex string representation of the blue color channel\n- `r` - value of the red color channel [0 - 255]\n- `g` - value of the green color channel [0 - 255]\n- `b` - value of the blue color channel [0 - 255]\n- `h` - hue of the color [0 - 360]\n- `s` - saturation of the color [0 - 100]\n- `l` - lightness of the color [0 - 100]\n- `luma` - luma value of the color [0 - 255]\n\nIn addition to the above properties, the following methods are available to a `polychrome` for outputting CSS color strings:\n\n- `.hex()` - returns a 6-digit hexadecimal CSS compatible color string\n\n  ```js\n  polychrome(\"rgb(0, 0, 0)\").hex() // \"#000000\"\n  ```\n\n- `.rgb()` - returns an rgb(a) CSS compatible color string\n\n  ```js\n  // rgba will be used if an alpha value exists\n  polychrome(\"#000\").rgb()           // \"rgb(0,0,0)\"\n  polychrome(\"#000\").fadeOut(60).rgb() // \"rgba(0,0,0,.4)\"\n  ```\n\n- `.hsl()` - returns an hsl(a) CSS compatible color string\n\n  ```js\n  // hsla will be used if an alpha value exists\n  polychrome(\"#000\").hsl()           // \"hsl(0,0%,0%)\"\n  polychrome(\"#000\").fadeOut(60).hsl() // \"hsla(0,0%,0%,.4)\"\n  ```\n\n### Alpha\n\n- `.setAlpha(value)`\n\n  Returns a `polychrome` with an `alpha` value _absolutely_ set to `value`. No change occurs if value is omitted.\n\n- `.fadeIn(percentage)`\n\n  Returns a `polychrome` faded in by `percentage`. Default `50` if no percentage is passed in.\n\n- `.fadeOut(percentage)`\n\n  Returns a `polychrome` faded out by `percentage`. Default `50` if no percentage is passed in.\n\n### Contrast\n\n- `.contrast(dark, light)`\n\n  Checks `luma` value of `polychrome` and returns `dark` or `light` `polychrome` depending on the contrast level. If a contrast ratio of at least `4.5:1` is not met, the `dark`/`light` colors will be darkened / lightened until a valid ratio is met.\n\n  ```js\n  polychrome(\"#000\").contrast().rgb() // \"rgb(255,255,255)\"\n\n  polychrome(\"#DDD\").contrast(\"#333\", \"#EEE\").hex() // \"#333333\"\n  ```\n\n  \u003e `dark` and `light` can be a `String` _or_ `polychrome`. They default to `black (#000)` and `white (#FFF)` if params are not passed in.\n\n### Hue\n\n- `.setHue(value)`\n\n  Returns a `polychrome` with a `hue` value _absolutely_ set to `value`. No change occurs if value is omitted.\n\n- `.spin(degrees)`\n\n  Returns a `polychrome` with a `hue` value _rotated_ `degrees`. Can be a positive or negative degree value. When bounds of `[0 - 360]` are reached, `hue` will continue in a circular fashion until it has been spun the full amount.\n\n- `.complimentary()`\n\n  Returns a `polychrome` with a `hue` value _rotated_ `180 degrees`. Shorthand for `.spin(180)`.\n\n\n### Lightness\n\n- `.setLightness(value)`\n\n  Returns a `polychrome` with a `lightness` value _absolutely_ set to `value`. No change occurs if value is omitted.\n\n- `.lighten(percentage)`\n\n  Returns a `polychrome` lightened by `percentage`. Default `10` if no percentage is passed in.\n\n\n- `.darken(percentage)`\n\n  Returns a `polychrome` darkened by `percentage`. Default `10` if no percentage is passed in.\n\n\n### Mix\n\n- `.mix(otherColor)`\n\n  Returns a `polychrome` mixed with `otherColor`. `otherColor` can be another `polychrome` or a color string that will be parsed.\n\n- `.tint()`\n\n  Returns a `polychrome` mixed with `white (#FFFFFF)`. Shorthand for `.mix(\"#FFFFFF\")`.\n\n- `.shade()`\n\n  Returns a `polychrome` mixed with `black (#000000)`. Shorthand for `.mix(\"#000000\")`.\n\n### Saturation\n\n- `.setSaturation(value)`\n\n  Returns a `polychrome` with a `saturation` value _absolutely_ set to `value`. No change occurs if value is omitted.\n\n- `.saturate(percentage)`\n\n  Returns a `polychrome` saturated by `percentage`. Default `10` if no percentage is passed in.\n\n- `.desaturate(percentage)`\n\n  Returns a `polychrome` desaturated by `percentage`. Default `10` if no percentage is passed in.\n\n- `.grayscale()`\n\n  Returns a `polychrome` with `saturation` set to `0`. Shorthand for `.setSaturation(0)`.\n\n---\n\n## License\n\n\u003e MIT License 2017 © Chad Donohue\n","funding_links":[],"categories":["Colors","Tools"],"sub_categories":["Reactive Programming"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdonohue%2Fpolychrome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdonohue%2Fpolychrome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdonohue%2Fpolychrome/lists"}