{"id":18285997,"url":"https://github.com/nextcss/color-tools","last_synced_at":"2025-04-15T19:33:51.697Z","repository":{"id":64201789,"uuid":"574065391","full_name":"nextcss/color-tools","owner":"nextcss","description":"Useful color tools for your next JavaScript project.","archived":false,"fork":false,"pushed_at":"2024-11-22T12:48:50.000Z","size":443,"stargazers_count":85,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-10T02:13:03.434Z","etag":null,"topics":["backend","color","color-palette","color-palette-generator","color-tool","colors","convert","converter","front-end","hex","rgb","tool","tools"],"latest_commit_sha":null,"homepage":"https://nextcss.com","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/nextcss.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},"funding":{"github":["toviszsolt"]}},"created_at":"2022-12-04T10:17:48.000Z","updated_at":"2025-01-12T00:42:03.000Z","dependencies_parsed_at":"2023-02-12T01:00:25.365Z","dependency_job_id":"0ca40315-bad1-4baf-be0c-9e8cd54a963d","html_url":"https://github.com/nextcss/color-tools","commit_stats":{"total_commits":61,"total_committers":2,"mean_commits":30.5,"dds":"0.016393442622950838","last_synced_commit":"82794b8063200df10160bd668ea661e6df7ade1c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcss%2Fcolor-tools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcss%2Fcolor-tools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcss%2Fcolor-tools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextcss%2Fcolor-tools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextcss","download_url":"https://codeload.github.com/nextcss/color-tools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249138899,"owners_count":21218970,"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":["backend","color","color-palette","color-palette-generator","color-tool","colors","convert","converter","front-end","hex","rgb","tool","tools"],"created_at":"2024-11-05T13:18:32.850Z","updated_at":"2025-04-15T19:33:51.653Z","avatar_url":"https://github.com/nextcss.png","language":"JavaScript","funding_links":["https://github.com/sponsors/toviszsolt"],"categories":[],"sub_categories":[],"readme":"[![GitHub License](https://img.shields.io/github/license/nextcss/color-tools?style=flat)](https://github.com/nextcss/color-tools/blob/main/LICENSE)\n[![npm](https://img.shields.io/npm/v/@nextcss/color-tools?style=flat\u0026color=red)](https://www.npmjs.com/package/@nextcss/color-tools)\n[![GitHub Repo stars](https://img.shields.io/github/stars/nextcss/color-tools?color=DAAA3F)](https://github.com/nextcss/color-tools/stargazers)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/nextcss/color-tools/node.js.yml?branch=main)](https://github.com/nextcss/color-tools/actions/workflows/node.js.yml)\n[![Codecov](https://img.shields.io/codecov/c/github/nextcss/color-tools?style=flat)](https://app.codecov.io/github/nextcss/color-tools)\n[![Sponsor](https://img.shields.io/static/v1?label=sponsor\u0026message=❤\u0026color=ff69b4)](https://github.com/sponsors/toviszsolt)\n\n# Color Tools\n\nUseful tools when working with colors.\n\n- [Introduction](#introduction)\n- [Compatibility](#compatibility)\n- [Installation](#installation)\n- [HEX to RGB](#hex-to-rgb)\n- [RGB to HEX](#rgb-to-hex)\n- [HSL to HEX](#hsl-to-hex)\n- [Color Shift](#color-shift)\n- [Tone Map](#tone-map)\n- [Brightness](#brightness)\n- [Colorify](#colorify)\n- [Random HEX](#random-hex)\n- [Random RGB](#random-rgb)\n- [Random HSL](#random-hsl)\n- [Guidelines](#guidelines)\n- [License](#license)\n\n## Introduction\n\nThis package is a module of [the nextcss project](https://github.com/nextcss). This package was created to maintain this module independently of the main package and to be used as a building block in other projects.\n\n## Compatibility\n\nThis package can be used in both `browser` and `node` environments. Includes both `ES Modules` and `CommonJS` versions, so you can safely use both `import` and `require` statements in any environment. In the examples I'll use the `import` syntax, so don't be scared, feel free to use the `require` syntax if you like, that will work too. `TypeScript` support is also available.\n\n## Installation\n\nInstall the package via `yarn` or `npm`.\n\n```bash\nyarn add -D @nextcss/color-tools\n```\n\n```bash\nnpm i -D @nextcss/color-tools\n```\n\n## HEX to RGB\n\nConvert hexadecimal color (3, 6 or 8 digits) to RGB color array.\n\n### Syntax\n\n```js\nconst Array = hex2rgb(hex: String);\n```\n\n### Example\n\n```js\nimport { hex2rgb } from \"@nextcss/color-tools\";\n\nconst rgb1 = hex2rgb(\"#eee\");\nconsole.log(rgb1);\n// Output → [ 238, 238, 238 ]\n\nconst rgb2 = hex2rgb(\"#2196f3\");\nconsole.log(rgb2);\n// Output → [ 33, 150, 243 ]\n\nconst rgb3 = hex2rgb(\"#2196f3bf\");\nconsole.log(rgb3);\n// Output → [ 33, 150, 243, 75 ]\n// the last element is alpha, defined as a percentage\n\nconst [red, green, blue, alpha] = hex2rgb(\"#2196f3bf\");\nconsole.log({ red, green, blue, alpha });\n// Output → { red: 33, green: 150, blue: 243, alpha: 75 }\n// Example RGB string → rgb(33 150 243 / 75%)\n// Example RGBA string → rgba(33, 150, 243, .75)\n```\n\n## RGB to HEX\n\nConvert RGB color array [`red`, `green`, `blue`, `alpha?`] to hexadecimal color.\n\n### Syntax\n\n```js\nconst String = rgb2hex(rgb: Array);\n```\n\n### Example\n\n```js\nimport { rgb2hex } from \"@nextcss/color-tools\";\n\nconst hex1 = rgb2hex([238, 238, 238]);\nconsole.log(hex1);\n// Output → '#eeeeee'\n\nconst hex2 = rgb2hex([238, 238, 238, 75]);\nconsole.log(hex2);\n// Output → '#eeeeeebf'\n```\n\n## HSL to HEX\n\nConvert HSL color array [`hue`,`saturation`,`lightness`] to hexadecimal color.\n\n### Syntax\n\n```js\nconst String = hsl2hex(hsl: Array);\n```\n\n### Example\n\n```js\nimport { hsl2hex } from \"@nextcss/color-tools\";\n\nconst hex1 = hsl2hex([200, 70, 50]);\nconsole.log(hex1);\n// Output → #269dd9\n\nconst hex2 = hsl2hex([36, 90, 40]);\nconsole.log(hex2);\n// Output → #c2780a\n```\n\n## Color Shift\n\nShift a hexadecimal color (3, 6 or 8 digits) by the specified percentage. Positive shift results lighter colors, negative shift results darker colors.\n\n### Syntax\n\n```js\nconst String = colorShift(hex: String, percentage: Number);\n```\n\n### Example\n\n```js\nimport { colorShift } from \"@nextcss/color-tools\";\n\nconst color = colorShift(\"#eee\", 10);\nconsole.log(color);\n// Output → #d6d6d6\n\nconst color2 = colorShift(\"#eee\", -10);\nconsole.log(color2);\n// Output → #f0f0f0\n```\n\n## Tone Map\n\nGenerate a tone map from a hexadecimal color (3, 6 or 8 digits), between `50` and `950` tones.\n\n### Syntax\n\n```js\nconst Object = toneMap(hex: String);\n```\n\n### Example\n\n```js\nimport { toneMap } from \"@nextcss/color-tools\";\n\nconst tones = toneMap(\"#eee\");\nconsole.log(tones);\n// Output → {\n//   50: '#fdfdfd',\n//   100: '#fcfcfc',\n//   150: '#fbfbfb',\n//   200: '#f9f9f9',\n//   250: '#f7f7f7',\n//   300: '#f5f5f5',\n//   350: '#f3f3f3',\n//   400: '#f1f1f1',\n//   450: '#f0f0f0',\n//   500: '#eeeeee',\n//   550: '#d6d6d6',\n//   600: '#bebebe',\n//   650: '#a7a7a7',\n//   700: '#8f8f8f',\n//   750: '#777777',\n//   800: '#5f5f5f',\n//   850: '#474747',\n//   900: '#303030',\n//   950: '#242424',\n// }\n```\n\n## Brightness\n\nCalculate brightness (percentage) of a hexadecimal color. For example, if the color brightness is `\u003c50`, the color is `dark`, otherwise it is `light`.\n\n### Syntax\n\n```js\nconst Number = brightness(hex: String);\n```\n\n### Example\n\n```js\nimport { brightness } from \"@nextcss/color-tools\";\n\nconst level1 = brightness(\"#000\");\nconsole.log(level1);\n// Output → 0\n\nconst level2 = brightness(\"#ffffff\");\nconsole.log(level2);\n// Output → 100\n\nconst level3 = brightness(\"#269dd9\");\nconsole.log(level3);\n// Output → 53\n```\n\n## Colorify\n\nGenerate a hexadecimal color from any string (like username). Under the hood, it uses HSL to create the color, so you can set `saturation` (default: `50`) and `lightness` (default: `50`) values as an input.\n\n### Syntax\n\n```js\nconst String = colorify(str: String, saturation?: Number, lightness?: Number);\n```\n\n### Example\n\n```js\nimport { colorify } from \"@nextcss/color-tools\";\n\nconst hex1 = colorify(\"John Doe\");\nconsole.log(hex1);\n// Output → #40bf79\n\nconst hex2 = colorify(\"JD\", 60);\nconsole.log(hex2);\n// Output → #3394cc\n\nconst hex3 = colorify(\"J\", 60, 80);\nconsole.log(hex3);\n// Output → #dcebad\n```\n\n## Random HEX\n\nGenerate a random hexadecimal color. Under the hood, it uses HSL to create the color, so you can set the `saturation` (default: `70`) and `lightness` (default: `50`) values as an input.\n\n### Syntax\n\n```js\nconst String = randomHex(saturation?: Number, lightness?: Number);\n```\n\n### Example\n\n```js\nimport { randomHex } from \"@nextcss/color-tools\";\n\nconst hex1 = randomHex();\nconsole.log(hex1);\n// Output → #7de889\n\nconst hex2 = randomHex(50);\nconsole.log(hex2);\n// Output → #b38cd9\n\nconst hex3 = randomHex(65, 80);\nconsole.log(hex3);\n// Output → #abbbed\n```\n\n## Random RGB\n\nGenerate a random RGB color array. Under the hood, it uses HSL to create the color, so you can set the `saturation` (default: `70`) and `lightness` (default: `50`) values as an input.\n\n### Syntax\n\n```js\nconst Array = randomRgb(saturation?: Number, lightness?: Number);\n```\n\n### Example\n\n```js\nimport { randomRgb } from \"@nextcss/color-tools\";\n\nconst rgb1 = randomRgb();\nconsole.log(rgb1);\n// Output → [ 232, 193, 125 ]\n\nconst rgb2 = randomRgb(50);\nconsole.log(rgb2);\n// Output → [ 217, 161, 140 ]\n\nconst rgb3 = randomRgb(65, 80);\nconsole.log(rgb3);\n// Output → [ 206, 171, 237 ]\n```\n\n## Random HSL\n\nGenerate a random HSL color array. Under the hood, it uses HSL to create the color, so you can set the `saturation` (default: `70`) and `lightness` (default: `50`) values as an input.\n\n### Syntax\n\n```js\nconst Array = randomHsl(saturation?: Number, lightness?: Number);\n```\n\n### Example\n\n```js\nimport { randomHsl } from \"@nextcss/color-tools\";\n\nconst hsl1 = randomHsl();\nconsole.log(hsl1);\n// Output → [ 294, 70, 50 ]\n\nconst hsl2 = randomHsl(50);\nconsole.log(hsl2);\n// Output → [ 79, 50, 50 ]\n\nconst hsl3 = randomHsl(65, 80);\nconsole.log(hsl3);\n// Output → [ 274, 65, 80 ]\n```\n\n## Guidelines\n\nTo learn about the guidelines, please read the [Code of Conduct](https://github.com/nextcss/.github/blob/main/CODE_OF_CONDUCT.md), [Contributing](https://github.com/nextcss/.github/blob/main/CONTRIBUTING.md) and [Security Policy](https://github.com/nextcss/color-tools/security/policy) documents.\n\n## License\n\nMIT License @ 2022 [Zsolt Tövis](https://github.com/toviszsolt)\n\nIf you found this project interesting, please consider supporting my open source work by [sponsoring me](https://github.com/sponsors/toviszsolt) / [give the repo a star](https://github.com/nextcss/color-tools) / [follow the nextcss project](https://github.com/nextcss).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextcss%2Fcolor-tools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextcss%2Fcolor-tools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextcss%2Fcolor-tools/lists"}