{"id":22221932,"url":"https://github.com/fabiospampinato/khroma","last_synced_at":"2025-04-05T20:08:59.011Z","repository":{"id":47231652,"uuid":"202878930","full_name":"fabiospampinato/khroma","owner":"fabiospampinato","description":"A collection of functions for manipulating CSS colors, inspired by SASS.","archived":false,"fork":false,"pushed_at":"2024-05-28T07:25:59.000Z","size":242,"stargazers_count":40,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T19:06:17.239Z","etag":null,"topics":["color","css","hex","hsl","manipulation","rgb","sass"],"latest_commit_sha":null,"homepage":"","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/fabiospampinato.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":"fabiospampinato","custom":"https://www.paypal.me/fabiospampinato"}},"created_at":"2019-08-17T12:35:33.000Z","updated_at":"2025-03-02T10:54:32.000Z","dependencies_parsed_at":"2024-06-18T14:06:35.579Z","dependency_job_id":"83a4ecec-3cd0-4b8f-9a6c-fee932ce782d","html_url":"https://github.com/fabiospampinato/khroma","commit_stats":{"total_commits":88,"total_committers":4,"mean_commits":22.0,"dds":"0.34090909090909094","last_synced_commit":"4968165afb0d3d09be66497e7985a34f7bfe6d42"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiospampinato%2Fkhroma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiospampinato%2Fkhroma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiospampinato%2Fkhroma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabiospampinato%2Fkhroma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fabiospampinato","download_url":"https://codeload.github.com/fabiospampinato/khroma/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393572,"owners_count":20931813,"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":["color","css","hex","hsl","manipulation","rgb","sass"],"created_at":"2024-12-02T23:16:15.149Z","updated_at":"2025-04-05T20:08:58.992Z","avatar_url":"https://github.com/fabiospampinato.png","language":"JavaScript","funding_links":["https://github.com/sponsors/fabiospampinato","https://www.paypal.me/fabiospampinato"],"categories":[],"sub_categories":[],"readme":"# [Khrôma](https://en.wiktionary.org/wiki/%CF%87%CF%81%E1%BF%B6%CE%BC%CE%B1)\n\nA collection of functions for manipulating CSS colors, inspired by SASS.\n\n## Features\n\n- **Small**: the entire library weighs ~5kb (min + gzip) and has no dependencies.\n- **Fast**: in our benchmark suite functions are executed at ~0.0025ms per call on a mid-2014 MBP.\n- **Flexible**: All valid CSS colors are supported.\n- **SASS-like**: if you're familiar with SASS you should feel right at home.\n\n## Install\n\n```sh\nnpm install --save khroma\n```\n\n## Usage\n\n```ts\nimport {red, isDark, darken, change} from 'khroma';\n\nred ( '#ffffff' ); // =\u003e 255\nisDark ( 'white' ); // =\u003e false\ndarken ( 'hsl(0, 5%, 100%)', 50 ); // =\u003e 'hsl(0, 5%, 50%)'\nchange ( 'rgb(255, 255, 255)', { a: 0.5 } ); // =\u003e 'rgba(255, 255, 255, 0.5)'\n```\n\n## Functions\n\nThese are all the provided functions, for each of them below you can find a short description, its interface and examples.\n\n| Create        | Convert                 | Get \u003csub\u003echannel\u003c/sub\u003e    | Get \u003csub\u003emore\u003c/sub\u003e             | Edit \u003csub\u003echannel\u003c/sub\u003e           | Edit \u003csub\u003emore\u003c/sub\u003e |\n| ------------- | ----------------------- | ------------------------- | ------------------------------- | --------------------------------- | -------------------- |\n| [hex](#hex)   | [toKeyword](#tokeyword) | [channel](#channel)       | [contrast](#contrast)           | [saturate](#saturate)             | [adjust](#adjust)    |\n| [rgb](#rgb)   | [toHex](#tohex)         | [red](#red)               | [luminance](#luminance)         | [desaturate](#desaturate)         | [change](#change)    |\n| [rgba](#rgba) | [toRgba](#torgba)       | [green](#green)           | [isDark](#isdark)               | [lighten](#lighten)               | [invert](#invert)    |\n| [hsl](#hsl)   | [toHsla](#tohsla)       | [blue](#blue)             | [isLight](#islight)             | [darken](#darken)                 | [mix](#mix)          |\n| [hsla](#hsla) |                         | [hue](#hue)               | [isTransparent](#istransparent) | [opacify](#opacify)               | [scale](#scale)      |\n|               |                         | [saturation](#saturation) | [isValid](#isvalid)             | [fadeIn](#fadein)                 |                      |\n|               |                         | [lightness](#lightness)   |                                 | [transparentize](#transparentize) |                      |\n|               |                         | [alpha](#alpha)           |                                 | [fadeOut](#fadeout)               |                      |\n|               |                         | [opacity](#opacity)       |                                 | [rgba](#rgba-alt) (alt)           |                      |\n|               |                         |                           |                                 | [complement](#complement)         |                      |\n|               |                         |                           |                                 | [grayscale](#grayscale)           |                      |\n\n### Create\n\nThese functions create a new color given the provided channels.\n\n#### `hex`\n\nAlias for [`rgba`](#rgba).\n\n#### `rgb`\n\nAlias for [`rgba`](#rgba).\n\n#### `rgba`\n\nCreates a new color given its rgba channels, the alpha channel is optional.\n\n```ts\nfunction rgba ( r: string, g: number, b: number, a: number = 1 ): string;\n```\n\n```ts\nrgba ( 255, 204, 0 ); // =\u003e '#ffcc00'\nrgba ( 255, 204, 0, 0.5 ); // =\u003e 'rgba(255, 204, 0, 0.5)'\n```\n\n#### `hsl`\n\nAlias for [`hsla`](#hsla).\n\n#### `hsla`\n\nCreates a new color given its hsla channels, the alpha channel is optional.\n\n```ts\nfunction hsla ( h: number, s: number, l: number, a: number = 1 ): string;\n```\n\n```ts\nhsla ( 0, 50, 100 ); // =\u003e 'hsl(0, 50%, 100%)'\nhsla ( 10, 50, 100, 0.5 ); // =\u003e 'hsla(10, 50%, 100%, 0.5)'\n```\n\n### Convert\n\nThese functions convert supported colors to a specific format.\n\n#### `toKeyword`\n\nConvert a color to the keyword format, when possible.\n\n```ts\nfunction toKeyword ( color: string ): string | undefined;\n```\n\n```ts\ntoKeyword ( '#ff0000' ); // =\u003e 'red'\ntoKeyword ( '#ffcc00' ); // =\u003e undefined\n```\n\n#### `toHex`\n\nConvert a color to the HEX format.\n\n```ts\nfunction toHex ( color: string ): string;\n```\n\n```ts\ntoHex ( 'red' ); // =\u003e '#ff0000'\ntoHex ( '#ff0000' ); // =\u003e '#ff0000'\n```\n\n#### `toRgba`\n\nConvert a color to the RGBA format.\n\n```ts\nfunction toRgba ( color: string ): string;\n```\n\n```ts\ntoRgba ( 'red' ); // =\u003e 'rgb(255, 0, 0)'\ntoRgba ( '#ff0000' ); // =\u003e 'rgb(255, 0, 0)'\ntoRgba ( '#00000088' ); // =\u003e 'rgba(0, 0, 0, 0.5333333333)'\n```\n\n#### `toHsla`\n\nConvert a color to the HSLA format.\n\n```ts\nfunction toHsla ( color: string ): string;\n```\n\n```ts\ntoHsla ( 'red' ); // =\u003e 'hsl(0, 100%, 50%)'\ntoHsla ( '#ff0000' ); // =\u003e 'hsl(0, 100%, 50%)'\ntoHsla ( 'rgb(255, 0, 0)' ); // =\u003e 'hsl(0, 100%, 50%)'\n```\n\n### Get \u003csub\u003echannel\u003c/sub\u003e\n\nThese functions get a single channel from the provided color.\n\n#### `channel`\n\nGets any single channel of the color.\n\n```ts\nfunction channel ( color: string, channel: 'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'a' ): number;\n```\n\n```ts\nchannel ( '#ffcc00', 'r' ); // =\u003e 255\nchannel ( '#ffcc00', 'h' ); // =\u003e 48\nchannel ( '#ffcc00', 'a' ); // =\u003e 1\n```\n\n#### `red`\n\nGets the red channel of the color.\n\n```ts\nfunction red ( color: string ): number;\n```\n\n```ts\nred ( '#ffcc00' ); // =\u003e 255\n```\n\n#### `green`\n\nGets the green channel of the color.\n\n```ts\nfunction green ( color: string ): number;\n```\n\n```ts\ngreen ( '#ffcc00' ); // =\u003e 204\n```\n\n#### `blue`\n\nGets the blue channel of the color.\n\n```ts\nfunction blue ( color: string ): number;\n```\n\n```ts\nblue ( '#ffcc00' ); // =\u003e 0\n```\n\n#### `hue`\n\nGets the hue channel of the color.\n\n```ts\nfunction hue ( color: string ): number;\n```\n\n```ts\nhue ( 'hsl(0, 50%, 100%)' ); // =\u003e 0\n```\n\n#### `saturation`\n\nGets the saturation channel of the color.\n\n```ts\nfunction saturation ( color: string ): number;\n```\n\n```ts\nsaturation ( 'hsl(0, 50%, 100%)' ); // =\u003e 50\n```\n\n#### `lightness`\n\nGets the lightness channel of the color.\n\n```ts\nfunction lightness ( color: string ): number;\n```\n\n```ts\nlightness ( 'hsl(0, 50%, 100%)' ); // =\u003e 100\n```\n\n#### `alpha`\n\nGets the alpha channel of the color.\n\n```ts\nfunction alpha ( color: string ): number;\n```\n\n```ts\nalpha ( '#ffcc00' ); // =\u003e 1\nalpha ( 'rgba(255, 205, 0, 0.5)' ); // =\u003e 0.5\n```\n\n#### `opacity`\n\nAlias for [`alpha`](#alpha).\n\n### Get \u003csub\u003emore\u003c/sub\u003e\n\nThese functions get some other information from the provided color.\n\n#### `contrast`\n\nGets the contrast in luminance between two colors.\n\nContrast values go between 1 and 10. 1 means same color, \u003e= 4 means decent contrast, \u003e= 7 means great contrast, 10 means great contrast.\n\n```ts\nfunction contrast ( color1: string, color2: string ): number;\n```\n\n```ts\ncontrast ( '#000000', '#000000' ); // =\u003e 1\ncontrast ( '#000000', '#ffffff' ); // =\u003e 10\ncontrast ( '#888888', '#ffffff' ); // =\u003e 4.0617165366\n```\n\n#### `luminance`\n\nGets the [relative luminance](https://en.wikipedia.org/wiki/Relative_luminance) of the color.\n\n```ts\nfunction luminance ( color: string ): number;\n```\n\n```ts\nluminance ( 'black' ); // =\u003e 0\nluminance ( 'white' ); // =\u003e 1\nluminance ( '#ffcc00' ); // =\u003e 0.6444573127\n```\n\n#### `isDark`\n\nChecks if the provided color is a dark color.\n\n```ts\nfunction isDark ( color: string ): number;\n```\n\n```ts\nisDark ( 'black' ); // =\u003e true\nisDark ( 'white' ); // =\u003e false\nisDark ( '#ffcc00' ); // =\u003e false\n```\n\n#### `isLight`\n\nChecks if the provided color is a light color.\n\n```ts\nfunction isLight ( color: string ): number;\n```\n\n```ts\nisLight ( 'black' ); // =\u003e false\nisLight ( 'white' ); // =\u003e true\nisLight ( '#ffcc00' ); // =\u003e true\n```\n\n#### `isTransparent`\n\nChecks if the provided color is a transparent color.\n\n```ts\nfunction isTransparent ( color: string ): boolean;\n```\n\n```ts\nisTransparent ( 'transparent' ); // =\u003e true\nisTransparent ( '#ffcc0000' ); // =\u003e true\nisTransparent ( '#ffcc00' ); // =\u003e false\n```\n\n#### `isValid`\n\nChecks if the provided color is a valid color.\n\n```ts\nfunction isLight ( color: string ): boolean;\n```\n\n```ts\nisValid ( 'black' ); // =\u003e true\nisValid ( '#ffcc00' ); // =\u003e true\nisValid ( '#wtf' ); // =\u003e false\n```\n\n### Edit \u003csub\u003echannel\u003c/sub\u003e\n\nThese functions change a single channel of the provided color.\n\n#### `saturate`\n\nIncreases the saturation channel of the color.\n\n```ts\nfunction saturate ( color: string, amount: number ): string;\n```\n\n```ts\nsaturate ( 'hsl(0, 50%, 50%)', 25 ); // =\u003e 'hsl(0, 75%, 50%)'\n```\n\n#### `desaturate`\n\nDecreases the saturation channel of the color.\n\n```ts\nfunction desaturate ( color: string, amount: number ): string;\n```\n\n```ts\ndesaturate ( 'hsl(0, 50%, 50%)', 25 ); // =\u003e 'hsl(0, 25%, 50%)'\n```\n\n#### `lighten`\n\nIncreases the lightness channel of the color.\n\n```ts\nfunction lighten ( color: string, amount: number ): string;\n```\n\n```ts\nlighten ( 'hsl(0, 50%, 50%)', 25 ); // =\u003e 'hsl(0, 50%, 75%)'\n```\n\n#### `darken`\n\nDecreases the lightness channel of the color.\n\n```ts\nfunction darken ( color: string, amount: number ): string;\n```\n\n```ts\ndarken ( 'hsl(0, 50%, 50%)', 25 ); // =\u003e 'hsl(0, 50%, 25%)'\n```\n\n#### `opacify`\n\nIncreases the opacity channel of the color.\n\n```ts\nfunction opacify ( color: string, amount: number ): string;\n```\n\n```ts\nopacify ( 'rgba(255, 204, 0, 0.5)', 0.25 ); // =\u003e 'rgba(255, 204, 0, 0.75)'\n```\n\n#### `fadeIn`\n\nAlias for [`opacify`](#opacify).\n\n#### `transparentize`\n\nDecreases the opacity channel of the color.\n\n```ts\nfunction transparentize ( color: string, amount: number ): string;\n```\n\n```ts\ntransparentize ( 'rgba(255, 204, 0, 0.5)', 0.25 ); // =\u003e 'rgba(255, 204, 0, 0.25)'\n```\n\n#### `fadeOut`\n\nAlias for [`transparentize`](#transparentize).\n\n#### `rgba` (alt)\n\nSets a new value for the opacity channel.\n\n```ts\nfunction rgba ( color: string, amount: number ): string;\n```\n\n```ts\nrgba ( 'rgba(255, 204, 0, 0.5)', 0.1 ); // =\u003e 'rgba(255, 204, 0, 0.1)'\n```\n\n#### `complement`\n\nGets the complement of the color, rotating its hue channel by 180 degrees.\n\n```ts\nfunction complement ( color: string ): string;\n```\n\n```ts\ncomplement ( '#ffcc00' ); // =\u003e 'hsl(228, 100%, 50%)'\n```\n\n#### `grayscale`\n\nGets the grayscale version of the color, setting its saturation to 0.\n\n```ts\nfunction grayscale ( color: string ): string;\n```\n\n```ts\ngrayscale ( '#ffcc00' ); // =\u003e 'hsl(48, 0%, 50%)'\n```\n\n### Edit \u003csub\u003emore\u003c/sub\u003e\n\nThese functions can/will change more than a single channel at once of the provided color.\n\n#### `adjust`\n\nIncreases or decreases the value of any channel of the color.\n\n```ts\nfunction adjust ( color: string, channels: Record\u003c'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'a', number\u003e ): string;\n```\n\n```ts\nadjust ( '#ffcc00', { r: -10, g: 200 } ); // =\u003e '#f5ff00'\nadjust ( '#ffcc00', { a: -0.5 } ); // =\u003e 'rgba(255, 204, 0, 0.5)'\nadjust ( '#ffcc00', { h: 50, l: -30 } ); // =\u003e 'hsl(98, 100%, 20%)'\n```\n\n#### `change`\n\nSets a new value for any channel of the color.\n\n```ts\nfunction change ( color: string, channels: Record\u003c'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'a', number\u003e ): string;\n```\n\n```ts\nchange ( '#ffcc00', { r: 10, g: 200 } ); // =\u003e '#0ac800'\nchange ( '#ffcc00', { a: 0.5 } ); // =\u003e 'rgba(255, 204, 0, 0.5)'\nchange ( '#ffcc00', { h: 50, l: 30 } ); // =\u003e 'hsl(50, 100%, 30%)'\n```\n\n#### `invert`\n\nGets the inverse of the color.\n\n```ts\nfunction invert ( color: string, weight: number = 100 ): string;\n```\n\n```ts\ninvert ( '#ffcc00' ); // =\u003e '#0033ff'\ninvert ( '#ffcc00', 50 ); // =\u003e '#808080'\n```\n\n#### `mix`\n\nMixes two colors together.\n\n```ts\nfunction mix ( color1: string, color2: string, weight: number = 50 ): string;\n```\n\n```ts\nmix ( 'red', 'blue' ); // =\u003e '#800080'\nmix ( 'red', 'blue', 15 ); // =\u003e '#2600d9'\n```\n\n#### `scale`\n\nScales any channel of the color.\n\n```ts\nfunction scale ( color: string, channels: Record\u003c'r' | 'g' | 'b' | 'h' | 's' | 'l' | 'a', number\u003e ): string;\n```\n\n```ts\nscale ( '#ffcc00', { r: -50, b: 10 } ); // =\u003e '#80cc1a'\n```\n\n## License\n\nMIT © Fabio Spampinato, Andrew Maney\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabiospampinato%2Fkhroma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabiospampinato%2Fkhroma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabiospampinato%2Fkhroma/lists"}