This repository has been archived by the owner on Jul 24, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
color-palettes-css.html
208 lines (196 loc) · 6.69 KB
/
color-palettes-css.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
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta name="description" content="These are color sets that I think are pleasant."><!-- Bing --><meta name="msvalidate.01" content="45CBBE1BD8265A2217DFDA630EB8F84A" /><title>Tiny Brain Fans - Color Palettes (CSS)</title><link rel="stylesheet" href="tinystyle.css"></head><body>
<main id="main"><article id="content"><h1 id="title">Color Palettes (CSS)</h1><h2><a href="https://monokai.pro/" target="_blank">Monokai</a>[3]</h2>
<pre><code class="language-css">:root {
--red: #ff6188;
--orange: #e87d3e;
--yellow: #ffd866;
--green: #b4d273;
--blue: #6c99bb;
--purple: #9e86c8;
--pink: #b05279;
--white: #d6d6d6;
--gray: #797979;
--black: #2e2e2e;
}
</code></pre>
<h2><a href="https://en.wikipedia.org/wiki/PICO-8" target="_blank">PICO-8</a></h2>
<pre><code class="language-css">:root {
--black: #000000;
--dark-gray: #5f574f;
--light-gray: #c2c3c7;
--white: #fff1e8;
--pink: #ff77a8;
--peach: #ffccaa;
--red: #ff004d;
--yellow-orange: #ffa300;
--yellow: #ffec27;
--green: #00e436;
--dark-green: #008751;
--cyan: #29adff;
--dark-blue: #1d2b53;
--dark-magenta: #7e2553;
--indigo: #83769c;
--brown: #ab5236;
}
</code></pre>
<h2><a href="https://github.com/mrmrs/colors" target="_blank">MRMRS</a></h2>
<pre><code class="language-css">/*
VARIABLES
- Cool
- Warm
- Gray Scale
*/
:root {
--aqua: #7FDBFF;
--blue: #0074D9;
--navy: #001F3F;
--teal: #39CCCC;
--green: #2ECC40;
--olive: #3D9970;
--lime: #01FF70;
--yellow: #FFDC00;
--orange: #FF851B;
--red: #FF4136;
--fuchsia: #F012BE;
--purple: #B10DC9;
--maroon: #85144B;
--white: #FFFFFF;
--silver: #DDDDDD;
--gray: #AAAAAA;
--black: #111111;
}
</code></pre>
<h2>Windows 3.1</h2>
<pre><code class="language-css">/*
VARIABLES:
- Dark
- Bright
- Grayscale
*/
:root {
--dark-red: #7e0000; /* maroon */
--dark-yellow: #7e7e00; /* olive */
--dark-green: #047e00; /* plant green */
--dark-cyan: #047e7e; /* teal */
--dark-blue: #00007e; /* navy blue */
--dark-purple: #7e007e; /* plum */
--red: #fe0000;
--yellow: #ffff04;
--green: #06ff04; /* neon green */
--cyan: #06ffff; /* aqua */
--blue: #0000ff;
--purple: #fe00ff; /* fuschia */
--white: #000000;
--gray: #7e7e7e;
--dark-gray: #bebebe;
--black: #ffffff;
}
</code></pre>
<h2><a href="https://en.wikipedia.org/wiki/ANSI_escape_code" target="_blank">Original VGA</a></h2>
<pre><code class="language-css">/*
VARIABLES:
- Dark
- Bright
- Grayscale
*/
:root {
--dark-red: #aa0000; /* candy apple */
--dark-orange: #aa5500; /* tan */
--dark-green: #00aa00; /* grass */
--dark-cyan: #00aaaa; /* tiffany blue */
--dark-blue: #0000aa; /* deep blue */
--dark-purple: #aa00aa; /* magenta */
--red: #ff5555; /* coral */
--yellow: #ffff55; /* daffodil */
--green: #55ff55; /* slime */
--cyan: #55ffff; /* cyan */
--blue: #5555ff; /* light blue */
--purple: #ff55ff; /* pink */
--white: #ffffff;
--gray-light: #aaaaaa;
--gray-dark: #555555;
--black: #000000;
}
</code></pre>
<h2>Colorblindness Colors[1]</h2>
<p>From their page:</p>
<blockquote>
<p>This is a proposal of color pallet that is
1: unambiguous both to colorblinds and non-colorblinds,
2: with vivid colors so that color names are easy to identify,
3: can be printable with similar color both on screen and when printed. </p>
<ul>
<li>
<p>For red, vermilion is used since it is recognizable also to protanopes. </p>
</li>
<li>
<p>Colors between yellow and green are all avoided, since they are indistinguishable with yellow and orange. </p>
</li>
<li>
<p>For green, bluish green is chosen so that it won't be confused with red or brown. </p>
</li>
<li>
<p>Since violet is close to blue and appear the same to colorblinds, reddish purple is chosen. </p>
</li>
<li>
<p>Between vermilion and yellow, three colors with different apparent intensity is selected. </p>
</li>
<li>
<p>Sky blue and blue are chosen so that they are distinguishable with there difference in brightness and saturation. </p>
</li>
<li>
<p>Even for non-coloblinds, thin lines and small characters in blue and yellow are hard read. For thin lines and small objects, use darker blue and orange is preferable to sky blue and yellow. </p>
</li>
</ul>
<p>When combining colors from this pallet, </p>
<ul>
<li>Use "warm" and "cool" colors alternatively. </li>
<li>When using two warm colors or two cool colors, put distinct differences in brightness or saturation. </li>
<li>Avoid combination of colors with low saturation or low brightness. </li>
</ul>
</blockquote>
<pre><code class="language-css">/*
VARIABLES:
- Dark
- Bright
- Grayscale
*/
:root {
--black: rgba(0,0,0);
--orange: rgba(230,159,0);
--sky-blue: rgba(86,180,233);
--bluish-green: rgba(0, 158, 115);
--yellow: rgba(240,228,66);
--blue: rgba(0,114,178);
--vermillion: rgba(213,94,0);
--reddish-purple: rgba(204,121,167);
}
</code></pre>
<h2>Misc Colorsets</h2>
<h3>1-bit Monitor Glow[2]</h3>
<pre><code class="language-css"> --black: #222323;
--white: #f0f6f0;
</code></pre>
<h3>TI Calculators</h3>
<pre><code class="language-css"> --black: #1E1F1A;
--white: #b7b9ab;
</code></pre>
<h3>Toshiba 3200</h3>
<pre><code class="language-css"> --black: #600D00;
--dark-gray: #b81903;
--gray: #da3f1b;
--white: #fe591f;
</code></pre>
<h3>Gameboy</h3>
<pre><code class="language-css"> --black: #081820;
--dark-gray: #346856;
--gray: #88c070;
--white: #e0f8d0;
</code></pre>
<h2>References</h2>
<ol>
<li><a href="https://jfly.uni-koeln.de/color/#pallet" target="_blank">https://jfly.uni-koeln.de/color/#pallet</a></li>
<li><a href="https://lospec.com/palette-list/1bit-monitor-glow" target="_blank">https://lospec.com/palette-list/1bit-monitor-glow</a></li>
<li><a href="https://gist.github.com/r-malon/8fc669332215c8028697a0bbfbfbb32a" target="_blank">https://gist.github.com/r-malon/8fc669332215c8028697a0bbfbfbb32a</a></li>
</ol>
<p class="last-modified">Last modified: 202206101419</p></article></main><footer><nav><a href="index.html">Sitemap</a></nav><div class="social"><p>Built using <a href="http://codeberg.org/milofultz/swiki" target="_blank" rel="noopener noreferrer">{{SWIKI}}</a></p><p><a href="http://codeberg.org/milofultz/" target="_blank" rel="noopener noreferrer">Codeberg</a></p><p><a href="http://milofultz.com/" target="_blank" rel="noopener noreferrer">milofultz.com</a></p><p><a href="https://merveilles.town/@milofultz" target="_blank" rel="me noopener noreferrer">Mastodon</a></p></div></footer></body></html>