colorjs.io
Version:
Color space agnostic color manipulation library
93 lines (81 loc) • 3.42 kB
HTML
<html>
<head>
<title>Color manipulation • 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>Color manipulation</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>
<h2 id="by-color-coordinates">By color coordinates</h2>
<p>We've seen in the <a href="the-color-object">previous section</a> how we can manipulate a color
by directly manipulating coordinates in any of the color spaces supported.
LCH coordinates are particularly useful for this so they are available directly on color objects:</p>
<pre><code class="js language-js">let color = new Color("rebeccapurple");
let color = new Color("rebeccapurple");
color.lightness *= 1.2;
color.chroma = 40;
color.hue += 30;</code></pre>
<p>You can also use <a href="../api/#Color#set"><code>color.set()</code></a> to set multiple coordinates at once.
In addition, it returns the color itself, so further methods can be called on it:</p>
<pre><code class="js language-js">let color = new Color("lch(50% 50 10)");
color = color.set({
hue: h => h + 180, // relative modification!
chroma: 60,
"hwb.whiteness": w => w * 1.2
}).lighten();</code></pre>
<footer>
<a href="../notebook/index.html?storage=https://github.com/leaverou/color.js/docs/manipulation.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>