Skip to content

Commit 64204bd

Browse files
estelleestelle
committed
New page: color modules example
1 parent e78e413 commit 64204bd

File tree

1 file changed

+180
-0
lines changed

1 file changed

+180
-0
lines changed

‎modules/colors.html

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
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(-90deg, transparent 0 50%, white 50% 100%),
31+
conic-gradient(black 0 90deg, transparent 90deg 180deg, black 180deg 270deg, transparent 270deg 360deg);
32+
background-size: 100% 100%, 20px 20px;
33+
padding: 0;
34+
margin: 0;
35+
}
36+
div {
37+
width: 100vw;
38+
height: 100vh;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<div>
44+
<dialog>
45+
<table>
46+
<caption>Current color values:</caption>
47+
<tbody>
48+
<tr id="RGB"><th>RGB</th><td></td></tr>
49+
<tr id="HEX"><th>HEX</th><td></td></tr>
50+
<tr id="HSL"><th>HSL</th><td></td></tr>
51+
<tr id="HWB"><th>HWB</th><td></td></tr>
52+
</tbody>
53+
</table>
54+
55+
<p><label for="color">Select a color: </label><input type="color" id="color" value="#bada55"/></p>
56+
<p><label for="opacity">Select an opacity: </label><input type="range" id="opacity" value="1" min="0" max="1" step="0.1"/>
57+
</dialog>
58+
</div>
59+
<script>
60+
const colorPicker = document.getElementById( "color" );
61+
const opacityPicker = document.getElementById( "opacity" );
62+
63+
document.addEventListener( "readystatechange", () => {
64+
document.querySelector( "dialog" ).show();
65+
createColor();
66+
});
67+
68+
colorPicker.addEventListener( "change", () => {
69+
createColor();
70+
});
71+
72+
opacityPicker.addEventListener( "change", () => {
73+
createColor();
74+
});
75+
76+
const createColor = function() {
77+
const currentColor = colorPicker.value;
78+
const currentOpacity = opacityPicker.value;
79+
setBackgroundColor( currentColor, currentOpacity );
80+
createHEX( currentColor, currentOpacity );
81+
createRGB( currentColor, currentOpacity );
82+
}
83+
84+
const createHEX = function ( color, opacity ) {
85+
const cell = document.querySelector( "#HEX td" );
86+
if ( opacity == 1 ) {
87+
cell.innerHTML = color;
88+
} else {
89+
cell.innerHTML = color + hexOpacity( opacity );
90+
}
91+
}
92+
93+
const createRGB = function ( color, opacity ) {
94+
const cell = document.querySelector( "#RGB td" );
95+
color = color.substring( 1, 6 );
96+
let hexArray = color.match( /.{1,2}/g );
97+
let R = parseInt( hexArray[0], 16 ),
98+
G = parseInt( hexArray[1], 16 ),
99+
B = parseInt( hexArray[2], 16 );
100+
101+
if( opacity == 1 ) {
102+
cell.innerHTML = `rgb(${R} ${G} ${B})`;
103+
} else {
104+
cell.innerHTML = `rgb(${R} ${G} ${B} / ${opacity})`;
105+
}
106+
createHSL( R, G, B, opacity );
107+
}
108+
109+
const createHSL = function ( r, g, b, opacity ) {
110+
const cell = document.querySelector( "#HSL td" );
111+
r = r / 255,
112+
g = g / 255,
113+
b = b / 255,
114+
cmin = Math.min( r, g, b ),
115+
cmax = Math.max( r, g, b ),
116+
delta = cmax - cmin,
117+
h = 0,
118+
s = 0,
119+
l = 0;
120+
121+
if ( delta == 0 )
122+
h = 0;
123+
else if ( cmax == r )
124+
h = (( g - b ) / delta ) % 6;
125+
else if ( cmax == g )
126+
h = ( b - r ) / delta + 2;
127+
else
128+
h = ( r - g ) / delta + 4;
129+
130+
h = Math.round( h * 60 );
131+
132+
if ( h < 0 )
133+
h += 360;
134+
135+
l = ( cmax + cmin ) / 2;
136+
s = delta == 0 ? 0 : delta / ( 1 - Math.abs( 2 * l - 1 ));
137+
s = +( s * 100 ).toFixed( 1 );
138+
l = +( l * 100 ).toFixed( 1 );
139+
140+
if( opacity == 1 ) {
141+
cell.innerHTML = `hsl(${h} ${s}% ${l}%)`;
142+
} else {
143+
cell.innerHTML = `hsl(${h} ${s}% ${l}% / ${opacity})`
144+
}
145+
createHWB( h, s, l, opacity );
146+
}
147+
148+
const createHWB = function ( h, s, l, opacity ) {
149+
const cell = document.querySelector( "#HWB td" );
150+
const hsv = s * ( l < 50 ? l : 100 - l ) / 100;
151+
const W = hsv === 0 ? 0 : 2 * hsv / ( l + hsv ) * 100;
152+
const B = l + hsv;
153+
if( opacity == 1 ) {
154+
cell.innerHTML = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}%)`;
155+
}
156+
else {
157+
cell.innerHTML = `hwb(${h} ${W.toFixed( 1 )}% ${B.toFixed( 1 )}% / ${opacity})`;
158+
}
159+
}
160+
161+
const setBackgroundColor = function ( color, opacity ) {
162+
const body = document.querySelector( "div" );
163+
if( opacity == 1 ) {
164+
body.style.backgroundColor = color;
165+
} else {
166+
body.style.backgroundColor = color + "" + hexOpacity( opacity );
167+
}
168+
}
169+
170+
const hexOpacity = function( opacity ) {
171+
if( opacity > 0 ) {
172+
return Math.floor( opacity * 255 ).toString( 16 );
173+
}
174+
else {
175+
return "00";
176+
}
177+
}
178+
</script>
179+
</body>
180+
</html>

0 commit comments

Comments
 (0)