{"id":26932468,"url":"https://github.com/phun-ky/moebius","last_synced_at":"2025-06-17T09:34:15.698Z","repository":{"id":208832860,"uuid":"711797916","full_name":"phun-ky/moebius","owner":"phun-ky","description":"A versatile JavaScript library that automatically generates visually pleasing and customizable color palettes from a given base color. Whether you're building data visualizations, UIs, or design systems, Möbius offers various harmony modes, smooth interpolation, luminance shifts, and diverging palette generation","archived":false,"fork":false,"pushed_at":"2025-06-16T14:53:44.000Z","size":2952,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-16T15:43:58.940Z","etag":null,"topics":["analogous","chrome","color","complement","css","design","generation","hexad","interpolate","javascript","monochrome","palette","palettes","pentad","split","tetrad","triad"],"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/phun-ky.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"phun-ky"}},"created_at":"2023-10-30T07:44:12.000Z","updated_at":"2025-06-16T14:49:30.000Z","dependencies_parsed_at":"2024-03-19T09:48:29.510Z","dependency_job_id":"85240f5c-8924-4cd0-9ac6-7b098ea2e8d8","html_url":"https://github.com/phun-ky/moebius","commit_stats":null,"previous_names":["phun-ky/moebius"],"tags_count":29,"template":false,"template_full_name":null,"purl":"pkg:github/phun-ky/moebius","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phun-ky%2Fmoebius","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phun-ky%2Fmoebius/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phun-ky%2Fmoebius/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phun-ky%2Fmoebius/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phun-ky","download_url":"https://codeload.github.com/phun-ky/moebius/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phun-ky%2Fmoebius/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260328991,"owners_count":22992805,"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":["analogous","chrome","color","complement","css","design","generation","hexad","interpolate","javascript","monochrome","palette","palettes","pentad","split","tetrad","triad"],"created_at":"2025-04-02T08:20:03.380Z","updated_at":"2025-06-17T09:34:15.683Z","avatar_url":"https://github.com/phun-ky.png","language":"TypeScript","readme":"# @phun-ky/moebius `möbius`\n\n![logo](./public/images/logo/logo-ring.png)\n\n\u003e Generate harmonious, customizable color palettes from a single base color - instantly and programmatically.\n\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com) [![SemVer 2.0](https://img.shields.io/badge/SemVer-2.0-green.svg)](http://semver.org/spec/v2.0.0.html) ![npm version](https://img.shields.io/npm/v/@phun-ky/moebius) ![issues](https://img.shields.io/github/issues/phun-ky/moebius) ![license](https://img.shields.io/npm/l/@phun-ky/moebius) ![size](https://img.shields.io/bundlephobia/min/@phun-ky/moebius) ![npm](https://img.shields.io/npm/dm/%40phun-ky/moebius) ![GitHub Repo stars](https://img.shields.io/github/stars/phun-ky/moebius) [![codecov](https://codecov.io/gh/phun-ky/moebius/graph/badge.svg?token=VA91DL7ZLZ)](https://codecov.io/gh/phun-ky/moebius) [![build](https://github.com/phun-ky/moebius/actions/workflows/check.yml/badge.svg)](https://github.com/phun-ky/moebius/actions/workflows/check.yml)\n\n- [@phun-ky/moebius `möbius`](#phun-kymoebius-möbius)\n  - [About](#about)\n  - [Features](#features)\n  - [Demo](#demo)\n  - [Install](#install)\n  - [Full API-reference](#full-api-reference)\n  - [Usage](#usage)\n    - [Creating palettes](#creating-palettes)\n      - [Default options](#default-options)\n      - [Interpolate](#interpolate)\n      - [Luminance shift](#luminance-shift)\n      - [Monochromatic](#monochromatic)\n      - [Complement](#complement)\n      - [Split](#split)\n      - [Triadic](#triadic)\n      - [Tetradic](#tetradic)\n      - [Pentadic](#pentadic)\n      - [Hexadic](#hexadic)\n      - [Analogous](#analogous)\n    - [Get color objects](#get-color-objects)\n      - [toString](#tostring)\n      - [toObject](#toobject)\n      - [toFloat](#tofloat)\n    - [Types](#types)\n  - [Contributing](#contributing)\n  - [License](#license)\n  - [Changelog](#changelog)\n  - [Sponsor me](#sponsor-me)\n\n## About\n\nMöbius is a color palette generation tool designed for developers and designers who need quick, consistent, and attractive color schemes. It supports a wide variety of palette types and exports color data in multiple formats — RGB, HSL, LAB, CMYK, and more - making it ideal for both web design and data visualization.\n\n## Features\n\n- Generate palettes using:\n  - Interpolation\n  - Luminance shifts\n  - Monochromatic, Complementary, Analogous, Triadic, Tetradic, etc.\n- Output in multiple color spaces: RGB, HSL, LCH, CMYK, etc.\n- Randomized or lightness-corrected options\n- Diverging palette support\n- TypeScript-friendly API\n\n## Demo\n\nYou can check out a working CodePen where you can [adjust settings and colors here](https://codepen.io/phun-ky/full/LYqQMqL), or the website [moebius.wtf](https://moebius.wtf/).\n\n## Install\n\n```shell-session\nnpm i -S @phun-ky/moebius\n```\n\n## Full API-reference\n\nYou can find the full API documentation [here](https://github.com/phun-ky/moebius/blob/main/api/README.md).\n\n## Usage\n\nImport and run the required function:\n\n```ts\nimport Moebius from '@phun-ky/moebius';\n\nconst { MoebiusColor, MoebiusPalettes } = await Moebius();\n\nconst palette = new MoebiusPalettes({\n  baseColor: new MoebiusColor('#1e90ff')\n});\n\nconsole.log(palette.colors.interpolate); // ['#1e90ff', '#3298d8', ...]\n```\n\n### Creating palettes\n\nThe main feature is the ability to create palettes with a given primary color and a secondary color (used for diverging palettes). You can also give the color to diverge to/from.\n\n#### Default options\n\n```ts\nconst defaultOptions = {\n  diverging: false,\n  bezier: false,\n  randomOffset: false,\n  correctLightness: false,\n  noDuplicates: true,\n  colorScaleMode: 'lch',\n  reverseDirection: false,\n  divergentColor: '#f5f5f5'\n};\n```\n\nYou initiate `MoebiusPalette` like this:\n\n```ts\nimport Moebius from '@phun-ky/moebius';\n\nconst { MoebiusPalette, MoebiusColor } = await Moebius();\n\nconst palettes = new MoebiusPalettes({\n  baseColor: new MoebiusColor('#003f5c'),\n  secondaryColor: new MoebiusColor('#ff9900'),\n  ...options\n});\n```\n\nAnd then you can enjoy your palettes!\n\n#### Interpolate\n\n```ts\nconsole.log(palettes.colors.interpolate);\n/*\n[\n  \"#003f5c\",\n  \"#2b4e4d\",\n  \"#555d3d\",\n  \"#806c2e\",\n  \"#aa7b1f\",\n  \"#d58a0f\",\n  \"#ff9900\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n\n![logo](./public/images/interpolate.png)\n\n#### Luminance shift\n\n```ts\nconsole.log(palettes.colors.luminanceShift);\n/*\n[\n  \"#003f5c\",\n  \"#5f8bac\",\n  \"#b3dff2\",\n  \"#f5f5f5\",\n  \"#fcb852\",\n  \"#d17300\",\n  \"#762800\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n![logo](./public/images/luminance-shift.png)\n\nIf you diverge them, it could look like this:\n![logo](./public/images/luminance-shift-diverging.png)\n\n#### Monochromatic\n\n```ts\nconsole.log(palettes.colors.monochromatic);\n/*\n[\n  \"#003f5c\",\n  \"#003342\",\n  \"#002329\",\n  \"#000e0f\",\n  \"#000000\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n![logo](./public/images/monochromatic.png)\n\n#### Complement\n\n```ts\nconsole.log(palettes.colors.complement);\n/*\n[\n  \"#003f5c\",\n  \"#0f394d\",\n  \"#1f343d\",\n  \"#2e2e2e\",\n  \"#3d281f\",\n  \"#4d230f\",\n  \"#5c1d00\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n![logo](./public/images/complement.png)\n\n#### Split\n\n```ts\nconsole.log(palettes.colors.split);\n/*\n[\n  \"#003f5c\",\n  \"#1f2a43\",\n  \"#3d152a\",\n  \"#5c0011\",\n  \"#5c190b\",\n  \"#5c3206\",\n  \"#5c4b00\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n![logo](./public/images/split.png)\n\n#### Triadic\n\n```ts\nconsole.log(palettes.colors.triadic);\n/*\n[\n  \"#003f5c\",\n  \"#1f2a52\",\n  \"#3d1549\",\n  \"#5c003f\",\n  \"#521f2a\",\n  \"#493d15\",\n  \"#3f5c00\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n![logo](./public/images/triadic.png)\n\n#### Tetradic\n\n```ts\nconsole.log(palettes.colors.tetradic);\n/*\n[\n  \"#003f5c\",\n  \"#26205c\",\n  \"#4b005c\",\n  \"#540f2e\",\n  \"#5c1d00\",\n  \"#363d00\",\n  \"#115c00\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n![logo](./public/images/tetradic.png)\n\n#### Pentadic\n\n```ts\nconsole.log(palettes.colors.pentadic);\n/*\n[\n  \"#003f5c\",\n  \"#2e203b\",\n  \"#5c001a\",\n  \"#5c2a0d\",\n  \"#5c5400\",\n  \"#2e5806\",\n  \"#005c0b\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n![logo](./public/images/pentadic.png)\n\n#### Hexadic\n\n```ts\nconsole.log(palettes.colors.hexadic);\n/*\n[\n  \"#003f5c\",\n  \"#3d1549\",\n  \"#5c0a2a\",\n  \"#5c1d00\",\n  \"#494700\",\n  \"#2a5c0a\",\n  \"#005c1d\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n![logo](./public/images/hexadic.png)\n\n#### Analogous\n\n```ts\nconsole.log(palettes.colors.interpolate);\n/*\n[\n  \"#003f5c\",\n  \"#00285c\",\n  \"#00115c\",\n  \"#0f085c\",\n  \"#1d005c\",\n  \"#34005c\",\n  \"#4b005c\"\n]\n*/\n```\n\nGives you an array of hex-colors.\n![logo](./public/images/analogous.png)\n\n### Get color objects\n\n```ts\nimport Moebius from '@phun-ky/moebius';\n\nconst { MoebiusColor } = await Moebius();\n\n//\nconst color = new MoebiusColor('#003f5c');\n\nconsole.log(color.hsl); // hsl(199, 100%, 18%);\n```\n\nThis will make available a color object with all of the colors readily converted and ready to use. This is an example output of the color object:\n\n```json\n{\n  \"color\": \"#003f5c\",\n  \"name\": \"Maniac Mansion\",\n  \"hex\": \"#003f5c\",\n  \"rgb\": \"rgb(0, 63, 92)\",\n  \"hsl\": {\n    \"h\": 199,\n    \"s\": 100,\n    \"l\": 18\n  },\n  \"hwb\": {\n    \"h\": 0.45,\n    \"w\": 0,\n    \"b\": 0.64\n  },\n  \"hsv\": {\n    \"h\": 198.91,\n    \"s\": 1,\n    \"v\": 0.36\n  },\n  \"lab\": {\n    \"l\": 24.72,\n    \"a\": -5.95,\n    \"b\": -22.26\n  },\n  \"xyz\": {\n    \"x\": 0.37,\n    \"y\": 0.43,\n    \"z\": 0.38\n  },\n  \"lch\": {\n    \"l\": 24.72,\n    \"c\": 23.04,\n    \"h\": 255.03\n  },\n  \"oklch\": {\n    \"l\": 0.35,\n    \"c\": 0.08,\n    \"h\": 236.65\n  },\n  \"hsi\": {\n    \"h\": 197.96,\n    \"s\": 1,\n    \"i\": 0.2\n  },\n  \"oklab\": {\n    \"l\": 0.35,\n    \"a\": -0.04,\n    \"b\": -0.06\n  },\n  \"cmyk\": {\n    \"c\": 100,\n    \"m\": 0,\n    \"y\": 32,\n    \"k\": 64\n  }\n}\n```\n\n#### toString\n\nFor the non-CSS units, the color object also exposes a `toString` method pr unit:\n\n```ts\nconst color = new MoebiusColor('#003f5c');\n\nconsole.log(color.hsl.toString()); // \"199, 100, 18\"\n```\n\n#### toObject\n\nThe color object exposes a `toObject` method, that allows to objectify from any color unit given to either a color object for the hsl units, or default rgb:\n\n```ts\nconst color = new MoebiusColor('#003f5c');\n\nconsole.log(color.toObject('hsl')); // \"199, 100, 18\"\nconsole.log(color.toObject(); // \"0, 63, 92\"\n```\n\n#### toFloat\n\nThe color object exposes a `toFloat` method, that allows to objectify to float values, as in `0-1` instead of `0-255`/`0-100` from any color unit given to either a color object for the hsl units, or default rgb:\n\n```ts\nconst color = new MoebiusColor('#003f5c');\n\nconsole.log(color.toFloat('hsl')); // \"199, 1, 0.18\"\nconsole.log(color.toFloat(); // \"0, 0.25, 0.36\"\n```\n\n### Types\n\nTypes can be found in `@phun-ky/moebius/moebius.d.ts`.\n\n## Contributing\n\nWant to contribute? Please read the [CONTRIBUTING.md](https://github.com/phun-ky/moebius/blob/main/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/phun-ky/moebius/blob/main/CODE_OF_CONDUCT.md)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/phun-ky/moebius/blob/main/LICENSE) file for details.\n\n## Changelog\n\nSee the [CHANGELOG.md](https://github.com/phun-ky/moebius/blob/main/CHANGELOG.md) for details on the latest updates.\n\n## Sponsor me\n\nI'm an Open Source evangelist, creating stuff that does not exist yet to help get rid of secondary activities and to enhance systems already in place, be it documentation or web sites.\n\nThe sponsorship is an unique opportunity to alleviate more hours for me to maintain my projects, create new ones and contribute to the large community we're all part of :)\n\n[Support me on GitHub Sponsors](https://github.com/sponsors/phun-ky).\n\n![logo](./public/images/logo/logo-ring.png)\n\np.s. **Ukraine is still under brutal Russian invasion. A lot of Ukrainian people are hurt, without shelter and need help**. You can help in various ways, for instance, directly helping refugees, spreading awareness, putting pressure on your local government or companies. You can also support Ukraine by donating e.g. to [Red Cross](https://www.icrc.org/en/donate/ukraine), [Ukraine humanitarian organisation](https://savelife.in.ua/en/donate-en/#donate-army-card-weekly) or [donate Ambulances for Ukraine](https://www.gofundme.com/f/help-to-save-the-lives-of-civilians-in-a-war-zone).\n","funding_links":["https://github.com/sponsors/phun-ky"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphun-ky%2Fmoebius","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphun-ky%2Fmoebius","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphun-ky%2Fmoebius/lists"}