colorjs.io
Version:
Color space agnostic color manipulation library
102 lines (84 loc) • 3.11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interpolation</title>
<link rel="stylesheet" href="https://get.mavo.io/mavo.css">
<link rel="stylesheet" href="style.css">
<script src="https://get.mavo.io/mavo.js"></script>
<script src="../../color.js" type="module"></script>
</head>
<body mv-app mv-storage="local" mv-autosave mv-mode="edit">
<div class="inputs">
<label>
Color 1: <input property type="text" id="colorStr1" mv-default="[url('color1') or 'hsl(90 50% 45%)']" style="--color: [color1.to('srgb') & '']" />
</label>
<label>
Color 2: <input type="text" property id="colorStr2" mv-default="[url('color2') or 'hsl(210 80% 55%)']" style="--color: [color2.to('srgb') & '']" />
</label>
<label>
<input type="checkbox" property="showGradient" checked>
Gradient?
</label>
Output space: <span property="outputSpace" mv-edit="#space" mv-default="[color1.spaceId]"></span>
<a href="?color1=[encodeURIComponent(colorStr1)]&color2=[encodeURIComponent(colorStr2)]">Permalink</a>
<meta property="color1" content="[getColor(colorStr1)]">
<meta property="color2" content="[getColor(colorStr2)]">
</div>
<div id="output">
<article property="gradient" mv-multiple style="--gradient:[cssGradient]">
<details open>
<summary>
<span property="space" mv-edit="#space" mv-default="lch"></span> interpolation,
<label><input type="number" property="numSteps" value="10" min="2" /> steps</label>
<input type="number" property="delta" value="" min="0" /> max ΔE
<em>(<span property="stepCount">[count(step)]</span> resulting steps)</em>
</summary>
<div>
Colors:
<div mv-value="colorSteps(color1.steps(color2, group(steps: numSteps, maxDeltaE: delta, space: space, outputSpace: space)))" mv-multiple="step" style="--color: [outputColor & ''];">
<code>[color & ""]</code> → <code>[outputColor & ""]</code>
<meta property="color" />
<meta property="outputColor" content="[color.to(outputSpace)]" />
<span mv-if="$previous.color">ΔE [color.deltaE($previous.color)]</span>
<meta property="gradientStep" content="[if(showGradient, outputColor & '', outputColor & ' 0 ' & (($index + 1) * (100 / stepCount)) & '%')]" />
</div>
</div>
<label>
CSS gradient:
<textarea property="cssGradient">linear-gradient(to right, [join(step.gradientStep ', ')])</textarea>
</label>
</details>
</article>
</div>
<div hidden>
<select id="space">
<option mv-value="ColorSpaces" mv-multiple="colorSpace" mv-group value="[colorSpace.id]">[colorSpace.name]</option>
</select>
</div>
<script type="module">
window.ColorSpaces = Object.values(Color.spaces).map(s => {
return {id: s.id, name: s.name}
});
// Map steps to objects with a color property
// because Mavo fiddles with object data
window.colorSteps = function(steps) {
return steps.map(c => {
return {color: c}
});
}
// Just to swallow errors
window.getColor = function(str) {
try {
return new Color(str);
}
catch (e) {
if (e instanceof TypeError) {
return null;
}
throw e;
}
}
</script>
</body>
</html>