initial commit
list of (some?) colors; SVG embedded in HTML; JS generated dots
This commit is contained in:
Anthony Lieuallen
commit
9932f1bbea
|
|
@ -0,0 +1,211 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Named Colors Wheel</title>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg
|
||||
baseProfile="full"
|
||||
height="600"
|
||||
version="1.1"
|
||||
viewbox="0 0 1024 1024"
|
||||
width="800"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
// Based on https://drafts.csswg.org/css-color/#named-colors .
|
||||
const colors = {
|
||||
"aliceblue": [240, 248, 255],
|
||||
"antiquewhite": [250, 235, 215],
|
||||
"aqua": [0, 255, 255],
|
||||
"aquamarine": [127, 255, 212],
|
||||
"azure": [240, 255, 255],
|
||||
"beige": [245, 245, 220],
|
||||
"bisque": [255, 228, 196],
|
||||
"black": [0, 0, 0],
|
||||
"blanchedalmond": [255, 235, 205],
|
||||
"blue": [0, 0, 255],
|
||||
"blueviolet": [138, 43, 226],
|
||||
"brown": [165, 42, 42],
|
||||
"burlywood": [222, 184, 135],
|
||||
"cadetblue": [95, 158, 160],
|
||||
"chartreuse": [127, 255, 0],
|
||||
"chocolate": [210, 105, 30],
|
||||
"coral": [255, 127, 80],
|
||||
"cornflowerblue": [100, 149, 237],
|
||||
"cornsilk": [255, 248, 220],
|
||||
"crimson": [220, 20, 60],
|
||||
"cyan": [0, 255, 255],
|
||||
"darkblue": [0, 0, 139],
|
||||
"darkcyan": [0, 139, 139],
|
||||
"darkgoldenrod": [184, 134, 11],
|
||||
"darkgray": [169, 169, 169],
|
||||
"darkgreen": [0, 100, 0],
|
||||
"darkgrey": [169, 169, 169],
|
||||
"darkkhaki": [189, 183, 107],
|
||||
"darkmagenta": [139, 0, 139],
|
||||
"darkolivegreen": [85, 107, 47],
|
||||
"darkorange": [255, 140, 0],
|
||||
"darkorchid": [153, 50, 204],
|
||||
"darkred": [139, 0, 0],
|
||||
"darksalmon": [233, 150, 122],
|
||||
"darkseagreen": [143, 188, 143],
|
||||
"darkslateblue": [72, 61, 139],
|
||||
"darkslategray": [47, 79, 79],
|
||||
"darkslategrey": [47, 79, 79],
|
||||
"darkturquoise": [0, 206, 209],
|
||||
"darkviolet": [148, 0, 211],
|
||||
"deeppink": [255, 20, 147],
|
||||
"deepskyblue": [0, 191, 255],
|
||||
"dimgray": [105, 105, 105],
|
||||
"dimgrey": [105, 105, 105],
|
||||
"dodgerblue": [30, 144, 255],
|
||||
"firebrick": [178, 34, 34],
|
||||
"floralwhite": [255, 250, 240],
|
||||
"forestgreen": [34, 139, 34],
|
||||
"fuchsia": [255, 0, 255],
|
||||
"gainsboro": [220, 220, 220],
|
||||
"ghostwhite": [248, 248, 255],
|
||||
"gold": [255, 215, 0],
|
||||
"goldenrod": [218, 165, 32],
|
||||
"gray": [128, 128, 128],
|
||||
"green": [0, 128, 0],
|
||||
"greenyellow": [173, 255, 47],
|
||||
"grey": [128, 128, 128],
|
||||
"honeydew": [240, 255, 240],
|
||||
"hotpink": [255, 105, 180],
|
||||
"indianred": [205, 92, 92],
|
||||
"indigo": [75, 0, 130],
|
||||
"ivory": [255, 255, 240],
|
||||
"khaki": [240, 230, 140],
|
||||
"lavender": [230, 230, 250],
|
||||
"lavenderblush": [255, 240, 245],
|
||||
"lawngreen": [124, 252, 0],
|
||||
"lemonchiffon": [255, 250, 205],
|
||||
"lightblue": [173, 216, 230],
|
||||
"lightcoral": [240, 128, 128],
|
||||
"lightcyan": [224, 255, 255],
|
||||
"lightgoldenrodyellow": [250, 250, 210],
|
||||
"lightgray": [211, 211, 211],
|
||||
"lightgreen": [144, 238, 144],
|
||||
"lightgrey": [211, 211, 211],
|
||||
"lightpink": [255, 182, 193],
|
||||
"lightsalmon": [255, 160, 122],
|
||||
"lightseagreen": [32, 178, 170],
|
||||
"lightskyblue": [135, 206, 250],
|
||||
"lightslategray": [119, 136, 153],
|
||||
"lightslategrey": [119, 136, 153],
|
||||
"lightsteelblue": [176, 196, 222],
|
||||
"lightyellow": [255, 255, 224],
|
||||
"lime": [0, 255, 0],
|
||||
"limegreen": [50, 205, 50],
|
||||
"linen": [250, 240, 230],
|
||||
"magenta": [255, 0, 255],
|
||||
"maroon": [128, 0, 0],
|
||||
"mediumaquamarine": [102, 205, 170],
|
||||
"mediumblue": [0, 0, 205],
|
||||
"mediumorchid": [186, 85, 211],
|
||||
"mediumpurple": [147, 112, 219],
|
||||
"mediumseagreen": [60, 179, 113],
|
||||
"mediumslateblue": [123, 104, 238],
|
||||
"mediumspringgreen": [0, 250, 154],
|
||||
"mediumturquoise": [72, 209, 204],
|
||||
"mediumvioletred": [199, 21, 133],
|
||||
"midnightblue": [25, 25, 112],
|
||||
"mintcream": [245, 255, 250],
|
||||
"mistyrose": [255, 228, 225],
|
||||
"moccasin": [255, 228, 181],
|
||||
"navajowhite": [255, 222, 173],
|
||||
"navy": [0, 0, 128],
|
||||
"oldlace": [253, 245, 230],
|
||||
"olive": [128, 128, 0],
|
||||
"olivedrab": [107, 142, 35],
|
||||
"orange": [255, 165, 0],
|
||||
"orangered": [255, 69, 0],
|
||||
"orchid": [218, 112, 214],
|
||||
"palegoldenrod": [238, 232, 170],
|
||||
"palegreen": [152, 251, 152],
|
||||
"paleturquoise": [175, 238, 238],
|
||||
"palevioletred": [219, 112, 147],
|
||||
"papayawhip": [255, 239, 213],
|
||||
"peachpuff": [255, 218, 185],
|
||||
"peru": [205, 133, 63],
|
||||
"pink": [255, 192, 203],
|
||||
"plum": [221, 160, 221],
|
||||
"powderblue": [176, 224, 230],
|
||||
"purple": [128, 0, 128],
|
||||
"rebeccapurple": [102, 51, 153],
|
||||
"red": [255, 0, 0],
|
||||
"rosybrown": [188, 143, 143],
|
||||
"royalblue": [65, 105, 225],
|
||||
"saddlebrown": [139, 69, 19],
|
||||
"salmon": [250, 128, 114],
|
||||
"sandybrown": [244, 164, 96],
|
||||
"seagreen": [46, 139, 87],
|
||||
"seashell": [255, 245, 238],
|
||||
"sienna": [160, 82, 45],
|
||||
"silver": [192, 192, 192],
|
||||
"skyblue": [135, 206, 235],
|
||||
"slateblue": [106, 90, 205],
|
||||
"slategray": [112, 128, 144],
|
||||
"slategrey": [112, 128, 144],
|
||||
"snow": [255, 250, 250],
|
||||
"springgreen": [0, 255, 127],
|
||||
"steelblue": [70, 130, 180],
|
||||
"tan": [210, 180, 140],
|
||||
"teal": [0, 128, 128],
|
||||
"thistle": [216, 191, 216],
|
||||
"tomato": [255, 99, 71],
|
||||
"turquoise": [64, 224, 208],
|
||||
"violet": [238, 130, 238],
|
||||
"wheat": [245, 222, 179],
|
||||
"white": [255, 255, 255],
|
||||
"whitesmoke": [245, 245, 245],
|
||||
"yellow": [255, 255, 0],
|
||||
"yellowgreen": [154, 205, 50]
|
||||
};
|
||||
|
||||
// Based on https://stackoverflow.com/a/54070620/91238 .
|
||||
// input: r,g,b in [0,1], out: h in [0,360) and s,v in [0,1]
|
||||
function rgb2hsv(r,g,b) {
|
||||
let v=Math.max(r,g,b), c=v-Math.min(r,g,b);
|
||||
let h= c && ((v==r) ? (g-b)/c : ((v==g) ? 2+(b-r)/c : 4+(r-g)/c));
|
||||
return [60*(h<0?h+6:h), v&&c/v, v];
|
||||
}
|
||||
|
||||
// For the whole color wheel, radius and center x/y.
|
||||
const radius = 512;
|
||||
const cx = radius;
|
||||
const cy = radius;
|
||||
|
||||
const svg = document.querySelector('svg');
|
||||
|
||||
Object.entries(colors).forEach(([name, color], _) => {
|
||||
let [r, g, b] = color;
|
||||
let [h, s, v] = rgb2hsv(r/255, g/255, b/255);
|
||||
|
||||
// Based on https://stackoverflow.com/a/54522007/91238 .
|
||||
let colorRadius = s * radius;
|
||||
let colorAngle = (1-h)/360 * 2 * Math.PI;
|
||||
|
||||
let x = Math.cos(colorAngle) * colorRadius;
|
||||
let y = Math.sin(colorAngle) * colorRadius;
|
||||
|
||||
let dotSize = 16;
|
||||
let dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
dot.setAttribute('cx', x - (dotSize/2) + 512);
|
||||
dot.setAttribute('cy', y - (dotSize/2) + 512);
|
||||
dot.setAttribute('r', dotSize);
|
||||
dot.setAttribute('style', `fill: rgb(${r}, ${g}, ${b})`);
|
||||
//dot.setAttribute('fill', 'black');
|
||||
svg.appendChild(dot);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
#!/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('}')
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<svg
|
||||
baseProfile="full"
|
||||
height="1024"
|
||||
version="1.1"
|
||||
width="1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<script>
|
||||
<![CDATA[
|
||||
// Based on https://drafts.csswg.org/css-color/#named-colors .
|
||||
const colors = {
|
||||
"aliceblue": [240, 248, 255],
|
||||
"antiquewhite": [250, 235, 215],
|
||||
"aqua": [0, 255, 255],
|
||||
"aquamarine": [127, 255, 212],
|
||||
"azure": [240, 255, 255],
|
||||
"beige": [245, 245, 220],
|
||||
"bisque": [255, 228, 196],
|
||||
"black": [0, 0, 0],
|
||||
"blanchedalmond": [255, 235, 205],
|
||||
"blue": [0, 0, 255],
|
||||
"blueviolet": [138, 43, 226],
|
||||
"brown": [165, 42, 42],
|
||||
"burlywood": [222, 184, 135],
|
||||
"cadetblue": [95, 158, 160],
|
||||
"chartreuse": [127, 255, 0],
|
||||
"chocolate": [210, 105, 30],
|
||||
"coral": [255, 127, 80],
|
||||
"cornflowerblue": [100, 149, 237],
|
||||
"cornsilk": [255, 248, 220],
|
||||
"crimson": [220, 20, 60],
|
||||
"cyan": [0, 255, 255],
|
||||
"darkblue": [0, 0, 139],
|
||||
"darkcyan": [0, 139, 139],
|
||||
"darkgoldenrod": [184, 134, 11],
|
||||
"darkgray": [169, 169, 169],
|
||||
"darkgreen": [0, 100, 0],
|
||||
"darkgrey": [169, 169, 169],
|
||||
"darkkhaki": [189, 183, 107],
|
||||
"darkmagenta": [139, 0, 139],
|
||||
"darkolivegreen": [85, 107, 47],
|
||||
"darkorange": [255, 140, 0],
|
||||
"darkorchid": [153, 50, 204],
|
||||
"darkred": [139, 0, 0],
|
||||
"darksalmon": [233, 150, 122],
|
||||
"darkseagreen": [143, 188, 143],
|
||||
"darkslateblue": [72, 61, 139],
|
||||
"darkslategray": [47, 79, 79],
|
||||
"darkslategrey": [47, 79, 79],
|
||||
"darkturquoise": [0, 206, 209],
|
||||
"darkviolet": [148, 0, 211],
|
||||
"deeppink": [255, 20, 147],
|
||||
"deepskyblue": [0, 191, 255],
|
||||
"dimgray": [105, 105, 105],
|
||||
"dimgrey": [105, 105, 105],
|
||||
"dodgerblue": [30, 144, 255],
|
||||
"firebrick": [178, 34, 34],
|
||||
"floralwhite": [255, 250, 240],
|
||||
"forestgreen": [34, 139, 34],
|
||||
"fuchsia": [255, 0, 255],
|
||||
"gainsboro": [220, 220, 220],
|
||||
"ghostwhite": [248, 248, 255],
|
||||
"gold": [255, 215, 0],
|
||||
"goldenrod": [218, 165, 32],
|
||||
"gray": [128, 128, 128],
|
||||
"green": [0, 128, 0],
|
||||
"greenyellow": [173, 255, 47],
|
||||
"grey": [128, 128, 128],
|
||||
"honeydew": [240, 255, 240],
|
||||
"hotpink": [255, 105, 180],
|
||||
"indianred": [205, 92, 92],
|
||||
"indigo": [75, 0, 130],
|
||||
"ivory": [255, 255, 240],
|
||||
"khaki": [240, 230, 140],
|
||||
"lavender": [230, 230, 250],
|
||||
"lavenderblush": [255, 240, 245],
|
||||
"lawngreen": [124, 252, 0],
|
||||
"lemonchiffon": [255, 250, 205],
|
||||
"lightblue": [173, 216, 230],
|
||||
"lightcoral": [240, 128, 128],
|
||||
"lightcyan": [224, 255, 255],
|
||||
"lightgoldenrodyellow": [250, 250, 210],
|
||||
"lightgray": [211, 211, 211],
|
||||
"lightgreen": [144, 238, 144],
|
||||
"lightgrey": [211, 211, 211],
|
||||
"lightpink": [255, 182, 193],
|
||||
"lightsalmon": [255, 160, 122],
|
||||
"lightseagreen": [32, 178, 170],
|
||||
"lightskyblue": [135, 206, 250],
|
||||
"lightslategray": [119, 136, 153],
|
||||
"lightslategrey": [119, 136, 153],
|
||||
"lightsteelblue": [176, 196, 222],
|
||||
"lightyellow": [255, 255, 224],
|
||||
"lime": [0, 255, 0],
|
||||
"limegreen": [50, 205, 50],
|
||||
"linen": [250, 240, 230],
|
||||
"magenta": [255, 0, 255],
|
||||
"maroon": [128, 0, 0],
|
||||
"mediumaquamarine": [102, 205, 170],
|
||||
"mediumblue": [0, 0, 205],
|
||||
"mediumorchid": [186, 85, 211],
|
||||
"mediumpurple": [147, 112, 219],
|
||||
"mediumseagreen": [60, 179, 113],
|
||||
"mediumslateblue": [123, 104, 238],
|
||||
"mediumspringgreen": [0, 250, 154],
|
||||
"mediumturquoise": [72, 209, 204],
|
||||
"mediumvioletred": [199, 21, 133],
|
||||
"midnightblue": [25, 25, 112],
|
||||
"mintcream": [245, 255, 250],
|
||||
"mistyrose": [255, 228, 225],
|
||||
"moccasin": [255, 228, 181],
|
||||
"navajowhite": [255, 222, 173],
|
||||
"navy": [0, 0, 128],
|
||||
"oldlace": [253, 245, 230],
|
||||
"olive": [128, 128, 0],
|
||||
"olivedrab": [107, 142, 35],
|
||||
"orange": [255, 165, 0],
|
||||
"orangered": [255, 69, 0],
|
||||
"orchid": [218, 112, 214],
|
||||
"palegoldenrod": [238, 232, 170],
|
||||
"palegreen": [152, 251, 152],
|
||||
"paleturquoise": [175, 238, 238],
|
||||
"palevioletred": [219, 112, 147],
|
||||
"papayawhip": [255, 239, 213],
|
||||
"peachpuff": [255, 218, 185],
|
||||
"peru": [205, 133, 63],
|
||||
"pink": [255, 192, 203],
|
||||
"plum": [221, 160, 221],
|
||||
"powderblue": [176, 224, 230],
|
||||
"purple": [128, 0, 128],
|
||||
"rebeccapurple": [102, 51, 153],
|
||||
"red": [255, 0, 0],
|
||||
"rosybrown": [188, 143, 143],
|
||||
"royalblue": [65, 105, 225],
|
||||
"saddlebrown": [139, 69, 19],
|
||||
"salmon": [250, 128, 114],
|
||||
"sandybrown": [244, 164, 96],
|
||||
"seagreen": [46, 139, 87],
|
||||
"seashell": [255, 245, 238],
|
||||
"sienna": [160, 82, 45],
|
||||
"silver": [192, 192, 192],
|
||||
"skyblue": [135, 206, 235],
|
||||
"slateblue": [106, 90, 205],
|
||||
"slategray": [112, 128, 144],
|
||||
"slategrey": [112, 128, 144],
|
||||
"snow": [255, 250, 250],
|
||||
"springgreen": [0, 255, 127],
|
||||
"steelblue": [70, 130, 180],
|
||||
"tan": [210, 180, 140],
|
||||
"teal": [0, 128, 128],
|
||||
"thistle": [216, 191, 216],
|
||||
"tomato": [255, 99, 71],
|
||||
"turquoise": [64, 224, 208],
|
||||
"violet": [238, 130, 238],
|
||||
"wheat": [245, 222, 179],
|
||||
"white": [255, 255, 255],
|
||||
"whitesmoke": [245, 245, 245],
|
||||
"yellow": [255, 255, 0],
|
||||
"yellowgreen": [154, 205, 50]
|
||||
};
|
||||
|
||||
// Based on https://stackoverflow.com/a/54070620/91238 .
|
||||
// input: r,g,b in [0,1], out: h in [0,360) and s,v in [0,1]
|
||||
function rgb2hsv(r,g,b) {
|
||||
let v=Math.max(r,g,b), c=v-Math.min(r,g,b);
|
||||
let h= c && ((v==r) ? (g-b)/c : ((v==g) ? 2+(b-r)/c : 4+(r-g)/c));
|
||||
return [60*(h<0?h+6:h), v&&c/v, v];
|
||||
}
|
||||
|
||||
// For the whole color wheel, radius and center x/y.
|
||||
const radius = 512;
|
||||
const cx = radius;
|
||||
const cy = radius;
|
||||
|
||||
Object.entries(colors).forEach(([name, color], _) => {
|
||||
let [r, g, b] = color;
|
||||
let [h, s, v] = rgb2hsv(r/255, g/255, b/255);
|
||||
|
||||
// Based on https://stackoverflow.com/a/54522007/91238 .
|
||||
let colorRadius = s * radius;
|
||||
let colorAngle = (1-h)/360 * 2 * Math.PI;
|
||||
|
||||
let x = Math.cos(colorAngle) * colorRadius;
|
||||
let y = Math.sin(colorAngle) * colorRadius;
|
||||
|
||||
let dotSize = 16;
|
||||
let dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
dot.setAttribute('cx', x - (dotSize/2) + 512);
|
||||
dot.setAttribute('cy', y - (dotSize/2) + 512);
|
||||
dot.setAttribute('r', dotSize);
|
||||
dot.setAttribute('style', `fill: rgb(${r}, ${g}, ${b})`);
|
||||
//dot.setAttribute('fill', 'black');
|
||||
document.documentElement.appendChild(dot);
|
||||
});
|
||||
]]>
|
||||
</script>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.8 KiB |
Loading…
Reference in New Issue