forked from aclarembeau/grayscale-to-opacity
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
43 lines (41 loc) · 1.79 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
<html lang="en">
<head>
<title>Grayscale to Black-opacity conversion</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
function brightnessByColor (color) {
var color = "" + color, isHEX = color.indexOf("#") == 0, isRGB = color.indexOf("rgb") == 0;
if (isHEX) {
var m = color.substr(1).match(color.length == 7 ? /(\S{2})/g : /(\S{1})/g);
if (m) var r = parseInt(m[0], 16), g = parseInt(m[1], 16), b = parseInt(m[2], 16);
}
if (isRGB) {
var m = color.match(/(\d+){3}/g);
if (m) var r = m[0], g = m[1], b = m[2];
}
if (typeof r != "undefined") return ((r*299)+(g*587)+(b*114))/1000;
}
function convertColor(elem){
let value = elem.value;
value = value.replace('#', '');
document.getElementById('output').value = 'rgba(0, 0, 0, COL)'.replace("COL", Math.round(100*(1-(brightnessByColor('#' + value)/255.0)))/100);
}
</script>
<div class="text-center flex items-center justify-center" style="height: 100vh; width: 100vw">
<div class="flex flex-col">
<p class="text-2xl">
Convert gray tints into black-opacity colors.
</p>
<label for="input" style="width: 100%" for>
Enter your HEX color<br />
</label>
<div style="width: 300px; margin: auto">
<input type="text" class="border border-gray-500 p-2 rounded my-4" autofocus onchange="convertColor(this)" style="width: 100%" id="input" placeholder="#123456" />
<input type="text" id="output" disabled class="border border-gray-500 bg-gray-100 p-2 rounded" style="width: 100%" placeholder="rgba(0,0,0,0.4)"/>
</div>
</div>
</div>
</body>
</html>