{"id":13447073,"url":"https://github.com/brehaut/color-js","last_synced_at":"2025-03-21T17:30:41.141Z","repository":{"id":44617674,"uuid":"130346","full_name":"brehaut/color-js","owner":"brehaut","description":"A color management API for javascript","archived":true,"fork":false,"pushed_at":"2021-07-05T20:38:01.000Z","size":255,"stargazers_count":830,"open_issues_count":3,"forks_count":92,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-19T02:06:20.193Z","etag":null,"topics":["color","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brehaut.png","metadata":{"files":{"readme":"README.markdown","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}},"created_at":"2009-02-16T21:08:12.000Z","updated_at":"2025-03-05T09:27:37.000Z","dependencies_parsed_at":"2022-08-30T16:11:29.871Z","dependency_job_id":null,"html_url":"https://github.com/brehaut/color-js","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brehaut%2Fcolor-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brehaut%2Fcolor-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brehaut%2Fcolor-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brehaut%2Fcolor-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brehaut","download_url":"https://codeload.github.com/brehaut/color-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244838016,"owners_count":20518766,"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","javascript"],"created_at":"2024-07-31T05:01:07.465Z","updated_at":"2025-03-21T17:30:40.796Z","avatar_url":"https://github.com/brehaut.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# *Notice:* No longer maintained\n\nThis library was created during a time where color support in CSS was minimal, and has since been superceded by both newer libraries and CSS itself. As of 2021 [colorjs.io](https://colorjs.io) is a project aiming to produce an correct and comprehensive color library for javascript that is colorspace aware and built on color science. \n\n*****\n\n# Readme\n\n\u003ca href=\"https://raw.github.com/brehaut/color-js/master/color.js\"\u003eColor.js\u003c/a\u003e provides an API to do simple color management in javascript. Color objects provide methods to do a number of common, useful operations independent of the underlying color model they need. \n\nThe library supports RGB, HSV and HSL color models, along with alpha channel on all of them. CSS string representations of colors are supported for convenience. If you need colorspace management that correlates to human perception rather than display technology, [colorspace.js](http://boronine.com/colorspaces.js/) looks like an excellent library.\n\nColor objects are always immutable; all operations on them return new objects.\n\nThis API is designed for correctness and clarity first, but operates at the expense of some performance. If you need raw performance look for a library that forces you to do the cloning and conversion yourself, rather than implicitly as this one does.\n\n\u003e **Note:** In 2017 it's quite possible that you don't need this library, particularly for client side tasks; many use-cases can simply be achieved using CSS RGB, HSV, and HSL color syntaxes.\n\n# Using the library \n\nOnce you have included the library in your page, you can access the public namespace `net.brehaut` (reverse DNS scheme). The only export from `color.js` is the `Color` factory function. You may wish \nto import this into your local scope, eg:\n  \n    var Color = net.brehaut.Color;\n\nYou can use the library in a CommonJS environment, too:\n\n    var Color = require('./color').Color;\n\n`Color` will create a new object for you from an object, string, or array. Note that this is a factory function, _not_ a constructor. eg:\n\n    var Green = Color(\"#00FF00\");\n    var Red = Color({hue: 0, saturation: 1, value: 1});\n    var Blue = Color(\"rgb(0,0,255)\");\n    var Cyan = Color({hue: 180, saturation: 1, lightness: 0.5});\n    var Magenta = Color(\"hsl(300, 100%, 50%)\");\n    var Yellow = Color([255,255,0]);\n\nEach method on a color either returns a new color (or set of colors) or returns a value. You can chain manipulation methods together as much as you need. Eg\n\n    var C1 = Red.shiftHue(45).darkenByRatio(0.5).desaturateByAmount(0.1);\n\nA common use case for this code is to set page elements colors to calculated values, the method `toCSS` provides a string for you to use. eg:\n\n    document.getElementById('myElement').style.backgroundColor = C1.toCSS();\n\n# Methods\n\nThere are three sorts of operations available on color objects; accessor methods (eg `getHue`/`setHue`), methods that manipulate the color and return a new object (eh `shiftHue`)  or methods that return arrays of colors (eg, `splitComplementaryScheme`), and methods that do conversion and construction (eg `toCSS`).\n\nAll values are a float from 0 to 1, with the exception of _hue_ which is a degree (from 0 to 360). \n\n## Notes on terminology\n\n- A ratio multiplies the existing property by the ratio.\n- An amount is just added directly to the existing value.\n\nIf you have a saturation of 0.7 and you apply a *ratio* of 0.5 the new color has a saturation of 0.35. If you then add an *amount* of 0.15 to that color’s saturation the final color will have a saturation of 0.5.\n\n### Accessor Methods\nThese methods are automatically generated by the API and are used to access the properties of the object. It is advisable to use these methods than try to access the property directly as the API makes no guarantees about the specific model members available. \n\n * `getRed()` : Number\n * `setRed( newRed )` : Color\n * `getGreen()`: Number \n * `setGreen( newGreen )` : Color\n * `getBlue()` : Number\n * `setBlue( newBlue )`: Color\n * `getHue()` : Number (degrees)\n * `setHue( newHue )` : color\n * `getSaturation()` : Number\n * `setSaturation( newSaturation )` : Color\n * `getValue()` : Number\n * `setValue( newValue )` : Color\n * `getLightness()` : Number\n * `setLightness( newValue )` : Color\n * `getLuminance()` : Number --- returns a number between 0 and 1 that represents how bright this color appears on a conventional monitor.\n * `getAlpha()` : Number\n * `setAlpha( newAlpha )` : Number \n\n### Color Methods\n\nThe following methods all return a new color.\n\n * `shiftHue( degrees )` : Color\n * `darkenByAmount( amount )` : Color\n * `darkenByRatio( ratio )` : Color\n * `lightenByAmount( amount )` : Color\n * `lightenByRatio( amount )` : Color\n * `devalueByAmount( amount )` : Color\n * `devalueByRatio( ratio )` : Color\n * `valueByAmount( amount )` : Color\n * `valueByRatio( amount )` : Color\n * `desaturateByAmount( amount )` : Color\n * `desaturateByRatio( ratio )` : Color\n * `saturateByAmount( amount )` : Color\n * `saturateByRatio( ratio )` : Color\n * `blend( color , alpha )` : Color --- returns a new color that is self blended with alpha of `color`. eg `black.blend ( white , 0 )` is black, `black.blend ( white , 0.5 )` is grey and `black.blend ( white , 1 )` is white.\n\nThe following methods return a list of colors\n\n * `schemeFromDegrees( listOfdegrees )` : List of Colors \n * `complementaryScheme( )` : List of Colors \n * `splitComplementaryScheme( )` : List of Colors \n * `splitComplementaryCWScheme( )` : List of Colors \n * `splitComplementaryCCWScheme( )` : List of Colors \n * `triadicScheme( )` : List of Colors \n * `clashScheme( )` : List of Colors \n * `tetradicScheme( )` : List of Colors \n * `fourToneCWScheme( )` : List of Colors \n * `fourToneCCWScheme( )` : List of Colors \n * `fiveToneAScheme( )` : List of Colors\n * `fiveToneBScheme( )` : List of Colors\n * `fiveToneCScheme( )` : List of Colors\n * `fiveToneDScheme( )` : List of Colors\n * `fiveToneEScheme( )` : List of Colors   \n * `sixToneCWScheme( )` : List of Colors \n * `sixToneCCWScheme( )` : List of Colors \n * `neutralScheme( )` : List of Colors \n * `analogousScheme( )` : List of Colors \n\n### Conversion and Construction\n\n * `fromObject( o )` : Color --- `o` is an object with values from a color model, a css string, or an RGB array.\n * `toCSS([bytesPerChannel])` : String --- css hexdecimal representation. `bytesPerChannel` defaults to 2\n * `toString()` : String --- returns CSS representation\n * `toHSV()` : Color\n * `toRGB()` : Color\n * `toHSL()` : Color\n\n## Type definitions\n\nUsers of [TypeScript](http://typescriptlang.org/) can find type definitions in `color.d.ts`.\n\n\n# Demo\n* [Using color-js with Angular 2](https://plnkr.co:443/Y7scVM)\n\n\n# Changes\n\n\u003cdl\u003e\n  \u003cdt\u003e\u003cem\u003eJan 24, 2017\u003c/em\u003e\u003c/dt\u003e\n  \u003cdd\u003eVersion 1.0.4: Changed type declaration for using with Angular 2\u003c/dd\u003e\n\n  \u003cdt\u003e\u003cem\u003eMay 12, 2015\u003c/em\u003e\u003c/dt\u003e\n  \u003cdd\u003eVersion 1.0.2: Add package.json for NPM publishing.\u003c/dd\u003e\n\n  \u003cdt\u003e\u003cem\u003eMay 3, 2013\u003c/em\u003e\u003c/dt\u003e\n  \u003cdd\u003eVersion 1.0.1: Bug fix for alpha support in achromatic HSV to RGB.\u003c/dd\u003e\n  \n  \u003cdt\u003e\u003cem\u003eMay 1, 2013\u003c/em\u003e\u003c/dt\u003e\n  \u003cdd\u003eVersion 1.0\n    \u003cul\u003e\n      \u003cli\u003eAlpha channels are supported on all color models.\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/dd\u003e\n    \n  \u003cdt\u003e\u003cem\u003eApril 16, 2013\u003c/em\u003e\u003c/dt\u003e\n  \u003cdd\u003eVersion 0.6\n    \u003cul\u003e\n      \u003cli\u003efromArray RGB factory added. This factory takes an array of three RGB values as ints from 0-255.\u003c/li\u003e\n   \u003c/ul\u003e\n\u003c/dd\u003e    \n    \n  \u003cdt\u003e\u003cem\u003eMarch 4, 2013\u003c/em\u003e\u003c/dt\u003e\n  \u003cdd\u003eVersion 0.5\n    \u003cul\u003e\n      \u003cli\u003eFixes bug where \u003ccode\u003elightenBy…/darkenBy…\u003c/code\u003e used \u003ccode\u003evalue\u003c/code\u003e property from \u003ccode\u003eHSV\u003c/code\u003e model, despite \u003ccode\u003eHSL\u003c/code\u003e now being supported.\u003c/li\u003e\n      \u003cli\u003e\u003ccode\u003evalueBy…/devalueBy…\u003c/code\u003e methods added. These behave like the old \u003ccode\u003elightenBy…/darkenBy…\u003c/code\u003e methods.\u003c/li\u003e\n      \u003cli\u003eModule function now uses strict mode.\u003c/li\u003e \n    \u003c/ul\u003e\n  \u003c/dd\u003e\n    \n  \u003cdt\u003e\u003cem\u003eJuly 24, 2010\u003c/em\u003e\u003c/dt\u003e\n  \u003cdd\u003eVersion 0.4\n    \u003cul\u003e\n      \u003cli\u003eSupport for HSL color model\u003c/li\u003e\n      \u003cli\u003eCommon.JS module support\u003c/li\u003e\n      \u003cli\u003eMinor bug fixes\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/dd\u003e\n\n    \n \u003cdt\u003e\u003cem\u003eJanuary 14, 2008\u003c/em\u003e\u003c/dt\u003e\n \u003cdd\u003eVersion 0.3 released\n   \u003cul\u003e\n     \u003cli\u003e\u003ca href=\"http://www.jslint.com\"\u003eJSLint\u003c/a\u003e is now happy with it.\u003c/li\u003e\n     \u003cli\u003eApprox 25% faster by caching factory constructor functions \u0026mdash; effectively unrolls \u003ccode\u003eobject\u003c/code\u003e\u003c/li\u003e\n   \u003c/ul\u003e\n \u003c/dd\u003e\n\n \u003cdt\u003e\u003cem\u003eJanuary 13, 2008\u003c/em\u003e\u003c/dt\u003e\n \u003cdd\u003eVersion 0.2 released \n   \u003cul\u003e\n     \u003cli\u003eCode tided up, now with comments\u003c/li\u003e\n     \u003cli\u003eDocs written\u003c/li\u003e\n     \u003cli\u003e\n           Small edges cases implemented, eg, a black Color is returned if invalid arguments are \n           passed\n     \u003c/li\u003e\n     \u003cli\u003eCSS named colors are supported\u003c/li\u003e\n   \u003c/ul\u003e\n \u003c/dd\u003e\n\u003c/dl\u003e\n\u003c/dl\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrehaut%2Fcolor-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrehaut%2Fcolor-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrehaut%2Fcolor-js/lists"}