-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (74 loc) · 4.65 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Generator - RGBA | HLSA | HEX</title>
<link rel="stylesheet" href="./assets/bootstrap.min.css">
</head>
<body>
<div class="container d-flex justify-content-center pt-5">
<div class="row gap-5 justify-content-around align-items-center">
<div class="col-lg-4 col-md-6 col-sm-6 col-9 border border-2 p-3">
<div style="width: 100%; height: 150px; background: black;" class="border border-1 mb-2" id="rgb"></div>
<div class="d-flex">
<span>R</span>
<input value="0" max="250" class="form-range p-1" type="range" name="red" id="red" oninput="rgbFn()">
</div>
<div class="d-flex">
<span>G</span>
<input value="0" max="250" class="form-range p-1" type="range" name="green" id="green" oninput="rgbFn()">
</div>
<div class="d-flex">
<span>B</span>
<input value="0" max="250" class="form-range p-1" type="range" name="blue" id="blue" oninput="rgbFn()">
</div>
<div class="d-flex">
<span>A</span>
<input value="1.0" max="1.0" step="0.1" class="form-range p-1" type="range" name="alfa" id="alfa" oninput="rgbFn()">
</div>
<div class="d-flex h5 text-center justify-content-center align-items-center position-relative">
<input id="rgbSpan" value="rgba(0,0,0,1.0)" class="form-control" style="font-size: 17px;" disabled>
<img src="./assets/copy.svg" title="copy" style="width: 20px; cursor: pointer; position: absolute; right: 10px;" alt="" onclick="copyT('rgb')">
<!-- <span>grb(</span><span id="red_s">0</span>,<span id="green_s">0</span>,<span id="blue_s">0</span>) -->
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-9 border border-2 p-3">
<div style="width: 100%; height: 150px; background: black;" class="border border-1 mb-2" id="hls"></div>
<div class="d-flex">
<span>H</span>
<input value="0" max="360" class="form-range p-1" type="range" name="red" id="h_1" oninput="hlsFn()">
</div>
<div class="d-flex">
<span>S</span>
<input value="0" max="100" class="form-range p-1" type="range" name="green" id="h_2" oninput="hlsFn()">
</div>
<div class="d-flex">
<span>L</span>
<input value="0" max="100" class="form-range p-1" type="range" name="blue" id="h_3" oninput="hlsFn()">
</div>
<div class="d-flex">
<span>A</span>
<input value="1.0" max="1.0" step="0.1" class="form-range p-1" type="range" name="alfa" id="h_alfa" oninput="hlsFn()">
</div>
<div class="d-flex h5 text-center justify-content-center align-items-center position-relative">
<input id="hlsSpan" value="hlsa(0,0,0,1.0)" class="form-control" style="font-size: 17px;" disabled>
<img src="./assets/copy.svg" title="copy" style="width: 20px; cursor: pointer; position: absolute; right: 10px;" alt="" onclick="copyT('hsl')">
<!-- <span>grb(</span><span id="red_s">0</span>,<span id="green_s">0</span>,<span id="blue_s">0</span>) -->
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-9 border border-2 p-3">
<div style="width: 100%; height: 150px; background: black;" class="border border-1 mb-2" id="hex"></div>
<input type="color" name="" id="hexInput" class="form-control-color" oninput="colorFn()" style="margin-bottom: 60px;">
<div class="d-flex h5 text-center justify-content-center align-items-center position-relative">
<input id="hexSpan" value="#000" class="form-control" style="font-size: 17px;" disabled>
<img src="./assets/copy.svg" title="copy" style="width: 20px; cursor: pointer; position: absolute; right: 10px;" alt="" onclick="copyT('hex')">
<!-- <span>grb(</span><span id="red_s">0</span>,<span id="green_s">0</span>,<span id="blue_s">0</span>) -->
</div>
</div>
</div>
</div>
<script src="./assets/script.js"></script>
</body>
</html>