Tweak wheel to fit colors.
Combine synonyms to one (RGB) color. Tweak the hue/saturation distribution of the wheel to account for (e.g. shades of grey) different colors with the same H/S but different V.
This commit is contained in:
parent
e7e13160d9
commit
43e75f5e17
68
colors.html
68
colors.html
|
@ -70,6 +70,24 @@ svg {
|
|||
<script>
|
||||
// Based on https://developer.mozilla.org/en-US/docs/Web/CSS/named-color .
|
||||
const colors = {
|
||||
// CSS1:
|
||||
'black': [0, 0, 0],
|
||||
'silver': [192, 192, 192],
|
||||
'gray / grey': [128, 128, 128],
|
||||
'white': [255, 255, 255],
|
||||
'maroon': [128, 0, 0],
|
||||
'red': [255, 0, 0],
|
||||
'purple': [128, 0, 128],
|
||||
'fuchsia / magenta': [255, 0, 255],
|
||||
'green': [0, 128, 0],
|
||||
'lime': [0, 255, 0],
|
||||
'olive': [128, 128, 0],
|
||||
'yellow': [255, 255, 0],
|
||||
'navy': [0, 0, 128],
|
||||
'blue': [0, 0, 255],
|
||||
'teal': [0, 128, 128],
|
||||
'aqua / cyan': [0, 255, 255],
|
||||
|
||||
'orange': [255, 165, 0],
|
||||
'aliceblue': [240, 248, 255],
|
||||
'antiquewhite': [250, 235, 215],
|
||||
|
@ -88,13 +106,11 @@ const colors = {
|
|||
'cornflowerblue': [100, 149, 237],
|
||||
'cornsilk': [255, 248, 220],
|
||||
'crimson': [220, 20, 60],
|
||||
'cyan (synonym of aqua)': [0, 255, 255],
|
||||
'darkblue': [0, 0, 139],
|
||||
'darkcyan': [0, 139, 139],
|
||||
'darkgoldenrod': [184, 134, 11],
|
||||
'darkgray': [169, 169, 169],
|
||||
'darkgray / darkgrey': [169, 169, 169],
|
||||
'darkgreen': [0, 100, 0],
|
||||
'darkgrey': [169, 169, 169],
|
||||
'darkkhaki': [189, 183, 107],
|
||||
'darkmagenta': [139, 0, 139],
|
||||
'darkolivegreen': [85, 107, 47],
|
||||
|
@ -104,14 +120,12 @@ const colors = {
|
|||
'darksalmon': [233, 150, 122],
|
||||
'darkseagreen': [143, 188, 143],
|
||||
'darkslateblue': [72, 61, 139],
|
||||
'darkslategray': [47, 79, 79],
|
||||
'darkslategrey': [47, 79, 79],
|
||||
'darkslategray / 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],
|
||||
'dimgray / dimgrey': [105, 105, 105],
|
||||
'dodgerblue': [30, 144, 255],
|
||||
'firebrick': [178, 34, 34],
|
||||
'floralwhite': [255, 250, 240],
|
||||
|
@ -121,7 +135,6 @@ const colors = {
|
|||
'gold': [255, 215, 0],
|
||||
'goldenrod': [218, 165, 32],
|
||||
'greenyellow': [173, 255, 47],
|
||||
'grey': [128, 128, 128],
|
||||
'honeydew': [240, 255, 240],
|
||||
'hotpink': [255, 105, 180],
|
||||
'indianred': [205, 92, 92],
|
||||
|
@ -136,20 +149,17 @@ const colors = {
|
|||
'lightcoral': [240, 128, 128],
|
||||
'lightcyan': [224, 255, 255],
|
||||
'lightgoldenrodyellow': [250, 250, 210],
|
||||
'lightgray': [211, 211, 211],
|
||||
'lightgray / lightgrey': [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],
|
||||
'lightslategray / lightslategrey': [119, 136, 153],
|
||||
'lightsteelblue': [176, 196, 222],
|
||||
'lightyellow': [255, 255, 224],
|
||||
'limegreen': [50, 205, 50],
|
||||
'linen': [250, 240, 230],
|
||||
'magenta (synonym of fuchsia)': [255, 0, 255],
|
||||
'mediumaquamarine': [102, 205, 170],
|
||||
'mediumblue': [0, 0, 205],
|
||||
'mediumorchid': [186, 85, 211],
|
||||
|
@ -188,8 +198,8 @@ const colors = {
|
|||
'sienna': [160, 82, 45],
|
||||
'skyblue': [135, 206, 235],
|
||||
'slateblue': [106, 90, 205],
|
||||
'slategray': [112, 128, 144],
|
||||
'slategrey': [112, 128, 144],
|
||||
'slategray / slategrey': [112, 128, 144],
|
||||
//'slategrey': [112, 128, 144],
|
||||
'snow': [255, 250, 250],
|
||||
'springgreen': [0, 255, 127],
|
||||
'steelblue': [70, 130, 180],
|
||||
|
@ -229,7 +239,10 @@ function renderWheel() {
|
|||
let [h, s, v] = rgb2hsv(r/255, g/255, b/255);
|
||||
|
||||
// Based on https://stackoverflow.com/a/54522007/91238 .
|
||||
let colorRadius = s * radius;
|
||||
// I've tweaked it to spread out some of the colors (especially they greys)
|
||||
// that don't fit well into a true H/S wheel.
|
||||
//let colorRadius = Math.pow((s+v)/2, 1.5)/1.11 * radius;
|
||||
let colorRadius = (s + v/5)*0.75 * radius;
|
||||
let colorAngle = h/360 * 2 * Math.PI;
|
||||
|
||||
let x = Math.cos(colorAngle) * colorRadius + 512;
|
||||
|
@ -295,7 +308,8 @@ function renderPreview(color) {
|
|||
|
||||
document.getElementById('preview').innerHTML = `
|
||||
${color}
|
||||
<span class="swatch" style="background-color: ${color};"> </span>
|
||||
<span class="swatch"
|
||||
style="background-color: ${rgbToHex(r, g, b)};"> </span>
|
||||
${rgbToHex(r, g, b).toUpperCase()}
|
||||
`;
|
||||
}
|
||||
|
@ -338,26 +352,6 @@ document.body.addEventListener('click', e => {
|
|||
</script>
|
||||
<h1 id="preview"></h1>
|
||||
|
||||
<div id="css1">
|
||||
<p>Plus the sixteen CSS1 colors which don't fit well on a color wheel (due to a small/overlapping set of hue and saturation values):</p>
|
||||
<h1>black <span class='swatch' style='background-color: black;'> </span></h1>
|
||||
<h1>silver <span class='swatch' style='background-color: silver;'> </span></h1>
|
||||
<h1>gray <span class='swatch' style='background-color: gray;'> </span></h1>
|
||||
<h1>white <span class='swatch' style='background-color: white;'> </span></h1>
|
||||
<h1>maroon <span class='swatch' style='background-color: maroon;'> </span></h1>
|
||||
<h1>red <span class='swatch' style='background-color: red;'> </span></h1>
|
||||
<h1>purple <span class='swatch' style='background-color: purple;'> </span></h1>
|
||||
<h1>fuchsia <span class='swatch' style='background-color: fuchsia;'> </span></h1>
|
||||
<h1>green <span class='swatch' style='background-color: green;'> </span></h1>
|
||||
<h1>lime <span class='swatch' style='background-color: lime;'> </span></h1>
|
||||
<h1>olive <span class='swatch' style='background-color: olive;'> </span></h1>
|
||||
<h1>yellow <span class='swatch' style='background-color: yellow;'> </span></h1>
|
||||
<h1>navy <span class='swatch' style='background-color: navy;'> </span></h1>
|
||||
<h1>blue <span class='swatch' style='background-color: blue;'> </span></h1>
|
||||
<h1>teal <span class='swatch' style='background-color: teal;'> </span></h1>
|
||||
<h1>aqua <span class='swatch' style='background-color: aqua;'> </span></h1>
|
||||
</div>
|
||||
|
||||
<a id='about-link' href='#about'>❓</a>
|
||||
<div id='about'>
|
||||
<a class='close' href='#'>❌</a>
|
||||
|
|
Loading…
Reference in New Issue