-
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
118 lines (96 loc) · 3.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE 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/v0.2.4/mavo.js"></script>
<script src="https://colorjs.io/color.js" type="module"></script>
</head>
<body mv-app mv-storage="local" mv-autosave mv-mode="edit">
<div class="inputs">
<label>
Color 1:
[if(!color1.inGamut(outputSpace), "OOG")]
<input property type="text" id="colorStr1" mv-default="[url('color1') or 'hsl(90 50% 45%)']" style="--color: [color1.to('srgb') & '']" />
<meta property="color1" content="[getColor(colorStr1)]">
</label>
<label>
Color 2:
[if(!color2.inGamut(outputSpace), "OOG")]
<input type="text" property id="colorStr2" mv-default="[url('color2') or 'hsl(210 80% 55%)']" style="--color: [color2.to('srgb') & '']" />
<meta property="color2" content="[getColor(colorStr2)]">
</label>
<label>
<input type="checkbox" property="showGradient" checked>
Gradient?
</label>
Output space: <span property="outputSpace" mv-edit="#space" mv-default="[color1.spaceId]"></span>
<label>
<input type="checkbox" property="gamutMapping" checked>
Allow gamut mapping
</label>
<a href="?color1=[encodeURIComponent(colorStr1)]&color2=[encodeURIComponent(colorStr2)]">Permalink</a>
</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, deltaEMethod: '2000', space: space, outputSpace: space)), outputSpace, gamutMapping)" 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.deltaE2000($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, outputSpace, gamutMapping) {
gamutMapping = Mavo.value(gamutMapping);
return steps.map(c => {
if (!gamutMapping) {
c = c.inGamut(outputSpace)? c : new Color("black");
}
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>