-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolors_in_image2.html
78 lines (78 loc) · 9.46 KB
/
colors_in_image2.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><head><style>.color-box{width: 50px; height: 20px; display: inline-block; margin-right: 10px; border: 1px solid #000;}.flex-container {display: flex;}.flex-child {flex: 1; padding: 10px;}img{image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; width: 500px; height: auto;}</style></head><body>
<div class="flex-container">
<div class="flex-child"><img src="./traits/jaguarparts.png" alt="Source Image"></div>
<div class="flex-child"><h1>Colors in Image</h1>
<ul>
<li><button class="color-box" style="background-color:#fef9df;" onclick="copyToClipboard('#fef9df')"></button> #fef9df - 1</li>
<li><button class="color-box" style="background-color:#fff7df;" onclick="copyToClipboard('#fff7df')"></button> #fff7df - 22</li>
<li><button class="color-box" style="background-color:#fcf6df;" onclick="copyToClipboard('#fcf6df')"></button> #fcf6df - 1</li>
<li><button class="color-box" style="background-color:#fef5df;" onclick="copyToClipboard('#fef5df')"></button> #fef5df - 1</li>
<li><button class="color-box" style="background-color:#00b7ef;" onclick="copyToClipboard('#00b7ef')"></button> #00b7ef - 67</li>
<li><button class="color-box" style="background-color:#fdfade;" onclick="copyToClipboard('#fdfade')"></button> #fdfade - 1</li>
<li><button class="color-box" style="background-color:#fff6de;" onclick="copyToClipboard('#fff6de')"></button> #fff6de - 9</li>
<li><button class="color-box" style="background-color:#fff5de;" onclick="copyToClipboard('#fff5de')"></button> #fff5de - 2</li>
<li><button class="color-box" style="background-color:#546d8e;" onclick="copyToClipboard('#546d8e')"></button> #546d8e - 121</li>
<li><button class="color-box" style="background-color:#fff8dd;" onclick="copyToClipboard('#fff8dd')"></button> #fff8dd - 21</li>
<li><button class="color-box" style="background-color:#fff7dd;" onclick="copyToClipboard('#fff7dd')"></button> #fff7dd - 15</li>
<li><button class="color-box" style="background-color:#fef6dd;" onclick="copyToClipboard('#fef6dd')"></button> #fef6dd - 12</li>
<li><button class="color-box" style="background-color:#fff5dd;" onclick="copyToClipboard('#fff5dd')"></button> #fff5dd - 354</li>
<li><button class="color-box" style="background-color:#fef5dd;" onclick="copyToClipboard('#fef5dd')"></button> #fef5dd - 6</li>
<li><button class="color-box" style="background-color:#fdf5dd;" onclick="copyToClipboard('#fdf5dd')"></button> #fdf5dd - 1</li>
<li><button class="color-box" style="background-color:#a8e61d;" onclick="copyToClipboard('#a8e61d')"></button> #a8e61d - 20</li>
<li><button class="color-box" style="background-color:#fff7dc;" onclick="copyToClipboard('#fff7dc')"></button> #fff7dc - 3</li>
<li><button class="color-box" style="background-color:#fef7dc;" onclick="copyToClipboard('#fef7dc')"></button> #fef7dc - 1</li>
<li><button class="color-box" style="background-color:#fff6dc;" onclick="copyToClipboard('#fff6dc')"></button> #fff6dc - 33</li>
<li><button class="color-box" style="background-color:#fef6dc;" onclick="copyToClipboard('#fef6dc')"></button> #fef6dc - 2</li>
<li><button class="color-box" style="background-color:#fff5dc;" onclick="copyToClipboard('#fff5dc')"></button> #fff5dc - 32</li>
<li><button class="color-box" style="background-color:#fef4dc;" onclick="copyToClipboard('#fef4dc')"></button> #fef4dc - 15</li>
<li><button class="color-box" style="background-color:#22b14c;" onclick="copyToClipboard('#22b14c')"></button> #22b14c - 53</li>
<li><button class="color-box" style="background-color:#9c5a3c;" onclick="copyToClipboard('#9c5a3c')"></button> #9c5a3c - 45</li>
<li><button class="color-box" style="background-color:#fffeeb;" onclick="copyToClipboard('#fffeeb')"></button> #fffeeb - 1</li>
<li><button class="color-box" style="background-color:#fef7db;" onclick="copyToClipboard('#fef7db')"></button> #fef7db - 9</li>
<li><button class="color-box" style="background-color:#fff6db;" onclick="copyToClipboard('#fff6db')"></button> #fff6db - 721</li>
<li><button class="color-box" style="background-color:#fef6db;" onclick="copyToClipboard('#fef6db')"></button> #fef6db - 4</li>
<li><button class="color-box" style="background-color:#fff5db;" onclick="copyToClipboard('#fff5db')"></button> #fff5db - 5</li>
<li><button class="color-box" style="background-color:#fef5db;" onclick="copyToClipboard('#fef5db')"></button> #fef5db - 8</li>
<li><button class="color-box" style="background-color:#fff4db;" onclick="copyToClipboard('#fff4db')"></button> #fff4db - 1</li>
<li><button class="color-box" style="background-color:#fef4db;" onclick="copyToClipboard('#fef4db')"></button> #fef4db - 3</li>
<li><button class="color-box" style="background-color:#fff3db;" onclick="copyToClipboard('#fff3db')"></button> #fff3db - 2</li>
<li><button class="color-box" style="background-color:#fff6da;" onclick="copyToClipboard('#fff6da')"></button> #fff6da - 6</li>
<li><button class="color-box" style="background-color:#fef5da;" onclick="copyToClipboard('#fef5da')"></button> #fef5da - 127</li>
<li><button class="color-box" style="background-color:#fff4da;" onclick="copyToClipboard('#fff4da')"></button> #fff4da - 6</li>
<li><button class="color-box" style="background-color:#99d9ea;" onclick="copyToClipboard('#99d9ea')"></button> #99d9ea - 87</li>
<li><button class="color-box" style="background-color:#fffee9;" onclick="copyToClipboard('#fffee9')"></button> #fffee9 - 1</li>
<li><button class="color-box" style="background-color:#fff6d9;" onclick="copyToClipboard('#fff6d9')"></button> #fff6d9 - 61</li>
<li><button class="color-box" style="background-color:#fff5d9;" onclick="copyToClipboard('#fff5d9')"></button> #fff5d9 - 1</li>
<li><button class="color-box" style="background-color:#fef5d9;" onclick="copyToClipboard('#fef5d9')"></button> #fef5d9 - 1</li>
<li><button class="color-box" style="background-color:#2f3699;" onclick="copyToClipboard('#2f3699')"></button> #2f3699 - 52</li>
<li><button class="color-box" style="background-color:#fff7d8;" onclick="copyToClipboard('#fff7d8')"></button> #fff7d8 - 2</li>
<li><button class="color-box" style="background-color:#fef5d8;" onclick="copyToClipboard('#fef5d8')"></button> #fef5d8 - 20</li>
<li><button class="color-box" style="background-color:#fff4d8;" onclick="copyToClipboard('#fff4d8')"></button> #fff4d8 - 1</li>
<li><button class="color-box" style="background-color:#fcf2d8;" onclick="copyToClipboard('#fcf2d8')"></button> #fcf2d8 - 1</li>
<li><button class="color-box" style="background-color:#6f3198;" onclick="copyToClipboard('#6f3198')"></button> #6f3198 - 127</li>
<li><button class="color-box" style="background-color:#fefae7;" onclick="copyToClipboard('#fefae7')"></button> #fefae7 - 1</li>
<li><button class="color-box" style="background-color:#fdf4d7;" onclick="copyToClipboard('#fdf4d7')"></button> #fdf4d7 - 1</li>
<li><button class="color-box" style="background-color:#fefbe5;" onclick="copyToClipboard('#fefbe5')"></button> #fefbe5 - 1</li>
<li><button class="color-box" style="background-color:#fef9e4;" onclick="copyToClipboard('#fef9e4')"></button> #fef9e4 - 1</li>
<li><button class="color-box" style="background-color:#ed1c24;" onclick="copyToClipboard('#ed1c24')"></button> #ed1c24 - 38</li>
<li><button class="color-box" style="background-color:#fdf8e3;" onclick="copyToClipboard('#fdf8e3')"></button> #fdf8e3 - 2</li>
<li><button class="color-box" style="background-color:#fcf8e3;" onclick="copyToClipboard('#fcf8e3')"></button> #fcf8e3 - 1</li>
<li><button class="color-box" style="background-color:#fffbe1;" onclick="copyToClipboard('#fffbe1')"></button> #fffbe1 - 2</li>
<li><button class="color-box" style="background-color:#fff7e1;" onclick="copyToClipboard('#fff7e1')"></button> #fff7e1 - 3</li>
<li><button class="color-box" style="background-color:#fff6e1;" onclick="copyToClipboard('#fff6e1')"></button> #fff6e1 - 1</li>
<li><button class="color-box" style="background-color:#ffa3b1;" onclick="copyToClipboard('#ffa3b1')"></button> #ffa3b1 - 54</li>
<li><button class="color-box" style="background-color:#709ad1;" onclick="copyToClipboard('#709ad1')"></button> #709ad1 - 40</li>
<li><button class="color-box" style="background-color:#fff9e0;" onclick="copyToClipboard('#fff9e0')"></button> #fff9e0 - 3</li>
<li><button class="color-box" style="background-color:#fff8e0;" onclick="copyToClipboard('#fff8e0')"></button> #fff8e0 - 1</li>
<li><button class="color-box" style="background-color:#fef8e0;" onclick="copyToClipboard('#fef8e0')"></button> #fef8e0 - 1</li>
<li><button class="color-box" style="background-color:#fff7e0;" onclick="copyToClipboard('#fff7e0')"></button> #fff7e0 - 1</li>
<li><button class="color-box" style="background-color:#fef7e0;" onclick="copyToClipboard('#fef7e0')"></button> #fef7e0 - 1</li>
<li><button class="color-box" style="background-color:#fdf6e0;" onclick="copyToClipboard('#fdf6e0')"></button> #fdf6e0 - 1</li>
<li><button class="color-box" style="background-color:#fef5e0;" onclick="copyToClipboard('#fef5e0')"></button> #fef5e0 - 1</li>
<li><button class="color-box" style="background-color:#fff200;" onclick="copyToClipboard('#fff200')"></button> #fff200 - 24</li>
<li><button class="color-box" style="background-color:#ff7e00;" onclick="copyToClipboard('#ff7e00')"></button> #ff7e00 - 208</li>
<li><button class="color-box" style="background-color:#990030;" onclick="copyToClipboard('#990030')"></button> #990030 - 29</li>
</ul></div></div>
<script>function copyToClipboard(text) { var dummy = document.createElement("textarea"); document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); alert("Copied " + text);}</script>
</body></html>