colorjs.io
Version:
Color space agnostic color manipulation library
207 lines (173 loc) • 6.92 kB
HTML
<html lang="en" class="home">
<head>
<meta charset="UTF-8">
<title>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/home.css">
<script src="color.js" type="module"></script>
</head>
<body class="language-javascript">
<header>
<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>
<hgroup class="logo">
<img src="logo.svg" alt="">
<h1>Color.js</h1>
<h2>Let's get serious about color</h2>
</hgroup>
<div id="features">
<article>
<h4>Fully color space aware</h3>
<p>Each color belongs to a color space; operations are color space agnostic.
Modules for <a href="docs/spaces.html">a wide variety of color spaces</a>, including Lab/LCH, sRGB and friends (HSL/HSV/HWB), Display P3, J<sub>z</sub>a<sub>z</sub>b<sub>z</sub>, REC.2100 and more.</p>
</article>
<article>
<h4>Doesn't gloss over color science</h3>
<p>Actual <a href="docs/gamut-mapping.html">gamut mapping</a> instead of naïve clipping,
multiple <a href="docs/color-difference.html">DeltaE</a> methods (76, CMC, 2000, J<sub>z</sub>),
multiple <a href="docs/adaptation.html">chromatic adaptation</a> methods (von Kries, Bradford, CAT02, CAT16),
all with sensible defaults
</p>
</article>
<article>
<h4>Up to date with CSS Color 4</h3>
<p>Every <a href="https://drafts.csswg.org/css-color-4/">CSS Color 4</a> format & color space supported for both <a href="docs/the-color-object.html">input</a> and <a href="docs/output.html">output</a>, whether your browser supports it or not.</p>
</article>
<article>
<h4>Readable, object-oriented API</h3>
<p>Color objects for multiple operations on the same color, and static Color.something() functions for one-off calculations</p>
</article>
<article>
<h4>Modular & Extensible</h3>
<p>Use only what you need, or a bundle. Client-side or Node. Deep extensibility with <a href="api/#Hooks-hooks.js">hooks</a>. </p>
</article>
</div>
</header>
<main>
<p class="warning">
Color.js is currently an unreleased work in progress. Here be dragons.
If you found this website somehow, feel free to try it out and <a href="https://github.com/LeaVerou/color.js/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc">give us feedback</a>, but sshhhh! 🤫
There are more bugs in the live code snippets ("Color Notebook") in the docs than the actual Color.js library, so before reporting a bug, please try to reproduce it outside Color Notebook.
</p>
<section>
<h2>Reading colors</h2>
<p>Any color from CSS Color Level 4 should work:</p>
<pre><code>
let color = new Color("slategray");
let color2 = new Color("hwb(60 30% 40%)");
let color3 = new Color("color(display-p3 0 1 0)");
let color4 = new Color("lch(50% 80 30)");
// CSS variables work too!
let colorjsBlue = new Color("--color-blue");
</code></pre>
<p class="read-more"><a href="docs/the-color-object.html">Read more about color objects</a>
</section>
<section>
<h2>Manipulating colors</h2>
<p>You can use properties to modify coordinates
of any color space and convert back
<pre><code>
let color = new Color("slategray");
color.lightness = 80; // LCH coords available directly on colors
color.chroma *= 1.2; // saturate 20%
color.hwb.whiteness += 10; // any other color space also available
</code></pre>
<p>Chaining-style modifications are also supported:</p>
<pre><code>
let color = new Color("lch(50% 50 10)");
color = color.set({
hue: h => h + 180,
chroma: 60
}).lighten();
</code></pre>
<p class="read-more"><a href="docs/manipulation.html">Read more about color manipulation</a>
</section>
<section>
<h2>Converting between color spaces & stringifying</h2>
<p>Output in any color space</p>
<pre><code>
let color = new Color("slategray");
color + ""; // default stringification
color.to("p3").toString({precision: 3});
</code></pre>
<p>Clip to gamut or don't</p>
<pre><code>
let color = new Color("p3", [0, 1, 0]);
color.to("srgb").toString({inGamut: false})
</code></pre>
<p>Change color space:</p>
<pre><code>
let color = new Color("slategray");
color.space = "srgb"; // Convert to sRGB
color.spaceId = "srgb"; // Same
color.space = "sRGB"; // Capitalization doesn't matter
color.space = Color.spaces.srgb; // Same
color.spaceId = Color.spaces.srgb; // Same
</code></pre>
</section>
<section>
<h2>Interpolation</h2>
<p>Get a function that accepts a percentage:</p>
<pre><code>
let color = new Color("p3", [0, 1, 0]);
let redgreen = color.range("red", {
space: "lch", // interpolation space
outputSpace: "srgb"
});
redgreen(.5); // midpoint
</code></pre>
<p>Interpolation by discrete steps:</p>
<pre><code>
let color = new Color("p3", [0, 1, 0]);
color.steps("red", {
space: "lch",
outputSpace: "srgb",
maxDeltaE: 3, // max deltaE between consecutive steps
steps: 10 // min number of steps
});
</code></pre>
<p>Shortcut for specific points in the range:</p>
<pre><code>
let color = new Color("p3", [0, 1, 0]);
let redgreen = color.mix("red", .5, {space: "lch", outputSpace: "srgb"});
let reddishGreen = color.mix("red", .25, {space: "lch", outputSpace: "srgb"});
</code></pre>
<p>Static syntax (every color method has a static one too):</p>
<pre><code>
Color.mix("color(display-p3 0 1 0)", "red", .5);
</code></pre>
<p class="read-more"><a href="docs/interpolation.html">Read more about interpolation</a>
</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>
</body>
</html>