colorjs.io
Version:
Color space agnostic color manipulation library
132 lines (102 loc) • 3.69 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Supported color spaces • Color.js</title>
<link rel="stylesheet" href="https://get.mavo.io/mavo.css">
<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="cn-ignore">
<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>Supported color spaces</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>
<section mv-app="colorSpaces" mv-storage="../get/modules.json">
<article mv-multiple property="space">
<header>
<h2 id="[id]"><span property="name" ></span></h2>
<div class="file"><code>src/spaces/<span property="id"></span>.js</code></div>
</header>
<div property class="description" mv-markdown-options></div>
<dl class="meta">
<dt>White point:</dt>
<dd><strong property="whitePoint"></strong></dd>
<dt>Coordinates:</dt>
<dd>
<table>
<thead>
<tr>
<th>Name</th>
<th>Ref. range</th>
</tr>
</thead>
<tbody>
<tr mv-multiple property="coord">
<th property="name"></th>
<td>
<span property="min"></span>
–
<span property="max"></span>
<meta property="codeExample" content="color.[space.id].[name] = [random(min, max)];">
<meta property="randomCoord" content="[random(min, max)]">
</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<pre><code mv-expressions="{{ }}">let color = new Color("{{ space.id }}", [{{randomCoord}}]);
{{ join(codeExample, "\n") }}
color.toString();</code></pre>
<a property="url" class="read-more">Learn more about [name]</a>
</article>
</section>
</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>
<script src="https://get.mavo.io/mavo.js"></script>
</body>
</html>