{"id":15986394,"url":"https://github.com/zyyv/magic-color","last_synced_at":"2025-03-17T15:31:01.593Z","repository":{"id":219732343,"uuid":"749765785","full_name":"zyyv/magic-color","owner":"zyyv","description":"Finding the magic in the colors of you","archived":false,"fork":false,"pushed_at":"2025-02-13T09:42:21.000Z","size":3993,"stargazers_count":32,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-11T01:49:44.558Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://color.zyyv.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zyyv.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,"publiccode":null,"codemeta":null}},"created_at":"2024-01-29T10:58:19.000Z","updated_at":"2025-02-20T17:05:36.000Z","dependencies_parsed_at":"2024-04-26T10:29:39.470Z","dependency_job_id":"87b56ace-3506-4ba1-9ef2-84ba95085733","html_url":"https://github.com/zyyv/magic-color","commit_stats":null,"previous_names":["zyyv/magic-color"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyyv%2Fmagic-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyyv%2Fmagic-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyyv%2Fmagic-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyyv%2Fmagic-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zyyv","download_url":"https://codeload.github.com/zyyv/magic-color/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243865610,"owners_count":20360471,"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-08T03:00:49.015Z","updated_at":"2025-03-17T15:31:01.134Z","avatar_url":"https://github.com/zyyv.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/zyyv/magic-color/main/public/logo.svg\" style=\"width:100px;\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003emagic-color\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e🌈 Make the colors be magical.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca\u003e\n\u003cimg src=\"https://img.shields.io/npm/v/magic-color?style=flat\u0026colorA=080f12\u0026colorB=1fa669\" alt=\"npm version\" /\u003e\n\u003c/a\u003e\n\u003ca\u003e\n\u003cimg src=\"https://img.shields.io/npm/dm/magic-color?style=flat\u0026colorA=080f12\u0026colorB=1fa669\" alt=\"npm downloads\" /\u003e\n\u003c/a\u003e\n\u003ca\u003e\n\u003cimg src=\"https://api.netlify.com/api/v1/badges/53ddaf28-1a23-40b2-8ed9-7ed65931744c/deploy-status\" alt=\"Netlify Status\" /\u003e\n\u003c/a\u003e\n\u003ca\u003e\n\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/magic-color?style=flat\u0026colorA=080f12\u0026colorB=1fa669\u0026label=minzip\" alt=\"bundle\" /\u003e\n\u003c/a\u003e\n\u003ca\u003e\n\u003cimg src=\"https://img.shields.io/badge/jsdocs-reference-080f12?style=flat\u0026colorA=080f12\u0026colorB=1fa669\" alt=\"JSDocs\" /\u003e\n\u003c/a\u003e\n\u003ca\u003e\n\u003cimg src=\"https://img.shields.io/github/license/zyyv/magic-color.svg?style=flat\u0026colorA=080f12\u0026colorB=1fa669\" alt=\"License\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nWatch my \u003ca href=\"https://color.zyob.top/talk\" target='_blank'\u003eTalk\u003c/a\u003e to learn more basic knowledge points.\n\u003c/p\u003e\n\n## Features\n\n\u003cul\u003e\n\u003cli\u003e\n\u003cspan\u003e💫 \u003c/span\u003e\nSupport `multi-color model` conversion.\n\u003c/li\u003e\n\u003cli\u003e\n\u003cspan\u003e📦 \u003c/span\u003e\nBuilt-in color related components.\n\u003c/li\u003e\n\u003cli\u003e\n\u003cspan\u003e🚀 \u003c/span\u003e\nProvides utility toolset functions\n\u003c/li\u003e\n\u003cli\u003e\n\u003cspan\u003e🦄 \u003c/span\u003e\nTheme color generator and fully customizable.\n\u003c/li\u003e\n\u003cli\u003e\n\u003cspan\u003e🥳 \u003c/span\u003e\n\u003ccode\u003eesm\u003c/code\u003e only \u0026 0 dependencies.\n\u003c/li\u003e\n\u003cli\u003e\n\u003cspan\u003e\n\u003cimg src='https://onu.zyob.top/logo.svg' width='18' /\u003e\n\u003c/span\u003e\n\u003cspan\u003e\nProvide powerful for \u003ca href=\"https://onu.zyob.top\" target=\"_blank\"\u003eOnu UI\u003c/a\u003e.\n\u003c/span\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\n## Usage\n\n```bash\npnpm add magic-color\n```\n\nA lot of color tool functions for you to use, providing easy conversion, generation, parsing, comparison, operation and other functions.\n\n### basic\n\n```ts\nimport { Magicolor, mc } from 'magic-color'\n\n// mc is an alias of Magicolor, but more static methods are mounted on mc, making it more powerful 💪.\n\nconst color = new Magicolor('#ffffff') // auto parse color\nconst color = mc('#ffffff')\nconst color = mc([255, 255, 255]) // default parse as RGB\nconst color = mc({ r: 255, g: 255, b: 255 })\n\nconst color = mc('#ffffff', 'hex') // specify color type\nconst color = mc('#ffffff', 'hex', 1) // specify opacity\n```\n\n`Magicolor` will automatically infer the input color type and the opacity.\n\n**Currently Magicolor supports the following types: `RGB`, `HEX`, `HSL`, `HSB`, `LAB`, `Keyword`.**\n\nYou can convert between supported types.\n\n```ts\ncolor.toRgb() // RGB value: [255, 255, 255]\ncolor.toHex() // HEX value: '#ffffff'\ncolor.toHsl() // HSL value: [0, 0, 100]\ncolor.toHsb() // HSB value: [0, 0, 100]\n\n// or you can use the `to` method\ncolor.to('your transformed type')\n```\n\nGet any type value of the color.\n\n```ts\ncolor.value() // current type value. If type is rgb: [255, 255, 255]\ncolor.value('hex') // HEX value: '#ffffff'\ncolor.value('hsl') // HSL value: [0, 0, 100]\ncolor.value('hsb') // HSB value: [0, 0, 100]\n```\n\nIf you want to output a color string, you can use the `css` method, and you can choose whether you need opacity.\n\n```ts\ncolor.css() // '#ffffff'\n// with opacity\ncolor.css(true) // '#ffffffff'\ncolor.css('rgb') // 'rgb(255 255 255)'\ncolor.css('rgb', true) // 'rgb(255 255 255 / 100%)'\n```\n\nRefer to the [type documentation](https://github.com/zyyv/magic-color/blob/main/src/core/types.ts) for more information.\n\nAnd more...\n\n### mc.theme\n\nWell, you can use it to create a theme color.\n\n```ts\nimport { mc } from 'magic-color'\n\nmc.theme() // A random theme color\nmc.theme('#9955ff')\n\n// Will output:\n// {\n//   \"50\": \"#faf7ff\",\n//   \"100\": \"#f5eeff\",\n//   \"200\": \"#e6d5ff\",\n//   \"300\": \"#d6bbff\",\n//   \"400\": \"#b888ff\",\n//   \"500\": \"#9955ff\",\n//   \"600\": \"#8a4de6\",\n//   \"700\": \"#5c3399\",\n//   \"800\": \"#452673\",\n//   \"900\": \"#2e1a4d\",\n//   \"950\": \"#1f1133\",\n// }\n```\n\nAnd you can custom it with `themeOptions`.\n\n```ts\nexport interface ThemeOptions {\n  /**\n   * Output color type\n   *\n   * @default same type as input\n   */\n  type?: ColorType\n\n  /**\n   * Custom render output color\n   *\n   * @param meta [name, color]\n   * @returns [CustomedName, CustomedColor]\n   */\n  render?: (meta: [string, string]) =\u003e [string, string]\n}\n```\n\n```ts\nimport { mc } from 'magic-color'\n\nmc.theme('#9955ff', {\n  type: 'rgb',\n  render: (meta) =\u003e {\n    return [\n      `--color-primary-${meta[0]}`,\n      meta[1].replace(/rgb\\((.*)\\)/, '$1').replace(/,/g, ''),\n    ]\n  },\n})\n\n// Will output:\n// {\n//   \"--color-primary-50\": \"250 247 255\",\n//   \"--color-primary-100\": \"245 238 255\",\n//   \"--color-primary-200\": \"230 213 255\",\n//   \"--color-primary-300\": \"214 187 255\",\n//   \"--color-primary-400\": \"184 136 255\",\n//   \"--color-primary-500\": \"153 85 255\",\n//   \"--color-primary-600\": \"138 77 230\",\n//   \"--color-primary-700\": \"92 51 153\",\n//   \"--color-primary-800\": \"69 38 115\",\n//   \"--color-primary-900\": \"46 26 77\",\n//   \"--color-primary-950\": \"31 17 51\",\n// }\n```\n\n## Credits\n\n- [apca-w3](https://github.com/Myndex/apca-w3)\n- [chroma.js](https://github.com/gka/chroma.js)\n- [theme-colors](https://github.com/unjs/theme-colors)\n\n## Activity\n\n![Alt](https://repobeats.axiom.co/api/embed/4790016be5d90b8e99352bc13495e584f092c0be.svg \"Repobeats analytics image\")\n\n## license\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzyyv%2Fmagic-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzyyv%2Fmagic-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzyyv%2Fmagic-color/lists"}