{"id":15715775,"url":"https://github.com/adriantoine/kewler","last_synced_at":"2025-04-06T06:13:54.238Z","repository":{"id":57289145,"uuid":"56393327","full_name":"adriantoine/kewler","owner":"adriantoine","description":"Simple functional and immutable color manipulation library","archived":false,"fork":false,"pushed_at":"2017-07-01T22:08:00.000Z","size":797,"stargazers_count":231,"open_issues_count":3,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T05:08:16.338Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/adriantoine.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":"2016-04-16T16:17:58.000Z","updated_at":"2024-11-14T03:08:10.000Z","dependencies_parsed_at":"2022-08-29T12:02:17.764Z","dependency_job_id":null,"html_url":"https://github.com/adriantoine/kewler","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriantoine%2Fkewler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriantoine%2Fkewler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriantoine%2Fkewler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriantoine%2Fkewler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adriantoine","download_url":"https://codeload.github.com/adriantoine/kewler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441062,"owners_count":20939239,"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":[],"created_at":"2024-10-03T21:42:50.449Z","updated_at":"2025-04-06T06:13:54.215Z","avatar_url":"https://github.com/adriantoine.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":["[Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)"],"readme":"\n\u003cimg src='https://cdn.rawgit.com/adriantoine/kewler/master/media/kewler.svg' alt='kewler' width='500'\u003e\n\n[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?maxAge=2592000)](https://github.com/sindresorhus/xo)\n[![Travis](https://img.shields.io/travis/adriantoine/kewler.svg)](https://travis-ci.org/adriantoine/kewler)\n[![Coveralls](https://img.shields.io/coveralls/adriantoine/kewler.svg)](https://coveralls.io/github/adriantoine/kewler)\n[![Stable version](https://img.shields.io/npm/v/kewler.svg)](https://www.npmjs.com/package/kewler)\n[![Dependency Status](https://img.shields.io/gemnasium/adriantoine/kewler.svg)](https://gemnasium.com/adriantoine/kewler)\n\n`kewler` is a simple __functional__ and __immutable__ color manipulation library. 🎨\n\n#### Mmmmh, what does it mean?\n\nOk, there is quite a few color manipulation libraries, but they are all kinda object oriented where you create your object instance and manipulate it. This one is more like a functional one, where you create an __immutable__ color wrapper which is a function and run any alteration you want and eventually get a hex color.\n\nThat's gonna be easier with an example:\n\n```js\nimport {color} from 'kewler';\n\nconst blue = color('#0593ff');\nconsole.log(blue()); // Prints '#0593ff'\n```\n\nCool, you have a blue color boxed and wrapped.\n\n#### HOLD ON! You've just made a function which returns the first parameter, I can do it myself!!\n\nOk well, that wrapper does a bit more... Want to get a lighter one? There you go:\n\n```js\nimport {lightness} from 'kewler';\n\nconst lightBlue = blue(lightness(10));\nconsole.log(lightBlue()); // Prints '#38a9ff'\n```\n\nNow you have another wrapper with a color 10% lighter! Whenever you want your color as a HEX value, just run it without any argument.\n\n#### [An old senator](http://vignette2.wikia.nocookie.net/starwars/images/9/9a/Palp_trustme.jpg) that I met last week told me that the dark side is more cool, can I have it pls?\n\nOh well you can do whatever you want with your wrapper now, want a darker one? Here you go:\n\n```js\nconst darkLightBlue = lightBlue(lightness(-30));\nconsole.log(darkLightBlue()); // Prints '#005a9e'\n```\n\n#### Hhhm nice, but color is a bit more than just light and dark... I'm just not gonna use your library if...\n\nOk ok, you can change saturation and hue as well:\n\n```js\nimport {saturation, hue} from 'kewler';\n\nconst paleBlue = blue(saturation(-50));\nconsole.log(paleBlue()); // Prints '#5089b4'\n\nconst blueWhichIsActuallyGreen = blue(hue(-60));\nconsole.log(blueWhichIsActuallyGreen()); // Prints '#05ff71'\n```\n\nAnd you can also combine and chain them:\n\n```js\nconst pimpMyBlue = blue(saturation(-30), lightness(10));\nconsole.log(pimpMyBlue()); // Prints '#56a5e1'\n\nconst blueWhichIsActuallyGreenButPaleAndLight = blue(hue(-60))(saturation(-30), lightness(10));\nconsole.log(blueWhichIsActuallyGreenButPaleAndLight()); // Prints '#56e192'\n```\n\nPossibilities are literally endless!\n\n```js\nconst ohMyBlue = blue(lightness(-10), hue(-30), lightness(5))(saturation(-20), hue(10))(lightness(20));\nconsole.log(ohMyBlue()); // Prints '#63e0ee'\n```\n\n#### Woah! That's quite a lot of parenthesis!\n\nOh sorry, I got a bit overexcited, my point is that you can create your wrapper and manipulate it as much as you want, all you have to remember is that __a color wrapper is always going to return a new color wrapper if you pass it an argument__ (an alteration), and __it's always going to return a hex color when you execute it without any argument__.\n\nThat little wrapper that you get, you can pass it everywhere you want and modify it where you want, it's also __[immutable](https://en.wikipedia.org/wiki/Immutable_object)__.\n\nWriting your own alteration for a color is quite easy as well, an alteration is just a function that takes an [HSL color](https://css-tricks.com/yay-for-hsla/) value as an array and returns a new one:\n\n```js\nconst myAlteration = ([hue, sat, lit]) =\u003e ([hue, sat - 30, lit + 10]);\n\nconst myNewBlue = blue(myAlteration);\nconsole.log(myNewBlue); // Prints '#56a5e1'\n```\n\nAlso, if you just want a one-off alteration, you can use the `color` function with more than one argument:\n\n```js\nconst oneOffLightBlueFromHex = color('#0593ff', lightness(10));\nconsole.log(oneOffLightBlueFromHex); // Prints '#38a9ff'\n\nconst oneOffLightBlueFromColor = color(blue(), saturation(-30), lightness(10));\nconsole.log(oneOffLightBlueFromColor); // Prints '#56a5e1'\n```\n\nAh and another thing (last one, I promise), you can pass a HSL value as an array (`[int, int, int]`) or an object (`{ hue: int, sat: int, lit: int }`):\n\n```js\nconst blueFromHSLArray = color([206, 100, 51]);\nconsole.log(blueFromHSLArray()); // Prints '#0593ff'\n\nconst blueFromHSLObject = color({hue: 206, sat: 100, lit: 51});\nconsole.log(blueFromHSLObject()); // Prints '#0593ff'\n```\n\nI think that's it! Now have fun and enjoy a __colorful life__!\n\n#### Hold on bloody american! That's not quite the right way of spelling 'colour', you should be a bit more respectful with our ~~British~~ English language!\n\nAh, mmh, [I'm not american at all](http://adriantoine.com/about-me), I just thought that in IT, the american way of spelling english is more common, but as I'm currently living in England, I made a proxy `colour`, just for you!\n\n```js\nimport {colour} from 'kewler';\n\nconst blue = colour('#0593ff');\nconsole.log(blue()); // Prints '#0593ff'\n```\n\nOk now that's it, enjoy!\n\n#### No no no! You can't get away like this! Your library always returns a HEX value, but I need a HSL/RGB/Somethingelse value for my application!\n\nWell, I want to keep it simple and I think that most browsers and system support HEX color values, so that's why library returns it, if you want to stay functional, there are tons of converters which will convert HEX values to any other system, if you think returning HEX values is not a good choice, I'd love to discuss about it in a [Github issue](https://github.com/adriantoine/kewler/issues). You can also use another color manipulation library like [TinyColor](https://github.com/bgrins/TinyColor) (I have never used it, it's just the first result from Google).\n\nMy library also doesn't support transparency, but that's something I'm looking at.\n\nOk so just before going, here is the command to install it:\n\n```console\nnpm install --save kewler\n```\n\nHave fun!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriantoine%2Fkewler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadriantoine%2Fkewler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriantoine%2Fkewler/lists"}