-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolor-converter.html
79 lines (71 loc) · 2.05 KB
/
color-converter.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>color converter</title>
</head>
<body>
<div>
<label>Convert RGB to Hex codes</label><br>
<p>Please use the format given in the input below.</p>
<textarea id="input" style="width: 600px; height: 400px;">
{
"highlight-red" : [255, 115, 118],
"highlight-orange" : [255, 172, 78],
"highlight-yellow" : [255, 237, 0],
"highlight-green" : [185, 226, 0],
"highlight-blue" : [63, 199, 249],
"highlight-magenta" : [255, 65, 180],
"highlight-purple" : [ 215, 158, 216],
"highlight-teal" : [37, 202, 210],
"red" : [229, 49, 56],
"orange" : [252,123,57],
"yellow" : [255, 199, 0],
"green" : [121, 172, 43],
"blue" : [42, 114, 183],
"magenta" : [198, 3, 124],
"purple" : [120, 54, 140],
"teal" : [94, 194, 234],
"dark-red" : [193, 44, 37],
"dark-orange" : [234, 91, 12],
"dark-yellow" : [215, 171, 40],
"dark-green" : [26, 113, 53],
"dark-blue" : [28, 64, 161],
"dark-magenta" : [113, 24, 83],
"dark-purple" : [86, 33, 122],
"dark-teal" : [23, 109, 142]
}
</textarea>
<button onClick="convert()">convert</button>
</div>
<ul id="hexcolours"></ul>
<div id="result"></div>
<script>
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function convert() {
var rgb = JSON.parse(document.querySelector('#input').value);
var ul = document.querySelector('#hexcolours');
var hexObj = {};
for(var key in rgb) {
var r = rgb[key][0],
g = rgb[key][1],
b = rgb[key][2];
var hex = rgbToHex(r, g, b);
hexObj[key] = hex;
var li = document.createElement('li');
var div = document.createElement('div');
li.innerHTML = `${key} : ${hex} <div style="width: 30px; height: 30px; background-color:${hex};"></div>`;
ul.appendChild(li);
}
var str = JSON.stringify(hexObj, null, 2); // spacing level = 2
document.querySelector('#result').innerHTML = str;
}
</script>
</body>
</html>