Skip to content

Commit 67ba416

Browse files
teoli2003teoli2003
authored
Merge pull request mdn#125 from estelle/colormod
New page: color modules example
2 parents a4d34cb + fb7cad5 commit 67ba416

File tree

1 file changed

+222
-0
lines changed

1 file changed

+222
-0
lines changed

‎modules/colors.html

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Color picker</title>
6+
<style>
7+
dialog {
8+
border: 1px solid;
9+
border-radius: 5px;
10+
box-shadow: 3px 3px 10px rgb(0 0 0 / 0.2);
11+
background-color: white;
12+
font-family: segue, arial, helvetica, sans-serif;
13+
margin-top: 5vh;
14+
}
15+
table {
16+
width: 100%;
17+
}
18+
td,
19+
th {
20+
padding: 3px 15px;
21+
}
22+
th {
23+
background-color: #ededed;
24+
}
25+
td {
26+
background-color: #dedede;
27+
font-family: monospace;
28+
}
29+
body {
30+
background: linear-gradient(
31+
-90deg,
32+
transparent 0 38%,
33+
47%,
34+
rgb(0 0 0 / 0.7) 50%,
35+
white 50% 100%
36+
),
37+
conic-gradient(
38+
black 0 90deg,
39+
transparent 90deg 180deg,
40+
black 180deg 270deg,
41+
transparent 270deg 360deg
42+
);
43+
background-size: 100% 100%, 20px 20px;
44+
padding: 0;
45+
margin: 0;
46+
}
47+
div {
48+
width: 100vw;
49+
height: 100vh;
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<div>
55+
<dialog>
56+
<table>
57+
<caption>
58+
Current color values:
59+
</caption>
60+
<tbody>
61+
<tr id="RGB">
62+
<th>RGB</th>
63+
<td></td>
64+
</tr>
65+
<tr id="HEX">
66+
<th>HEX</th>
67+
<td></td>
68+
</tr>
69+
<tr id="HSL">
70+
<th>HSL</th>
71+
<td></td>
72+
</tr>
73+
<tr id="HWB">
74+
<th>HWB</th>
75+
<td></td>
76+
</tr>
77+
</tbody>
78+
</table>
79+
80+
<p>
81+
<label for="color">Select a color: </label
82+
><input type="color" id="color" value="#bada55" />
83+
</p>
84+
<p>
85+
<label for="opacity">Select an opacity: </label
86+
><input
87+
type="range"
88+
id="opacity"
89+
value="1"
90+
min="0"
91+
max="1"
92+
step="0.1"
93+
/>
94+
</p>
95+
</dialog>
96+
</div>
97+
<script>
98+
const colorPicker = document.getElementById("color");
99+
const opacityPicker = document.getElementById("opacity");
100+
101+
document.addEventListener("readystatechange", () => {
102+
document.querySelector("dialog").show();
103+
createColor();
104+
});
105+
106+
colorPicker.addEventListener("change", () => {
107+
createColor();
108+
});
109+
110+
opacityPicker.addEventListener("change", () => {
111+
createColor();
112+
});
113+
114+
function createColor() {
115+
const currentColor = colorPicker.value;
116+
const currentOpacity = Number(opacityPicker.value);
117+
setBackgroundColor(currentColor, currentOpacity);
118+
createHEX(currentColor, currentOpacity);
119+
createRGB(currentColor, currentOpacity);
120+
}
121+
122+
function createHEX(color, opacity) {
123+
const cell = document.querySelector("#HEX td");
124+
if (opacity === 1) {
125+
cell.textContent = color;
126+
} else {
127+
cell.textContent = hexOpacity(color, opacity);
128+
}
129+
}
130+
131+
function createRGB(color, opacity) {
132+
const cell = document.querySelector("#RGB td");
133+
color = color.substring(1, 7);
134+
const hexArray = color.match(/.{1,2}/g);
135+
const R = parseInt(hexArray[0], 16);
136+
const G = parseInt(hexArray[1], 16);
137+
const B = parseInt(hexArray[2], 16);
138+
139+
if (opacity === 1) {
140+
cell.textContent = `rgb(${R} ${G} ${B})`;
141+
} else {
142+
cell.textContent = `rgb(${R} ${G} ${B} / ${opacity})`;
143+
}
144+
createHSL(R, G, B, opacity);
145+
}
146+
147+
function createHSL(r, g, b, opacity) {
148+
const cell = document.querySelector("#HSL td");
149+
// Let's have r, g, b in the range [0, 1]
150+
r = r / 255;
151+
g = g / 255;
152+
b = b / 255;
153+
const cmin = Math.min(r, g, b);
154+
const cmax = Math.max(r, g, b);
155+
const delta = cmax - cmin;
156+
let h = 0,
157+
s = 0,
158+
l = 0;
159+
160+
if (delta === 0) {
161+
h = 0;
162+
} else if (cmax === r) {
163+
h = ((g - b) / delta) % 6;
164+
} else if (cmax === g) {
165+
h = (b - r) / delta + 2;
166+
}
167+
else h = (r - g) / delta + 4;
168+
169+
h = Math.round(h * 60);
170+
171+
// We want an angle between 0 and 360°
172+
if (h < 0) {
173+
h += 360;
174+
}
175+
176+
l = (cmax + cmin) / 2;
177+
s = (delta === 0) ? 0 : delta / (1 - Math.abs(2 * l - 1));
178+
s = Number((s * 100).toFixed(1));
179+
l = Number((l * 100).toFixed(1));
180+
181+
if (opacity === 1) {
182+
cell.textContent = `hsl(${h} ${s}% ${l}%)`;
183+
} else {
184+
cell.textContent = `hsl(${h} ${s}% ${l}% / ${opacity})`;
185+
}
186+
createHWB(h, s, l, opacity);
187+
}
188+
189+
function createHWB(h, s, l, opacity) {
190+
const cell = document.querySelector("#HWB td");
191+
const hsv = (s * ((l < 50) ? l : 100 - l)) / 100;
192+
let W = (hsv === 0) ? 0 : ((2 * hsv) / (l + hsv)) * 100;
193+
let B = l + hsv;
194+
W = W.toFixed(1);
195+
B = B.toFixed(1);
196+
if (opacity === 1) {
197+
cell.textContent = `hwb(${h} ${W}% ${B}%)`;
198+
} else {
199+
cell.textContent = `hwb(${h} ${W}% ${B}% / ${opacity})`;
200+
}
201+
}
202+
203+
function setBackgroundColor(color, opacity) {
204+
const body = document.querySelector("div");
205+
if (opacity !== 1) {
206+
color = hexOpacity(color, opacity);
207+
}
208+
body.style.backgroundColor = color;
209+
opacityPicker.style.accentColor = color;
210+
colorPicker.style.accentColor = color;
211+
}
212+
213+
function hexOpacity(color, opacity) {
214+
let char = "00";
215+
if (opacity > 0) {
216+
char = Math.floor(opacity * 255).toString(16);
217+
}
218+
return `${color}${char}`;
219+
}
220+
</script>
221+
</body>
222+
</html>

0 commit comments

Comments
 (0)