-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
46 lines (43 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
<!DOCTYPE html>
<html lang="en">
<style>
body{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
background-color:#000000
}
div{
height:150px;
width:150px;
display: flex;
align-items: center;
justify-content: center;
}
p{
background-color: rgba(255,255,255,.5);
color:black;
display: flex;
padding:4px;
font-family:sans-serif;
}
</style>
<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>Document</title>
</head>
<body>
</body>
<script>
const colors={"gray0":{"value":"rgba(255,255,255,1)"},"gray20":{"value":"rgba(242,242,242,1)"},"gray40":{"value":"rgba(214,214,214,1)"},"gray60":{"value":"rgba(169,169,169,1)"},"gray80":{"value":"rgba(133,133,133,1)"},"gray100":{"value":"rgba(119,119,119,1)"},"gray200":{"value":"rgba(73,73,73,1)"},"gray300":{"value":"rgba(43,43,43,1)"},"gray400":{"value":"rgba(26,26,26,1)"},"gray500":{"value":"rgba(20,20,20,1)"},"gray600":{"value":"rgba(12,12,12,1)"},"gray700":{"value":"rgba(2,2,2,1)"},"blue40":{"value":"rgba(196,205,214,1)"},"blue60":{"value":"rgba(144,172,198,1)"},"blue80":{"value":"rgba(77,140,198,1)"},"blue100":{"value":"rgba(22,108,249,1)"},"blue200":{"value":"rgba(70,106,158,1)"},"blue300":{"value":"rgba(64,79,104,1)"},"blue400":{"value":"rgba(49,56,66,1)"},"blue500":{"value":"rgba(28,31,34,1)"},"blue600":{"value":"rgba(20,20,22,1)"},"red40":{"value":"rgba(219,199,199,1)"},"red60":{"value":"rgba(205,157,155,1)"},"red80":{"value":"rgba(209,104,99,1)"},"red100":{"value":"rgba(235,18,40,1)"},"red200":{"value":"rgba(170,76,63,1)"},"red300":{"value":"rgba(111,67,60,1)"},"red400":{"value":"rgba(69,51,49,1)"},"red500":{"value":"rgba(33,30,29,1)"},"red600":{"value":"rgba(24,22,22,1)"},"pink40":{"value":"rgba(217,193,202,1)"},"pink60":{"value":"rgba(206,148,167,1)"},"pink80":{"value":"rgba(210,93,128,1)"},"pink100":{"value":"rgba(163,50,84,1)"},"pink200":{"value":"rgba(164,73,92,1)"},"pink300":{"value":"rgba(108,65,74,1)"},"pink400":{"value":"rgba(67,50,53,1)"},"pink500":{"value":"rgba(33,30,31,1)"},"pink600":{"value":"rgba(21,20,20,1)"},"purple40":{"value":"rgba(213,194,211,1)"},"purple60":{"value":"rgba(199,148,192,1)"},"purple80":{"value":"rgba(200,90,185,1)"},"purple100":{"value":"rgba(188,50,172,1)"},"purple200":{"value":"rgba(156,71,141,1)"},"purple300":{"value":"rgba(104,65,96,1)"},"purple400":{"value":"rgba(66,50,63,1)"},"purple500":{"value":"rgba(33,29,32,1)"},"purple600":{"value":"rgba(19,18,19,1)"},"teal40":{"value":"rgba(190,202,204,1)"},"teal60":{"value":"rgba(137,171,177,1)"},"teal80":{"value":"rgba(67,143,155,1)"},"teal100":{"value":"rgba(2,89,103,1)"},"teal200":{"value":"rgba(58,111,122,1)"},"teal300":{"value":"rgba(56,82,87,1)"},"teal400":{"value":"rgba(45,57,59,1)"},"teal500":{"value":"rgba(27,32,32,1)"},"teal600":{"value":"rgba(11,12,12,1)"},"orange40":{"value":"rgba(195,166,143,1)"},"orange60":{"value":"rgba(188,118,63,1)"},"orange80":{"value":"rgba(170,76,0,1)"},"orange100":{"value":"rgba(137,66,8,1)"},"orange200":{"value":"rgba(124,70,33,1)"},"orange300":{"value":"rgba(89,59,39,1)"},"orange400":{"value":"rgba(59,46,35,1)"},"orange500":{"value":"rgba(32,29,25,1)"},"orange600":{"value":"rgba(19,18,17,1)"},"green40":{"value":"rgba(159,177,151,1)"},"green60":{"value":"rgba(104,147,85,1)"},"green80":{"value":"rgba(59,119,31,1)"},"green100":{"value":"rgba(33,103,57,1)"},"green200":{"value":"rgba(61,93,45,1)"},"green300":{"value":"rgba(54,71,45,1)"},"green400":{"value":"rgba(43,52,39,1)"},"green500":{"value":"rgba(27,30,25,1)"},"green600":{"value":"rgba(12,12,12,1)"},"gold40":{"value":"rgba(181,161,130,1)"},"gold60":{"value":"rgba(168,113,31,1)"},"gold80":{"value":"rgba(119,84,29,1)"},"gold100":{"value":"rgba(93,65,22,1)"},"gold200":{"value":"rgba(95,71,34,1)"},"gold300":{"value":"rgba(72,58,41,1)"},"gold400":{"value":"rgba(51,45,36,1)"},"gold500":{"value":"rgba(32,30,27,1)"},"gold600":{"value":"rgba(21,20,19,1)"},"yellow100":{"value":"rgba(29,27,8,1)"},"yellow600":{"value":"rgba(8,8,7,1)"},"mustard40":{"value":"rgba(178,164,128,1)"},"mustard60":{"value":"rgba(156,118,24,1)"},"mustard80":{"value":"rgba(117,84,0,1)"},"mustard100":{"value":"rgba(91,65,12,1)"},"mustard200":{"value":"rgba(96,70,14,1)"},"mustard300":{"value":"rgba(75,57,23,1)"},"mustard400":{"value":"rgba(54,44,24,1)"},"mustard500":{"value":"rgba(34,30,21,1)"},"mustard600":{"value":"rgba(19,18,17,1)"}}
for(token in colors){
let node=document.createElement("div");
let p=document.createElement("p");
node.style.backgroundColor=colors[token].value;
p.innerText=token;
node.appendChild(p);
document.body.appendChild(node);
}
</script>
</html>