initial commit
list of (some?) colors; SVG embedded in HTML; JS generated dots
This commit is contained in:
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