{"id":15698966,"url":"https://github.com/stonecypher/husl_harmony","last_synced_at":"2025-05-09T02:18:13.904Z","repository":{"id":143880674,"uuid":"55646070","full_name":"StoneCypher/husl_harmony","owner":"StoneCypher","description":"Use the HUSL library to generate more effective color harmonies","archived":false,"fork":false,"pushed_at":"2018-06-25T17:40:38.000Z","size":192,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-09T02:18:08.526Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StoneCypher.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}},"created_at":"2016-04-06T22:37:32.000Z","updated_at":"2022-08-20T09:21:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"c81aa0a0-0bdd-45dd-9269-c5e0d0fc3a80","html_url":"https://github.com/StoneCypher/husl_harmony","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StoneCypher%2Fhusl_harmony","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StoneCypher%2Fhusl_harmony/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StoneCypher%2Fhusl_harmony/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StoneCypher%2Fhusl_harmony/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StoneCypher","download_url":"https://codeload.github.com/StoneCypher/husl_harmony/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253176445,"owners_count":21866143,"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-03T19:36:51.934Z","updated_at":"2025-05-09T02:18:13.877Z","avatar_url":"https://github.com/StoneCypher.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# husl_harmony\nUse the HUSL library to generate more effective and better balanced color harmonies.\n\n## Example\n\nBy example, asking `husl_harmony` for the first 14 swatch sets for color `#3D7AFA` yields these:\n\n![](https://raw.githubusercontent.com/StoneCypher/husl-harmony/master/src/html/palettes.png).\n\nThat palette set is generated by [this code](https://github.com/StoneCypher/husl_harmony/blob/master/src/html/index.html#L10):\n\n```javascript\nwindow.onload = function() { \n\n    var husl_harmony = require('husl_harmony'),\n        swatch_div   = husl_harmony.make_all_swatches('#3D7AFA');\n\n    document.body.innerHTML = '\u003ch1\u003eAll swatch sets matching \u003ctt\u003e#3D7AFA\u003c/tt\u003e\u003c/h1\u003e';\n    document.body.appendChild(swatch_div); \n\n}\n```\n\n`husl_harmony` is mostly meant for code use, and primarily ships back arrays of hex-6 colors of the form `['#aabbcc', '#ddeeff']`.\nIts results are best when used with tertiary, mid-saturation colors (colors where none of the three RGB color channels are \nnear-max or near-zero.)\n\n`husl_harmony` also includes a [harmonious gray balancer with color overlay \ncalculation](https://www.smashingmagazine.com/2016/04/web-developer-guide-color/#creating-harmonious-grays), which is great \nfor making color-hinted websites.\n\nColor swatch sets will be balanced in hue, saturation, lightness, and oriented to the source color.\n\n## ES6 Usage\n\n```javascript\n// let's get the analogous-7 matches of our color, a dark blue, #0026ff\nimport {from_rgb} from './husl_harmony.js';\nconsole.log( from_rgb('#0026FF', 'analogous-7') );\n```\n\nThe result should be \n\n```javascript\n[\"#005e53\", \"#005c64\", \"#00597b\", \"#0026FF\", \"#8e00a9\", \"#9c007e\", \"#a50051\"]\n```\n\n## ES5 Usage\n\n```javascript\n// see dist/index.html for a working example\nvar hh = require('husl_harmony');\nconsole.log( hh.from_rgb('#0026FF', 'analogous-7') );\n```\n\nThe result should be \n\n```javascript\n[\"#005e53\", \"#005c64\", \"#00597b\", \"#0026FF\", \"#8e00a9\", \"#9c007e\", \"#a50051\"]\n```\n\n## Harmonies\n\nCurrently, the library supports sixteen harmonies:\n\n1. Monochromatic \n1. Complementary\n1. Split complementary\n1. Double complementary\n1. L-double complementary\n1. Triad\n1. Complementary triad\n1. Square\n1. Tetrad\n1. L-tetrad\n1. Pentagon\n1. Hexagon\n1. Analogous 3\n1. Analogous 5\n1. Analogous 7\n1. Complementary analogous\n\n[It's easy and encouraged to add more](https://github.com/StoneCypher/husl_harmony/blob/master/src/js/husl_harmony.js#L14)! :smile:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstonecypher%2Fhusl_harmony","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstonecypher%2Fhusl_harmony","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstonecypher%2Fhusl_harmony/lists"}