-
Notifications
You must be signed in to change notification settings - Fork 0
/
hsl.html
59 lines (59 loc) · 3.11 KB
/
hsl.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
<html>
<head>
<title>HSL Calculator</title>
<link rel="stylesheet" href="css/hsl.css">
</head>
<body >
<div id="hsl_box">
<div id="hsl_result_color_box"></div>
<table id="hsl_slider_table" style="margin:60px auto;text-align:center">
<tr>
<td height="70" width="30"><span >H</span></td>
<td width="80"> <input type="number" id="hue_hsl_input_field" class="hsl_input_field" oninput="edit_value(this);input_to_bars(this);write_colors()" value="0"></td>
<td width="685"> <div id="hue_hsl_box_pointer" class="hsl_box_pointer"><span id="hue_hsl_pointer_value" >0</span></div>
<div class="hsl_triangle_pointer" id="hue_hsl_triangle_pointer"></div>
<div id="hue_hsl_slider_big_div" class="hsl_slider_big_div">
<script>
var i=0;
for(i=0;i<=360;i++)
document.write('<div style="background-color:hsl('+i+',100%,50%)" class="hue_hsl_slider_small_div" id="hue_hsl_slider_small_div'+i+'" onmousemove="get_pointer_value(this,'+i+');write_colors();change_sat_lit(this)"></div>');
</script></div></td>
</tr>
<tr>
<td height="70"><span>S</span></td>
<td><input type="number" id="sat_hsl_input_field" class="hsl_input_field" oninput="edit_value(this);input_to_bars(this);write_colors()" value="100"></td>
<td><div id="sat_hsl_box_pointer" class="hsl_box_pointer" ><span id="sat_hsl_pointer_value">100</span></div>
<div class="hsl_triangle_pointer" id="sat_hsl_triangle_pointer"></div>
<div id="sat_hsl_slider_big_div" class="hsl_slider_big_div">
<script>
var i=0;
for(i=0;i<=100;i++)
document.write('<div style="background-color:hsl(0,'+i+'%,50%)" class="sat_hsl_slider_small_div" id="sat_hsl_slider_small_div'+i+'" onmousemove="get_pointer_value(this,'+i+');write_colors()"></div>');
</script></div></td>
</tr>
<tr>
<td height="70"><span >L</span></td>
<td><input type="number" id="lit_hsl_input_field" class="hsl_input_field" oninput="edit_value(this);input_to_bars(this);write_colors()" value="50"></td>
<td><div id="lit_hsl_box_pointer" class="hsl_box_pointer"><span id="lit_hsl_pointer_value" >50</span></div>
<div class="hsl_triangle_pointer" id="lit_hsl_triangle_pointer"></div>
<div id="lit_hsl_slider_big_div" class="hsl_slider_big_div">
<script>
var i=0;
for(i=0;i<=100;i++)
document.write('<div style="background-color:hsl(0,100%,'+i+'%)" class="lit_hsl_slider_small_div" id="lit_hsl_slider_small_div'+i+'" onmousemove="get_pointer_value(this,'+i+');write_colors()"></div>');
</script></div></td>
</tr>
</table>
<table style="margin-left:200px;margin-top: 50px" id="hsl_to_others_table">
<tr><td>HSL values</td><td><span id="hsl_value">hsl(0, 100%, 50%)</span></td></tr>
<tr><td>RGB values</td><td><span id="rgb_value">rgb(255, 0, 0)</span></td></tr>
<tr><td>Hex values</td><td><span id="hex_value">#ff0000</span></td></tr>
<tr><td>HSV values</td><td><span id="hsv_value">hsv(0, 100%, 100%)</span></td></tr>
<tr><td>HWB values</td><td><span id="hwb_value">hwb(0, 0%, 0%)</span></td></tr>
<tr><td>CMYK values</td><td><span id="cmyk_value">cmyk(0%, 100%, 100%, 0%)</span></td></tr>
</table>
</div>
<script type="text/javascript" src="library/color_library.js"></script>
<script type="text/javascript" src="javascript/hsl.js"></script>
</body>
</html>