{"id":17267137,"url":"https://github.com/stevinz/iris","last_synced_at":"2025-10-22T21:40:44.733Z","repository":{"id":63493505,"uuid":"452114786","full_name":"stevinz/iris","owner":"stevinz","description":"Color library with support for RGB, RYB, HSL color models and RYB hue shifting.","archived":false,"fork":false,"pushed_at":"2024-05-09T23:24:25.000Z","size":89,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T22:07:23.420Z","etag":null,"topics":["color-conversion","color-scheme","color-wheel","colors","hsl","hue-shift","javascript-library","rgb","rgb-to-hex","ryb"],"latest_commit_sha":null,"homepage":"https://stevinz.github.io/iris/","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/stevinz.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":"2022-01-26T02:29:56.000Z","updated_at":"2024-05-15T01:47:25.000Z","dependencies_parsed_at":"2024-03-08T06:26:08.380Z","dependency_job_id":"4358c3ea-aefa-4a61-9207-4807d2b40d3d","html_url":"https://github.com/stevinz/iris","commit_stats":null,"previous_names":["onsightengine/iris","stevinz/iris"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevinz%2Firis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevinz%2Firis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevinz%2Firis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevinz%2Firis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevinz","download_url":"https://codeload.github.com/stevinz/iris/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248846421,"owners_count":21170960,"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-conversion","color-scheme","color-wheel","colors","hsl","hue-shift","javascript-library","rgb","rgb-to-hex","ryb"],"created_at":"2024-10-15T08:09:18.089Z","updated_at":"2025-10-22T21:40:44.678Z","avatar_url":"https://github.com/stevinz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Iris\n\nSmall, fast, dependency free JavaScript color library with support for the RGB, RYB, and HSL color models and easy interaction with HTML, CSS, and third party frameworks.\n\nFeatures\n- Internal calls don't allocate memory, reducing garbage collector activity.\n- Color conversion between color models.\n- Support for color mixing and color alteration (mix, add, subtract, brighten, darken, grayscale, etc.)\n- Hue shifting around the more traditional artistic RYB (red, yellow, blue) color wheel, creating much more natural complementary colors and intuitive palettes, see [online example](https://stevinz.github.io/iris/).\n- Works alongside other popular frameworks, such as [Three.js](https://threejs.org/). See [example](#Three-Example) below of passing data between `Iris` and `THREE.Color`.\n\n\u003cbr\u003e\n\n## Installation\n\n- Option 1: Copy file `Iris.js` to project, import from file...\n\n```javascript\nimport { Iris } from 'Iris.js';\n```\n\n- Option 2: Install from [npm](https://www.npmjs.com/package/@scidian/iris), import from '@scidian/iris'...\n```\nnpm install @scidian/iris\n```\n```javascript\nimport { Iris } from '@scidian/iris';\n```\n\n- Option 3: Import directly from CDN...\n```javascript\nimport { Iris } from 'https://unpkg.com/@scidian/iris/build/iris.module.js';\n```\n\n\u003cbr\u003e\n\n#### Iris can be initialized in the following ways\n\n```javascript\nnew Iris();                             // Defaults to white, 0xffffff\nnew Iris(0xff0000);                     // Hexadecimal (0xff0000, i.e. 16711680)\n\nnew Iris(1.0, 0.0, 0.0);                // RGB Values (0.0 to 1.0)\n\nnew Iris(255,   0,   0, 'rgb');         // RGB Values (0 to 255)\nnew Iris(255,   0,   0, 'ryb');         // RYB Values (0 to 255)\nnew Iris(360, 1.0, 0.5, 'hsl');         // HSL Values (H: 0 to 360, SL: 0.0 to 1.0)\n\nnew Iris({ r: 1.0, g: 0.0, b: 0.0 });   // Object, RGB Properties (0.0 to 1.0)\nnew Iris({ r: 1.0, y: 0.0, b: 0.0 });   // Object, RYB Properties (0.0 to 1.0)\nnew Iris({ h: 1.0, s: 1.0, l: 0.5 });   // Object, HSL Properties (0.0 to 1.0)\n\nnew Iris([ 1.0, 0.0, 0.0 ], offset);    // RGB Array (0.0 to 1.0), optional offset\n\nnew Iris('#ff0000');                    // Hex String (also 3 digits: '#f00')\nnew Iris('rgb(255, 0, 0)');             // CSS Color String\nnew Iris('red');                        // X11 Color Name\n\nnew Iris(myIrisColor);                  // Copy from Iris Color Object\nnew Iris(myThreeColor);                 // Copy from Three.js Color Object\n```\n\n\u003cbr\u003e\n\n#### Color alterations support chaining\n\n```javascript\nconst color = new Iris(0xff0000);\n\nconsole.log(color.rybRotateHue(270).darken(0.5).hexString().toUpperCase());\n```\n* _output_\n\n    \u003e #2E007F\n\n\u003cbr\u003e\n\n#### Hue Shifting\n```javascript\nconst color = new Iris(0xff0000);\n\n// To find the RYB color wheel complement (opposite) color\nconst complement = new Iris.set(color).rybComplementary();\n\n// To adjust hue a specific number of degrees (0 to 360) around the RYB color wheel\nconst tetrad1 = new Iris.set(color).rybRotateHue(90);\nconst tetrad2 = new Iris.set(color).rybRotateHue(270);\n```\n\n\u003cbr\u003e\n\n#### Example usage alongside [Three.js](https://threejs.org/) \u003ca name=\"Three-Example\"\u003e\u003c/a\u003e\n\n```javascript\n// Some possible ways to initialize Iris using THREE.Color\nconst eyeColor = new Iris(threeColor);\nconst eyeColor = new Iris(threeColor.getHex());\nconst eyeColor = new Iris(threeColor.toArray());\n\n// Some possible ways to initialize THREE.Color using Iris\nconst threeColor = new THREE.Color(eyeColor);\nconst threeColor = new THREE.Color(eyeColor.hex());\nconst threeColor = new THREE.Color(eyeColor.hexString());\n\n// Some possible ways to copy the values of the THREE.Color back to Iris\neyeColor.copy(threeColor);\neyeColor.set(threeColor.getHex());\neyeColor.setRGBF(threeColor.r, threeColor.g, threeColor.b);\n\n// Some possible ways to copy the values of the Iris back to THREE.Color\nthreeColor.copy(eyeColor);\nthreeColor.setHex(eyeColor.hex());\nthreeColor.setRGB(eyeColor.r, eyeColor.g, eyeColor.b);\n```\n\n\u003cbr\u003e\n\n# Properties\n\n### **.[r]()** : Float\nRed channel value between 0.0 and 1.0, default is 1.\n\n### **.[g]()** : Float\nGreen channel value between 0.0 and 1.0, default is 1.\n\n### **.[b]()** : Float\nBlue channel value between 0.0 and 1.0, default is 1.\n\n\u003cbr\u003e\n\n# Copy / Clone\n\n### **.[copy]()** ( colorObject : Iris or THREE.Color ) ( ) : this\nCopies the r, g, b properties from **colorObject**. This Object can be any type as long as it has r, g, b properties containing numeric values ranging from 0.0 to 1.0.\n\n### **.[clone]()** ( ) : Iris\nReturns a new Iris Object with the same color value as this Iris Object.\n\n\u003cbr\u003e\n\n# Assignment\n\n### **.[set]()** ( r: Number or Object or Array or String, g : Number, b : Number, type : String ) : this\nAll arguments are optional. Sets this color based on a wide range of possible inputs, all options are the same as with the constructor.\n\n### **.[setColorName]()** ( style : String ) : this\nSets this color based on a [X11](http://www.w3.org/TR/css3-color/#svg-color) color name.\n\n### **.[setHex]()** ( hexColor : Integer ) : this\nSets this color based on a hexidecimal / decimal value (i.e. 0xff0000 or 16711680).\n\n### **.[setHSL]()** ( h : Integer, s: Float, l: Float ) : this\nSets this color based on hue (0 to 360), saturation (0.0 to 1.0), and lightness (0.0 to 1.0) values.\n\n### **.[setRandom]()** ( ) : this\nSets this color to a random color.\n\n### **.[setRGB]()** ( r : Number, g: Number, b: Number ) : this\nSets this color based on a red, green, and blue values ranging from 0 to 255.\n\n### **.[setRGBF]()** ( r : Float, g: Float, b: Float ) : this\nSets this color based on a red, green, and blue values ranging from 0.0 to 1.0.\n\n### **.[setRYB]()** ( r : Integer, g: Integer, b: : Integer ) : this\nSets this color based on a red, yellow, and blue values ranging from 0 to 255.\n\n### **.[setScalar]()** ( scalar: Integer ) : this\nSets this colors red, green, and blue values all equal to a singular value ranging from 0 to 255.\n\n### **.[setScalarF]()** ( scalar : Float ) : this\nSets this colors red, green, and blue values all equal to a singular value ranging from 0.0 to 1.0.\n\n### **.[setStyle]()** ( style : String ) : this\nSets this color based on CSS ('rgb(255,0,0)' / 'hsl(360,50%,50%)'), Hex ('#FF0000'), or [X11](http://www.w3.org/TR/css3-color/#svg-color) ('darkred') strings.\n\n\u003cbr\u003e\n\n# Output\n\n### **.[cssString]()** ( alpha : Integer ) : String\nReturns string for use with CSS, for example \"rgb(255, 0, 0)\". Optionally include an **alpha** value from 0 to 255 to be included with the string, for example \"rgba(255, 0, 0, 255)\".\n\n### **.[hex]()** ( ) : Integer\nReturns value as hexidecimal.\n\n### **.[hexString]()** ( hexColor : Integer ) : String\nReturns value as hex string for use in CSS, HTML, etc. Example: \"#ff0000\". If optional **hexColor** is supplied, the returned string will be for the supplied color, not the underlying value of the current Iris Object.\n\n### **.[rgbString]()** ( alpha : Integer ) : String\nReturns value as inner section of cssString(). For example \"255, 0, 0\". This allows you to write to CSS variables for use with custom alpha channels in your CSS. Optional **alpha** value.\n\n### **.[toJSON]()** ( ) : Integer\nReturns value as hexidecimal, JSON friendly data.\n\n\u003cbr\u003e\n\n# Color Data\n\n### **.[getHSL]()** ( target ) : Object\nProvide an optional **target** to copy hue, saturation, lightness values into, they will be in the range 0.0 to 1.0. If no target is provided a new Object with h, s, l properties is returned.\n\n### **.[getRGB]()** ( target ) : Object\nProvide an optional **target** to copy red, green, blue values into, they will be in the range 0.0 to 1.0. If no target is provided a new Object with r, g, b properties is returned.\n\n### **.[getRYB]()** ( target ) : Object\nProvide an optional **target** to copy red, yellow, blue values into, they will be in the range 0.0 to 1.0. If no target is provided a new Object with r, y, b properties is returned.\n\n### **.[toArray]()** ( array : Array, offset : Integer ) : Array\nProvide an optional **array** to copy red, green, blue values into, they will be in the range 0.0 to 1.0. Optionally provide an offset to specify where in the **array** to write the data. If no array is provided a new Array will be returned.\n\n\u003cbr\u003e\n\n# Components\n\n### **.[red]()** ( ) : Integer\nReturns red value of current Iris object in range 0 to 255.\n\n### **.[green]()** ( ) : Integer\nReturns green value of current Iris object in range 0 to 255.\n\n### **.[blue]()** ( ) : Integer\nReturns blue value of current Iris object in range 0 to 255.\n\n### **.[redF]()** ( ) : Float\nReturns red value of current Iris object in range 0.0 to 1.0.\n\n### **.[greenF]()** ( ) : Float\nReturns green value of current Iris object in range 0.0 to 1.0.\n\n### **.[blueF]()** ( ) : Float\nReturns blue value of current Iris object in range 0.0 to 1.0.\n\n### **.[hue]()** ( ) : Integer\nReturns hue value of current Iris object in range 0 to 360.\n\n### **.[saturation]()** ( ) : Float\nReturns saturation value of current Iris object in range 0.0 to 1.0.\n\n### **.[lightness]()** ( ) : Float\nReturns lightness value of current Iris object in range 0.0 to 1.0.\n\n### **.[hueF]()** ( ) : Float\nReturns hue value of current Iris object in range 0.0 to 1.0.\n\n### **.[hueRYB]()** ( ) : Integer\nReturns the RYB adjusted hue value of current Iris object in range 0 to 360.\n\n\u003cbr\u003e\n\n# Color Adjustment\n\n### **.[add]()** ( color : Iris ) : this\nAdds the red, green, blue values from **color** to this Iris Object's values.\n\n### **.[addScalar]()** ( scalar : Integer ) : this\nAdds the value **scalar** to the red, green, blue of this Iris Object, scalar should be in range -255 to 255.\n\n### **.[addScalarF]()** ( scalar : Float ) : this\nAdds the value **scalar** to the red, green, blue of this Iris Object, scalar should be in range -1.0 to 1.0.\n\n### **.[brighten]()** ( amount : Float ) : this\nIncreases the lightness of this Iris Object by **amount** as a percentage of the remainder of 100% lightness less the current lightness. For example, if the current hsl lightness value is 0.6 (between 0.0 and 1.0), an **amount** of 0.5 will increase the lightness value to 0.6 + ((1.0 - 0.6) * 0.5) = 0.8, an **amount** value of 1.0 will always bring lightness value up to 1.0 (100%).\n\n### **.[darken]()** ( amount : Float ) : this\nDecreases the lightness of this Iris Object by **amount**. A value of 0.5 (default) will decrease lightness by 50%, a value of 2.0 will double lightness.\n\n### **.[grayscale]()** ( percent : Float, type : String ) : this\nChanges color into grayscale by **percent** ranging from 0.0 to 1.0. This can be done by type 'average' which takes an average of the red, green, blue values. Or by default type of 'luminosity' which scales red, green, blue values according to how human eyes see color (see [details at GIMP](https://docs.gimp.org/2.6/en/gimp-tool-desaturate.html)).\n\n### **.[hslOffset]()** ( h : Integer, s : Float, l : Float ) : this\nChange the HSL values of this Iris object by **h** (-360 to 360), **s** (-1.0 to 1.0), and **l** (-1.0 to 1.0).\n\n### **.[mix]()** ( mixColor : Iris, percent : Float ) : this\nMixes in another Iris Object's color value to this Iris Object by **percent** (default of 0.5, i.e. 50%).\n\n### **.[multiply]()** ( color : Iris ) : this\nMultiplies another Iris Object's RGB values to this Iris Object's RGB values.\n\n### **.[multiplyScalar]()** ( scalar : Float ) : this\nMultiplies this Iris Object's RGB values by **scalar**. There is no range for **scalar**, however, color values will be clamped between 0.0 and 1.0 after multiplication.\n\n### **.[rgbComplementary]()** ( ) : this\nAdjusts this color to be 180 degress (opposite) of the current color on the RGB color wheel.\n\n### **.[rgbRotateHue]()** ( degrees : Integer ) : this\nAdjusts this color to be **degress** of the current color on the RGB color wheel, range from -360 to 360.\n\n### **.[rybAdjust]()** ( ) : this\nAdjusts the RGB values to fit in the RYB spectrum as best as possible.\n\n### **.[rybComplementary]()** ( ) : this\nAdjusts this color to be 180 degress (opposite) of the current color on the RYB color wheel.\n\n### **.[rybRotateHue]()** ( degrees : Integer ) : this\nAdjusts this color to be **degress** of the current color on the RYB color wheel, range from -360 to 360.\n\n### **.[subtract]()** ( color : Iris ) : this\nSubtracts the red, green, blue values from **color** to this Iris Object's values.\n\n\u003cbr\u003e\n\n# Comparison\n\n### **.[equals]()** ( color : Iris ) : Boolean\nReturns true if the RGB values of **color** are the same as those of this Object.\n\n### **.[isDark]()** ( color : Iris ) : Boolean\nReturns true if this Iris Object's color value would be considered \"dark\", helpful for determining whether of not to use black or white text with this color as a background.\n\n### **.[isLight]()** ( color : Iris ) : Boolean\nReturns true if this Iris Object's color value would be considered \"light\", helpful for determining whether of not to use black or white text with this color as a background.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevinz%2Firis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevinz%2Firis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevinz%2Firis/lists"}