{"id":34843150,"url":"https://github.com/jeronimoek/color-translate","last_synced_at":"2026-05-21T13:03:06.467Z","repository":{"id":194234038,"uuid":"690389302","full_name":"jeronimoek/color-translate","owner":"jeronimoek","description":"This package allows translating colors among all valid css formats. https://jeronimoek.github.io/color-translate-web/","archived":false,"fork":false,"pushed_at":"2025-05-20T00:56:49.000Z","size":1099,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-05T15:48:32.745Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/color-translate","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/jeronimoek.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2023-09-12T05:28:01.000Z","updated_at":"2025-05-20T00:56:52.000Z","dependencies_parsed_at":"2024-10-03T23:33:22.113Z","dependency_job_id":"a29ddf53-eb2f-4ed5-93b1-a3ef10279350","html_url":"https://github.com/jeronimoek/color-translate","commit_stats":{"total_commits":65,"total_committers":3,"mean_commits":"21.666666666666668","dds":0.3384615384615385,"last_synced_commit":"65d784b25c8916a0b8b41473da193d0039c5f3f1"},"previous_names":["jeronimoek/color-translator","jeronimoek/color-translate","jeronimoek/color-space-translate"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/jeronimoek/color-translate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeronimoek%2Fcolor-translate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeronimoek%2Fcolor-translate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeronimoek%2Fcolor-translate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeronimoek%2Fcolor-translate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeronimoek","download_url":"https://codeload.github.com/jeronimoek/color-translate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeronimoek%2Fcolor-translate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28033469,"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","status":"online","status_checked_at":"2025-12-25T02:00:05.988Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-12-25T17:18:53.802Z","updated_at":"2025-12-25T17:18:55.493Z","avatar_url":"https://github.com/jeronimoek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Color Translator\n\nThis package allows translating colors among all valid css formats\n\n## 🌐 Links\n\n[Website](https://jeronimoek.github.io/color-translate-web/)\n\n[Visual Studio Code Extension](https://github.com/jeronimoek/color-picker-universal)\n\n[NPM](https://www.npmjs.com/package/color-translate)\n\n[Github Repository](https://github.com/jeronimoek/color-translate)\n\n## Installation\n\nUsing npm:\n\n```shell\nnpm i color-translate\n```\n\n## Formats supported\n\nAll formats except \"Named\" accept an alpha value. (See [Formats specification](#formats-specification))\n\n| Format | Example string             | Example obj                              |\n| ------ | -------------------------- | ---------------------------------------- |\n| HEX    | `'#FF6600'`                | -                                        |\n| HEX 0x | `'0xFF6600'`               | -                                        |\n| RGB    | `'rgb(255 100 0)'`         | `{ r: 255, g: 100, b: 0 }`               |\n| HSL    | `'hsl(18 100% 50%)'`       | `{ h: 18, s: '100%', l: '50%' }`         |\n| HWB    | `'hwb(18 6% 0.4%)'`        | `{ h: 18, w: '6%', w: '0.4%' }`          |\n| LAB    | `'lab(61.6 61.3 66)'`      | `{ l: 61.6, a: 61.3, b: 66 }`            |\n| LCH    | `'lch(60 91.5 44)'`        | `{ l: 60, c: 91.5, h: 44 }`              |\n| OKLAB  | `'oklab(0.7 0.13 0.14)'`   | `{ l: 0.7, a: 0.13, b: 0.14, ok: true }` |\n| OKLCH  | `'oklch(0.7 0.2 48)'`      | `{ l: 0.7, c: 0.2, h: 48, ok: true }`    |\n| CMYK   | `'device-cmyk(0 0.5 1 0)'` | `{ c: 0, m: 0.5, y: 1, k: 0 }`           |\n| A98    | `'color(a98-rgb 1 0.4 0)'` | `{ r: 1, g: 0.4, b: 0, a98: true }`      |\n| Named  | `'orangered'`              | -                                        |\n\n## Usage\n\nThe first step is to create a new ColorTranslator instance\n\n```ts\nimport ColorTranslator from \"color-translate\";\nconst color = new ColorTranslator(\u003cinput\u003e);\n```\n\nThe input value has to be either a valid string or an object (See [Formats supported](#formats-supported))\n\n```ts\nconst color = new ColorTranslator(\"rgb(255 100 0)\");\nconst color2 = new ColorTranslator({ r: 255, g: 100, b: 0 });\n```\n\n### Example\n\n```ts\nimport ColorTranslator from \"color-translate\";\n\nconst color = new ColorTranslator(\"hsl(0 100% 50%)\");\ncolor\n  .updateRgb({ r: 127.5, b: 255, alpha: 0.4 })\n  .updateOptions({ angleUnit: \"grad\" });\n\nconsole.log(color.lch.l);\n// 39.282796563892475\n\nconsole.log(color.lch.toString());\n// 'lch(39.28 121.27 342.22grad / 0.4)'\n\nconsole.log(color.lch.toString({ angleUnit: \"rad\" }));\n// 'lch(39.28 121.27 5.38rad / 0.4)'\n```\n\n### Methods\n\nOnce created the ColorTranslator instance, we can call these methods\n\n| Method                 | Description                                                      | Example                                                                |\n| ---------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------- |\n| .\\\u003cformat\\\u003e            | Returns a color object, containing it's values as properties     | `.rgb` = `{ r: 255, g: 100, b: 0 }`                                    |\n| .\\\u003cformat\\\u003e.toString() | Returns a string representation of the color in the given format | `.rgb.toString()` = `rgb(255, 100, 0)`                                 |\n| .update\\\u003cformat\\\u003e(...) | Updates specific properties in the given format                  | `.updateRgb({ r: 0 }).rgb` = `{ r: 0, g: 100, b: 0 }`                  |\n| .options               | Returns the current options. (See [Options](#options))           | `.options` = `{ spaced: true, ... }`                                   |\n| .updateOptions(...)    | Updates the given options. (See [Options](#options))             | `.updateOptions({ spaced: false }).options` = `{ spaced: false, ... }` |\n\n### Options\n\n| Option            | Description                                          | Default value |\n| ----------------- | ---------------------------------------------------- | ------------- |\n| angleUnit         | Angle unit                                           | `'none'`      |\n| cacheInput        | Persist last input                                   | `false`       |\n| legacy            | Legacy mode                                          | `true`        |\n| limitToColorSpace | Clamp colors to format space                         | `true`        |\n| maxDigits         | Round color values to a max number of decimal places | `2`           |\n| spaced            | Space between string color values                    | `false`       |\n\n### Formats specification\n\nHere is a table with the standard presentations of each color format property (this follows closely the [W3C standards](https://www.w3.org/TR/css-color-4/))\n\n| Color Format/s       | Property/ies        | Presentations                                                                | Examples                                           |\n| -------------------- | ------------------- | ---------------------------------------------------------------------------- | -------------------------------------------------- |\n| _ALL FORMATS_        | alpha (default = 1) | Number/String 0-1, String Percentage                                         | 0.5, '0.5', '50%'                                  |\n| RGB                  | r, g, b             | Number/String 0-255, String Percentage                                       | 123, '123', '50%'                                  |\n| A98                  | r, g, b             | Number/String 0-1                                                            | 0.5, '0.5'                                         |\n| HSL, HWB, LCH, OKLCH | h                   | Number/String 0-360, String Percentage, String Grad, String Rad, String Turn | 180, '180', '50%', '200grad', '3.14rad', '0.5turn' |\n| HSL                  | s, l                | Number/String 0-1, String Percentage                                         | 0.5, '0.5', '50%'                                  |\n| HWB                  | w, b                | Number/String 0-1, String Percentage                                         | 0.5, '0.5', '50%'                                  |\n| LAB, LCH             | l                   | Number/String 0-100, String Percentage                                       | 50, '50', '50%'                                    |\n| LAB                  | a, b                | Number/String -125 - 125, String Percentage -100% - 100%                     | -62.5, '-62.5', '-50%'                             |\n| LCH                  | c                   | Number/String 0-150, String Percentage                                       | 75, '75', '50%'                                    |\n| OKLAB, OKLCH         | l                   | Number/String 0-1, String Percentage                                         | 0.5, '0.5', '50%'                                  |\n| OKLAB                | a, b                | Number/String -0.4 - 0.4, String Percentage -100% - 100%                     | -0.2, '-0.2', '-50%'                               |\n| OKLCH                | c                   | Number/String 0-0.4, String Percentage                                       | 0.2, '0.2', '50%'                                  |\n| CMYK                 | c, m, y, k          | Number/String 0-1, String Percentage                                         | 0.5, '0.5', '50%'                                  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeronimoek%2Fcolor-translate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeronimoek%2Fcolor-translate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeronimoek%2Fcolor-translate/lists"}