diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..1485bc9 --- /dev/null +++ b/LICENSE @@ -0,0 +1,18 @@ +Copyright 2022 Anthony Lieuallen + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/colors.html b/colors.html index 8a14e70..8db4b88 100644 --- a/colors.html +++ b/colors.html @@ -24,7 +24,7 @@ body { display: none; color: black; left: 0; - margin: 0 10em; + margin: 0 25%; position: fixed; top: 10em; } @@ -357,13 +357,11 @@ document.body.addEventListener('click', e => {

aqua  

- - ❔ - +❓
- ⌧ -

I'm far from a designer, but I make web pages. For quite some time I've thought about the palette of "web colors". I'd like to be able to pick from those colors, when making simple web pages.

+ ❌ +

I'm far from a designer, but I make web pages. For quite some time I've thought about the palette of "web colors". I'd like to be able to pick from those colors, when making simple web pages. (Rather thank picking from all possible colors.)

I've thought about this "color wheel" arrangement, i.e. when using image editors. It's a compact way to represent a whole range of colors. I was reminded of the combination of these things by a recent Hacker News comment thread.

-

So here it is: a color wheel, with only "web colors" on it. Each color is placed on the wheel, then grown to a polygon with a Voronoi diagram.

+

So here it is: a color wheel, with only "web colors" on it. Each color is placed on the wheel, then grown to a polygon to fill the wheel with a Voronoi diagram. The arrangement of polygons, and their sizes, is intriguing.

Hover colors to see their name (and preview swatch and hex code). Click one to "lock" it.

diff --git a/colors.py b/colors.py deleted file mode 100644 index 86e457b..0000000 --- a/colors.py +++ /dev/null @@ -1,161 +0,0 @@ -#!/usr/bin/python3 - -COLORS = """ -aliceblue #f0f8ff 240 248 255 -antiquewhite #faebd7 250 235 215 -aqua #00ffff 0 255 255 -aquamarine #7fffd4 127 255 212 -azure #f0ffff 240 255 255 -beige #f5f5dc 245 245 220 -bisque #ffe4c4 255 228 196 -black #000000 0 0 0 -blanchedalmond #ffebcd 255 235 205 -blue #0000ff 0 0 255 -blueviolet #8a2be2 138 43 226 -brown #a52a2a 165 42 42 -burlywood #deb887 222 184 135 -cadetblue #5f9ea0 95 158 160 -chartreuse #7fff00 127 255 0 -chocolate #d2691e 210 105 30 -coral #ff7f50 255 127 80 -cornflowerblue #6495ed 100 149 237 -cornsilk #fff8dc 255 248 220 -crimson #dc143c 220 20 60 -cyan #00ffff 0 255 255 -darkblue #00008b 0 0 139 -darkcyan #008b8b 0 139 139 -darkgoldenrod #b8860b 184 134 11 -darkgray #a9a9a9 169 169 169 -darkgreen #006400 0 100 0 -darkgrey #a9a9a9 169 169 169 -darkkhaki #bdb76b 189 183 107 -darkmagenta #8b008b 139 0 139 -darkolivegreen #556b2f 85 107 47 -darkorange #ff8c00 255 140 0 -darkorchid #9932cc 153 50 204 -darkred #8b0000 139 0 0 -darksalmon #e9967a 233 150 122 -darkseagreen #8fbc8f 143 188 143 -darkslateblue #483d8b 72 61 139 -darkslategray #2f4f4f 47 79 79 -darkslategrey #2f4f4f 47 79 79 -darkturquoise #00ced1 0 206 209 -darkviolet #9400d3 148 0 211 -deeppink #ff1493 255 20 147 -deepskyblue #00bfff 0 191 255 -dimgray #696969 105 105 105 -dimgrey #696969 105 105 105 -dodgerblue #1e90ff 30 144 255 -firebrick #b22222 178 34 34 -floralwhite #fffaf0 255 250 240 -forestgreen #228b22 34 139 34 -fuchsia #ff00ff 255 0 255 -gainsboro #dcdcdc 220 220 220 -ghostwhite #f8f8ff 248 248 255 -gold #ffd700 255 215 0 -goldenrod #daa520 218 165 32 -gray #808080 128 128 128 -green #008000 0 128 0 -greenyellow #adff2f 173 255 47 -grey #808080 128 128 128 -honeydew #f0fff0 240 255 240 -hotpink #ff69b4 255 105 180 -indianred #cd5c5c 205 92 92 -indigo #4b0082 75 0 130 -ivory #fffff0 255 255 240 -khaki #f0e68c 240 230 140 -lavender #e6e6fa 230 230 250 -lavenderblush #fff0f5 255 240 245 -lawngreen #7cfc00 124 252 0 -lemonchiffon #fffacd 255 250 205 -lightblue #add8e6 173 216 230 -lightcoral #f08080 240 128 128 -lightcyan #e0ffff 224 255 255 -lightgoldenrodyellow #fafad2 250 250 210 -lightgray #d3d3d3 211 211 211 -lightgreen #90ee90 144 238 144 -lightgrey #d3d3d3 211 211 211 -lightpink #ffb6c1 255 182 193 -lightsalmon #ffa07a 255 160 122 -lightseagreen #20b2aa 32 178 170 -lightskyblue #87cefa 135 206 250 -lightslategray #778899 119 136 153 -lightslategrey #778899 119 136 153 -lightsteelblue #b0c4de 176 196 222 -lightyellow #ffffe0 255 255 224 -lime #00ff00 0 255 0 -limegreen #32cd32 50 205 50 -linen #faf0e6 250 240 230 -magenta #ff00ff 255 0 255 -maroon #800000 128 0 0 -mediumaquamarine #66cdaa 102 205 170 -mediumblue #0000cd 0 0 205 -mediumorchid #ba55d3 186 85 211 -mediumpurple #9370db 147 112 219 -mediumseagreen #3cb371 60 179 113 -mediumslateblue #7b68ee 123 104 238 -mediumspringgreen #00fa9a 0 250 154 -mediumturquoise #48d1cc 72 209 204 -mediumvioletred #c71585 199 21 133 -midnightblue #191970 25 25 112 -mintcream #f5fffa 245 255 250 -mistyrose #ffe4e1 255 228 225 -moccasin #ffe4b5 255 228 181 -navajowhite #ffdead 255 222 173 -navy #000080 0 0 128 -oldlace #fdf5e6 253 245 230 -olive #808000 128 128 0 -olivedrab #6b8e23 107 142 35 -orange #ffa500 255 165 0 -orangered #ff4500 255 69 0 -orchid #da70d6 218 112 214 -palegoldenrod #eee8aa 238 232 170 -palegreen #98fb98 152 251 152 -paleturquoise #afeeee 175 238 238 -palevioletred #db7093 219 112 147 -papayawhip #ffefd5 255 239 213 -peachpuff #ffdab9 255 218 185 -peru #cd853f 205 133 63 -pink #ffc0cb 255 192 203 -plum #dda0dd 221 160 221 -powderblue #b0e0e6 176 224 230 -purple #800080 128 0 128 -rebeccapurple #663399 102 51 153 -red #ff0000 255 0 0 -rosybrown #bc8f8f 188 143 143 -royalblue #4169e1 65 105 225 -saddlebrown #8b4513 139 69 19 -salmon #fa8072 250 128 114 -sandybrown #f4a460 244 164 96 -seagreen #2e8b57 46 139 87 -seashell #fff5ee 255 245 238 -sienna #a0522d 160 82 45 -silver #c0c0c0 192 192 192 -skyblue #87ceeb 135 206 235 -slateblue #6a5acd 106 90 205 -slategray #708090 112 128 144 -slategrey #708090 112 128 144 -snow #fffafa 255 250 250 -springgreen #00ff7f 0 255 127 -steelblue #4682b4 70 130 180 -tan #d2b48c 210 180 140 -teal #008080 0 128 128 -thistle #d8bfd8 216 191 216 -tomato #ff6347 255 99 71 -turquoise #40e0d0 64 224 208 -violet #ee82ee 238 130 238 -wheat #f5deb3 245 222 179 -white #ffffff 255 255 255 -whitesmoke #f5f5f5 245 245 245 -yellow #ffff00 255 255 0 -yellowgreen #9acd32 154 205 50 -""" - -print('const colors = {') -for c in COLORS.strip().splitlines(): - name, _, rgb = c.split('\t') - print( - '"%s": color(%s),' % - (name, rgb.replace(' ', ', ')) - ) -print('}') \ No newline at end of file diff --git a/colors.svg b/colors.svg deleted file mode 100644 index 861556e..0000000 --- a/colors.svg +++ /dev/null @@ -1,198 +0,0 @@ - - - -