apps/picker/index.html at main · color-js/apps · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LCH Colour picker</title>
	<meta name="viewport" content="initial-scale=1">
	<link rel="stylesheet" href="style.css">
	<script src="../importmap.js"></script>
	<script type="module">import "color-elements/color-picker"</script>
	<script src="index.js" type="module"></script>
	<link rel="icon" id="favicon">
	<script src="https://stretchy.verou.me/dist/stretchy.iife.min.js" data-stretchy-filter="autosize" async defer></script>
</head>
<body id="app">
	<main :style="{ '--color': css_color }">
		<header>
			<h1>Colour Picker</h1>
		</header>

		<color-picker alpha @colorchange="color = $event.target.color" ref="picker"></color-picker>

		<fieldset>
			<legend>Output <span class="precision autosize">(<input v-model="precision" type="number" min="0" max="20"> significant digits)</span></legend>
			<label>Serialized color
				<input class="color-css" :value="serialized_color" readonly />
			</label>

			<label>Displayed color
				<input class="color-css" :value="css_color" readonly />
			</label>

			<label :class="!color.inGamut('srgb', {epsilon: .00005}) ? 'out-of-gamut' : ''">
				<abbr>sRGB</abbr> Color
				<input class="color-srgb" :value="serialized_color_srgb" readonly />
				<div class="out-of-gamut-warning">Color is actually {{ serialized_color_srgb_oog }}, which is out of sRGB gamut; auto-corrected to sRGB boundary.</div>
			</label>
		</fieldset>
	</main>
</body>
</html>