-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
316 lines (273 loc) · 22.5 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Color picker</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Color picker with a color palette">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/inter.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/colors.css">
<!-- https://www.dublincore.org/specifications/dublin-core/dc-html/2008-08-04/ -->
<!-- https://dublincore.org/specifications/dublin-core/dcmi-terms/2012-06-14/?v=terms -->
<link rel="schema.DC" href="https://purl.org/dc/elements/1.1/">
<link rel="schema.DCTERMS" href="https://purl.org/dc/terms/">
<link rel="schema.XSD" href="https://www.w3.org/2001/XMLSchema#">
<meta name="DC.Format" content="text/html">
<meta name="DC.Publisher" content="Daniel Schildt">
<meta name="DC.Creator" content="Daniel Schildt">
<meta name="DC.Language" content="en">
<meta name="DC.Type" content="InteractiveResource">
<meta name="DC.Rights" content="Copyright 2019 Daniel Schildt">
<meta name="DC.Title" lang="en" content="Color picker">
<meta name="DCTERMS.modified" scheme="XSD.date" content="2022-10-10">
<meta name="DC.Subject" content="HTML">
<meta name="DC.Subject" content="CSS">
<meta name="DC.Subject" content="Colors">
<meta name="DC.Subject" content="Color picker">
<!-- https://scholar.google.com/intl/en/scholar/inclusion.html#indexing -->
<meta name="citation_title" content="Color picker">
<meta name="citation_author" content="Schildt, Daniel">
<meta name="citation_publication_date" content="2019/06/27">
<meta name="citation_keywords" content="HTML">
<meta name="citation_keywords" content="CSS">
<meta name="citation_keywords" content="Colors">
<meta name="citation_keywords" content="Color picker">
<!-- Twitter Card metadata -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@autiomaa">
<meta name="twitter:title" content="Color picker">
<meta name="twitter:image" content="https://colorpicker.autiomaa.org/images/2022-10-10-colorpicker-twitter-post.png">
<meta property="twitter:image:alt" content="Illustration of two yellow rings with a yellow dot in the middle, on top of a black background.">
<!-- Open Graph tags -->
<meta property="og:title" content="Color picker">
<meta property="og:site_name" content="Color picker">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:url" content="https://colorpicker.autiomaa.org/">
<meta property="og:description" content="Color picker with a color palette">
<!-- Images are cached based on the URL and won't be updated unless the image URL changes. -->
<meta property="og:image" content="https://colorpicker.autiomaa.org/images/2022-10-10-colorpicker-twitter-post.png">
<meta property="og:image:width" content="1645">
<meta property="og:image:height" content="1087">
<meta property="og:image:alt" content="Illustration of two yellow rings with a yellow dot in the middle, on top of a black background.">
<!-- Canonical URL is useful for avoiding "duplicate content" issues from search engines
when there is a staging environment with different URL. -->
<link rel="canonical" href="https://colorpicker.autiomaa.org/">
<!-- Schema.org metadata -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "https://colorpicker.autiomaa.org/"
}
</script>
<!-- Disable translation prompt - Tells Google not to provide a translation for this document -->
<meta name="google" content="notranslate">
<!-- Disallow Twitter from using your site's info for personalization purposes -->
<meta name="twitter:dnt" content="on">
<!-- Disallow Pinterest from using site's contents. The `description` is optional. -->
<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">
<!-- <link rel="manifest" href="site.webmanifest"> -->
<!-- <link rel="apple-touch-icon" href="icon.png"> -->
<!-- Place favicon.ico in the root directory -->
<link rel="icon" href="images/colorpicker-apple-touch-icon.png" type="image/png">
<link rel="apple-touch-icon" href="images/colorpicker-apple-touch-icon.png">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<div class="wrapper">
<header class="header">
<h1>Color picker<br>
<span>with the default color names from browsers</span>
</h1>
<p>
Click a color to copy the color value to your clipboard.
</p>
</header>
<button class="panel copybutton white" data-clipboard-text="white">white</button>
<button class="panel copybutton gainsboro" data-clipboard-text="gainsboro">gainsboro</button>
<button class="panel copybutton lightgray" data-clipboard-text="lightgray">lightgray</button>
<button class="panel copybutton lightgrey" data-clipboard-text="lightgrey">lightgrey</button>
<button class="panel copybutton silver" data-clipboard-text="silver">silver</button>
<button class="panel copybutton darkgray" data-clipboard-text="darkgray">darkgray</button>
<button class="panel copybutton darkgrey" data-clipboard-text="darkgrey">darkgrey</button>
<button class="panel copybutton gray" data-clipboard-text="gray">gray</button>
<button class="panel copybutton grey" data-clipboard-text="grey">grey</button>
<button class="panel copybutton dimgray" data-clipboard-text="dimgray">dimgray</button>
<button class="panel copybutton dimgrey" data-clipboard-text="dimgrey">dimgrey</button>
<button class="panel copybutton lightslategray" data-clipboard-text="lightslategray">lightslategray</button>
<button class="panel copybutton lightslategrey" data-clipboard-text="lightslategrey">lightslategrey</button>
<button class="panel copybutton slategray" data-clipboard-text="slategray">slategray</button>
<button class="panel copybutton slategrey" data-clipboard-text="slategrey">slategrey</button>
<button class="panel copybutton darkslategray" data-clipboard-text="darkslategray">darkslategray</button>
<button class="panel copybutton darkslategrey" data-clipboard-text="darkslategrey">darkslategrey</button>
<!-- `chucknorris` is NOT a valid color, but... -->
<button class="panel copybutton chucknorris" data-clipboard-text="chucknorris">chucknorris</button>
<button class="panel copybutton black" data-clipboard-text="black">black</button>
<button class="panel copybutton aliceblue" data-clipboard-text="aliceblue">aliceblue</button>
<button class="panel copybutton lavender" data-clipboard-text="lavender">lavender</button>
<button class="panel copybutton powderblue" data-clipboard-text="powderblue">powderblue</button>
<button class="panel copybutton lightblue" data-clipboard-text="lightblue">lightblue</button>
<button class="panel copybutton lightskyblue" data-clipboard-text="lightskyblue">lightskyblue</button>
<button class="panel copybutton skyblue" data-clipboard-text="skyblue">skyblue</button>
<button class="panel copybutton deepskyblue" data-clipboard-text="deepskyblue">deepskyblue</button>
<button class="panel copybutton lightsteelblue" data-clipboard-text="lightsteelblue">lightsteelblue</button>
<button class="panel copybutton dodgerblue" data-clipboard-text="dodgerblue">dodgerblue</button>
<button class="panel copybutton cornflowerblue" data-clipboard-text="cornflowerblue">cornflowerblue</button>
<button class="panel copybutton steelblue" data-clipboard-text="steelblue">steelblue</button>
<button class="panel copybutton cadetblue" data-clipboard-text="cadetblue">cadetblue</button>
<button class="panel copybutton mediumslateblue" data-clipboard-text="mediumslateblue">mediumslateblue</button>
<button class="panel copybutton slateblue" data-clipboard-text="slateblue">slateblue</button>
<button class="panel copybutton darkslateblue" data-clipboard-text="darkslateblue">darkslateblue</button>
<button class="panel copybutton royalblue" data-clipboard-text="royalblue">royalblue</button>
<button class="panel copybutton blue" data-clipboard-text="blue">blue</button>
<button class="panel copybutton mediumblue" data-clipboard-text="mediumblue">mediumblue</button>
<button class="panel copybutton darkblue" data-clipboard-text="darkblue">darkblue</button>
<button class="panel copybutton midnightblue" data-clipboard-text="midnightblue">midnightblue</button>
<button class="panel copybutton navy" data-clipboard-text="navy">navy</button>
<button class="panel copybutton blueviolet" data-clipboard-text="blueviolet">blueviolet</button>
<button class="panel copybutton indigo" data-clipboard-text="indigo">indigo</button>
<button class="panel copybutton lightcyan" data-clipboard-text="lightcyan">lightcyan</button>
<button class="panel copybutton cyan aqua" data-clipboard-text="cyan">cyan aqua</button>
<button class="panel copybutton aquamarine" data-clipboard-text="aquamarine">aquamarine</button>
<button class="panel copybutton mediumaquamarine" data-clipboard-text="mediumaquamarine">mediumaquamarine</button>
<button class="panel copybutton paleturquoise" data-clipboard-text="paleturquoise">paleturquoise</button>
<button class="panel copybutton turquoise" data-clipboard-text="turquoise">turquoise</button>
<button class="panel copybutton mediumturquoise" data-clipboard-text="mediumturquoise">mediumturquoise</button>
<button class="panel copybutton darkturquoise" data-clipboard-text="darkturquoise">darkturquoise</button>
<button class="panel copybutton lightseagreen" data-clipboard-text="lightseagreen">lightseagreen</button>
<button class="panel copybutton cadetblue" data-clipboard-text="cadetblue">cadetblue</button>
<button class="panel copybutton darkcyan" data-clipboard-text="darkcyan">darkcyan</button>
<button class="panel copybutton teal" data-clipboard-text="teal">teal</button>
<button class="panel copybutton lawngreen" data-clipboard-text="lawngreen">lawngreen</button>
<button class="panel copybutton chartreuse" data-clipboard-text="chartreuse">chartreuse</button>
<button class="panel copybutton limegreen" data-clipboard-text="limegreen">limegreen</button>
<button class="panel copybutton lime" data-clipboard-text="lime">lime</button>
<button class="panel copybutton forestgreen" data-clipboard-text="forestgreen">forestgreen</button>
<button class="panel copybutton green" data-clipboard-text="green">green</button>
<button class="panel copybutton darkgreen" data-clipboard-text="darkgreen">darkgreen</button>
<button class="panel copybutton greenyellow" data-clipboard-text="greenyellow">greenyellow</button>
<button class="panel copybutton yellowgreen" data-clipboard-text="yellowgreen">yellowgreen</button>
<button class="panel copybutton springgreen" data-clipboard-text="springgreen">springgreen</button>
<button class="panel copybutton mediumspringgreen" data-clipboard-text="mediumspringgreen">mediumspringgreen</button>
<button class="panel copybutton lightgreen" data-clipboard-text="lightgreen">lightgreen</button>
<button class="panel copybutton palegreen" data-clipboard-text="palegreen">palegreen</button>
<button class="panel copybutton darkseagreen" data-clipboard-text="darkseagreen">darkseagreen</button>
<button class="panel copybutton mediumseagreen" data-clipboard-text="mediumseagreen">mediumseagreen</button>
<button class="panel copybutton lightseagreen" data-clipboard-text="lightseagreen">lightseagreen</button>
<button class="panel copybutton seagreen" data-clipboard-text="seagreen">seagreen</button>
<button class="panel copybutton olive" data-clipboard-text="olive">olive</button>
<button class="panel copybutton darkolivegreen" data-clipboard-text="darkolivegreen">darkolivegreen</button>
<button class="panel copybutton olivedrab" data-clipboard-text="olivedrab">olivedrab</button>
<button class="panel copybutton maroon" data-clipboard-text="maroon">maroon</button>
<button class="panel copybutton darkred" data-clipboard-text="darkred">darkred</button>
<button class="panel copybutton brown" data-clipboard-text="brown">brown</button>
<button class="panel copybutton firebrick" data-clipboard-text="firebrick">firebrick</button>
<button class="panel copybutton crimson" data-clipboard-text="crimson">crimson</button>
<button class="panel copybutton coral" data-clipboard-text="coral">coral</button>
<button class="panel copybutton tomato" data-clipboard-text="tomato">tomato</button>
<button class="panel copybutton orangered" data-clipboard-text="orangered">orangered</button>
<button class="panel copybutton gold" data-clipboard-text="gold">gold</button>
<button class="panel copybutton orange" data-clipboard-text="orange">orange</button>
<button class="panel copybutton darkorange" data-clipboard-text="darkorange">darkorange</button>
<button class="panel copybutton pink" data-clipboard-text="pink">pink</button>
<button class="panel copybutton lightpink" data-clipboard-text="lightpink">lightpink</button>
<button class="panel copybutton hotpink" data-clipboard-text="hotpink">hotpink</button>
<button class="panel copybutton deeppink" data-clipboard-text="deeppink">deeppink</button>
<button class="panel copybutton palevioletred" data-clipboard-text="palevioletred">palevioletred</button>
<button class="panel copybutton mediumvioletred" data-clipboard-text="mediumvioletred">mediumvioletred</button>
<button class="panel copybutton lavender" data-clipboard-text="lavender">lavender</button>
<button class="panel copybutton thistle" data-clipboard-text="thistle">thistle</button>
<button class="panel copybutton plum" data-clipboard-text="plum">plum</button>
<button class="panel copybutton violet" data-clipboard-text="violet">violet</button>
<button class="panel copybutton orchid" data-clipboard-text="orchid">orchid</button>
<button class="panel copybutton fuchsia" data-clipboard-text="fuchsia">fuchsia</button>
<button class="panel copybutton magenta" data-clipboard-text="magenta">magenta</button>
<button class="panel copybutton mediumorchid" data-clipboard-text="mediumorchid">mediumorchid</button>
<button class="panel copybutton mediumpurple" data-clipboard-text="mediumpurple">mediumpurple</button>
<button class="panel copybutton blueviolet" data-clipboard-text="blueviolet">blueviolet</button>
<button class="panel copybutton darkviolet" data-clipboard-text="darkviolet">darkviolet</button>
<button class="panel copybutton darkorchid" data-clipboard-text="darkorchid">darkorchid</button>
<button class="panel copybutton darkmagenta" data-clipboard-text="darkmagenta">darkmagenta</button>
<button class="panel copybutton purple" data-clipboard-text="purple">purple</button>
<!-- https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/ -->
<button class="panel copybutton rebeccapurple" data-clipboard-text="rebeccapurple">rebeccapurple</button>
<button class="panel copybutton indigo" data-clipboard-text="indigo">indigo</button>
<button class="panel copybutton lightsalmon" data-clipboard-text="lightsalmon">lightsalmon</button>
<button class="panel copybutton salmon" data-clipboard-text="salmon">salmon</button>
<button class="panel copybutton darksalmon" data-clipboard-text="darksalmon">darksalmon</button>
<button class="panel copybutton lightcoral" data-clipboard-text="lightcoral">lightcoral</button>
<button class="panel copybutton indianred" data-clipboard-text="indianred">indianred</button>
<button class="panel copybutton crimson" data-clipboard-text="crimson">crimson</button>
<button class="panel copybutton red" data-clipboard-text="red">red</button>
<button class="panel copybutton darkred" data-clipboard-text="darkred">darkred</button>
<button class="panel copybutton maroon" data-clipboard-text="maroon">maroon</button>
<button class="panel copybutton tomato" data-clipboard-text="tomato">tomato</button>
<button class="panel copybutton orangered" data-clipboard-text="orangered">orangered</button>
<button class="panel copybutton palevioletred" data-clipboard-text="palevioletred">palevioletred</button>
<button class="panel copybutton white" data-clipboard-text="white">white</button>
<button class="panel copybutton snow" data-clipboard-text="snow">snow</button>
<button class="panel copybutton honeydew" data-clipboard-text="honeydew">honeydew</button>
<button class="panel copybutton mintcream" data-clipboard-text="mintcream">mintcream</button>
<button class="panel copybutton azure" data-clipboard-text="azure">azure</button>
<button class="panel copybutton aliceblue" data-clipboard-text="aliceblue">aliceblue</button>
<button class="panel copybutton ghostwhite" data-clipboard-text="ghostwhite">ghostwhite</button>
<button class="panel copybutton whitesmoke" data-clipboard-text="whitesmoke">whitesmoke</button>
<button class="panel copybutton seashell" data-clipboard-text="seashell">seashell</button>
<button class="panel copybutton beige" data-clipboard-text="beige">beige</button>
<button class="panel copybutton oldlace" data-clipboard-text="oldlace">oldlace</button>
<button class="panel copybutton floralwhite" data-clipboard-text="floralwhite">floralwhite</button>
<button class="panel copybutton ivory" data-clipboard-text="ivory">ivory</button>
<button class="panel copybutton antiquewhite" data-clipboard-text="antiquewhite">antiquewhite</button>
<button class="panel copybutton linen" data-clipboard-text="linen">linen</button>
<button class="panel copybutton lavenderblush" data-clipboard-text="lavenderblush">lavenderblush</button>
<button class="panel copybutton mistyrose" data-clipboard-text="mistyrose">mistyrose</button>
<button class="panel copybutton navajowhite" data-clipboard-text="navajowhite">navajowhite</button>
<button class="panel copybutton lightyellow" data-clipboard-text="lightyellow">lightyellow</button>
<button class="panel copybutton lemonchiffon" data-clipboard-text="lemonchiffon">lemonchiffon</button>
<button class="panel copybutton lightgoldenrodyellow" data-clipboard-text="lightgoldenrodyellow">lightgoldenrodyellow</button>
<button class="panel copybutton papayawhip" data-clipboard-text="papayawhip">papayawhip</button>
<button class="panel copybutton moccasin" data-clipboard-text="moccasin">moccasin</button>
<button class="panel copybutton peachpuff" data-clipboard-text="peachpuff">peachpuff</button>
<button class="panel copybutton palegoldenrod" data-clipboard-text="palegoldenrod">palegoldenrod</button>
<button class="panel copybutton khaki" data-clipboard-text="khaki">khaki</button>
<button class="panel copybutton darkkhaki" data-clipboard-text="darkkhaki">darkkhaki</button>
<button class="panel copybutton yellow" data-clipboard-text="yellow">yellow</button>
<button class="panel copybutton olive" data-clipboard-text="olive">olive</button>
<button class="panel copybutton greenyellow" data-clipboard-text="greenyellow">greenyellow</button>
<button class="panel copybutton yellowgreen" data-clipboard-text="yellowgreen">yellowgreen</button>
<button class="panel copybutton tan" data-clipboard-text="tan">tan</button>
<button class="panel copybutton burlywood" data-clipboard-text="burlywood">burlywood</button>
<!-- Placeholders for future additions... -->
<!--
<div class="panel copybutton white" data-clipboard-text="white">white</div>
<div class="panel copybutton white" data-clipboard-text="white">white</div>
<div class="panel copybutton white" data-clipboard-text="white">white</div>
<div class="panel copybutton white" data-clipboard-text="white">white</div>
<div class="panel copybutton white" data-clipboard-text="white">white</div>
-->
<footer class="footer">
<p>
Tiny project created by <a href="https://autiomaa.org/" title="Link to personal website" target="_blank" role="link" rel="noopener noreferrer">Daniel Schildt</a>.<br>
(<a href="https://twitter.com/autiomaa" title="@autiomaa on Twitter" target="_blank" role="link" rel="noopener noreferrer">@autiomaa on Twitter</a>, <a href="https://github.com/d2s" title="@d2s on GitHub" target="_blank" role="link" rel="noopener noreferrer">@d2s on GitHub</a>, <a href="https://codepen.io/d2s/" title="@d2s on CodePen" target="_blank" role="link" rel="noopener noreferrer">@d2s on CodePen</a>).
</p>
<p>
CSS Grid based on the <a href="https://gridbyexample.com/patterns/header-asmany-footer/" title="Article: Header, footer, centre panel containing as many items as fit" target="_blank" role="link" rel="noopener noreferrer">Grid by Example</a> article written by <a href="https://codepen.io/rachelandrew/" title="@rachelandrew on CodePen" target="_blank" role="link" rel="noopener noreferrer">Rachel Andrew</a>.<br>
Color list inspired by the Web Colors section of <a href="https://www.rapidtables.com/web/color/index.html" title="Link to Web Colors section" target="_blank" role="link" rel="noopener noreferrer">RapidTables</a> website.<br>
<a href="https://clipboardjs.com/" title="Link to clipboard.js website" target="_blank" role="link" rel="noopener noreferrer">clipboard.js</a> functionality based on an <a href="https://codepen.io/chriscoyier/pen/bBBLRE" title="CodePen example: Simplest Possible Clipboard.js" target="_blank" role="link" rel="noopener noreferrer">example</a> from Chris Coyier.<br>
<a href="https://rsms.me/inter/" role="link" rel="noopener noreferrer">Inter</a> font typeface from <a href="https://rsms.me/" role="link" rel="noopener noreferrer">Rasmus Andersson</a>.
</p>
<p>
Source code available on the <a href="https://github.com/d2s/colorpicker/" title="d2s/colorpicker GitHub repository" target="_blank" role="link" rel="noopener noreferrer">GitHub repository</a>.
</p>
</footer>
</div>
<script src="js/vendor/clipboard-2.0.11.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>