colorjs.io

<!DOCTYPE html> <html> <head> <title>The Color Object • Color.js</title> <meta name="viewport" content="width=device-width" /> <link rel="shortcut icon" href="../logo.svg"> <link rel="stylesheet" href="../assets/css/style.css"> <script src="../color.js" type="module"></script> <link rel="stylesheet" href="../assets/css/docs.css" /> </head> <body class="language-js"> <header> <nav> <a href=".." class="logo"><h1 class="logo"><img src="../logo.svg" alt="Color.js"></h1></a> <a href="../get/">Get<span class="wide"> Color.js</span></a> <a href="../docs/">Docs</a> <a href="../api/">API</a> <a href="../notebook/">Play!</a> <a href="../apps/">Demos</a> <a href="../tests/" class="footer">Tests</a> <a href="https://github.com/LeaVerou/color.js">GitHub</a> <a href="https://github.com/LeaVerou/color.js/issues/new" class="footer">File bug</a> </nav> <h1>The Color Object</h1> </header> <main> <aside id="toc"> <ul> <li><a href="the-color-object.html">The Color object</a></li> <li><a href="spaces.html">Supported color spaces</a></li> <li><a href="color-difference.html">Color difference</a></li> <li><a href="manipulation.html">Color manipulation</a></li> <li><a href="gamut-mapping.html">Gamut Mapping</a></li> <li><a href="interpolation.html">Interpolation</a></li> <li><a href="adaptation.html">Chromatic Adaptation</a></li> <li><a href="output.html">Output</a></li> </ul> </aside> <p>The first part to many Color.js operations is creating a Color object, which represents a specific color, in a particular colorspace, and has methods to convert the color to other spaces or to manipulate it.. There are many ways to do so.</p> <h2 id="passing-a-css-color-string">Passing a CSS color string</h2> <pre><code class="js language-js">let color = new Color("slategray"); let color2 = new Color("hwb(60 30% 40% / .1)"); let color3 = new Color("color(display-p3 0 1 0)"); let color4 = new Color("lch(50% 80 30)");</code></pre> <p>You can even use CSS variables, optionally with a DOM element against which they will be resolved (defaults to document root):</p> <pre><code class="js language-js">new Color("--color-blue"); new Color("--color-green", document.querySelector("h1"));</code></pre> <h2 id="color-space-and-coordinates">Color space and coordinates</h2> <p>Internally, every Color object is stored this way, so this is the most low level way to create a Color object.</p> <pre><code class="js language-js">let lime = new Color("sRGB", [0, 1, 0], .5); // optional alpha let yellow = new Color("P3", [1, 1, 0]); new Color("lch", [50, 30, 180]); // Capitalization doesn't matter new Color("LCH", [50, 30, 180]); // Color space objects work too new Color(Color.spaces.lch, [50, 30, 180]);</code></pre> <p>The exact ranges for these coordinates are up to the <a href="spaces.html">color space</a> definition.</p> <p>You can also pass another color, or an object literal with <code>spaceId</code>/<code>space</code>, <code>coords</code>, and optionally <code>alpha</code> properties:</p> <pre><code class="js language-js">let red = new Color({space: "lab", coords: [50, 50, 50]}); let red = new Color({spaceId: "lab", coords: [50, 50, 50]}); let redClone = new Color(red);</code></pre> <h2 id="color-object-properties">Color object properties</h2> <p>The three basic properties of a color object are its color space, its coordinates, and its alpha:</p> <pre><code class="js language-js">let color = new Color("deeppink"); color.space; // Color space object color.space === Color.spaces.srgb; color.spaceId; // same as color.space.id color.coords; color.alpha;</code></pre> <p>However, you can also use color space ids to get the color's coordinates in any other color space:</p> <pre><code class="js language-js">let color = new Color("deeppink"); color.srgb; color.p3; color.lch; color.lab; color.prophoto;</code></pre> <p>In fact, you can even manipulate the color this way!</p> <pre><code class="js language-js">let color = new Color("deeppink"); color.lch[0] = 90; color;</code></pre> <p>Named coordinates are also available:</p> <pre><code class="js language-js">let color = new Color("deeppink"); color.srgb.green; color.srgb.green = .5; color;</code></pre> <p>Note that unless we explicitly change a color's color space, it remains in the same color space it was when it was created. Manipulating coordinates of other color spaces do not change a color's space, it is just internally converted to another space and then back to its own. To convert a color to a different color space, you need to change its <code>space</code> or <code>spaceId</code> properties. Both accept either a color space object, or an id:</p> <pre><code class="js language-js">let color = new Color("srgb", [0, 1, 0]); color.space = "p3"; color; color.space = Color.spaces.prophoto; color;</code></pre> <p>Often, we want to keep our color intact, but also convert it to another color space, creating a new Color object. This is exactly what <a href="../api/#Color#to"><code>color.to()</code></a> is for:</p> <pre><code class="js language-js">let color = new Color("srgb", [0, 1, 0]); let colorP3 = color.to("p3"); color; colorP3;</code></pre> <p>Sometimes, when converting to a color space with a smaller gamut, the resulting coordinates may be out of gamut. You can test for that with <a href="../api/#Color#inGamut"><code>color.inGamut()</code></a> and get gamut mapped coordinates with <a href="../api/#Color#toGamut"><code>color.toGamut()</code></a>:</p> <pre><code class="js language-js">let funkyLime = new Color("p3", [0, 1, 0]); let boringLime = funkyLime.to("srgb"); boringLime.coords; boringLime.inGamut(); boringLime.toGamut();</code></pre> <p>Note that <a href="../api/#Color#toString"><code>color.toString()</code></a> returns gamut mapped coordinates by default. You can turn this off, via the <code>{inGamut: false}</code> option. You can read more about gamut mapping in the <a href="manipulation.html#gamut-mapping">Gamut mapping</a> section.</p> <footer> <a href="../notebook/index.html?storage=https://github.com/leaverou/color.js/docs/the-color-object.md" class="edit-page" target="_blank"> Edit this page on Color Notebook </a> </footer> </main> <footer> From <a href="http://lea.verou.me">Lea Verou</a> (co-editor of CSS Color 5) and <a href="https://svgees.us">Chris Lilley</a> (co-editor of CSS Color 3, 4, and 5; W3C representative to ICC) <nav> <a href="../get/">Get<span class="wide"> Color.js</span></a> <a href="../docs/">Docs</a> <a href="../api/">API</a> <a href="../notebook/">Play!</a> <a href="../apps/">Demos</a> <a href="../tests/" class="footer">Tests</a> <a href="https://github.com/LeaVerou/color.js">GitHub</a> <a href="https://github.com/LeaVerou/color.js/issues/new" class="footer">File bug</a> </nav> </footer> <script src="../assets/js/prism.js"></script> <script src="https://blissfuljs.com/bliss.shy.js"></script> <script src="https://live.prismjs.com/src/prism-live.js?load=javascript" async></script> <script src="../assets/js/index.js" type="module"></script> </body> </html>