From 43e75f5e171f2256d3824360ea9ba1b674a9d855 Mon Sep 17 00:00:00 2001
From: Anthony Lieuallen <arantius@gmail.com>
Date: Mon, 21 Nov 2022 09:59:47 -0500
Subject: [PATCH] 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.
---
 colors.html | 68 ++++++++++++++++++++++++-----------------------------
 1 file changed, 31 insertions(+), 37 deletions(-)

diff --git a/colors.html b/colors.html
index e4459b0..49aa88a 100644
--- a/colors.html
+++ b/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};">&nbsp;</span>
+       <span class="swatch"
+          style="background-color: ${rgbToHex(r, g, b)};">&nbsp;</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;'>&nbsp;</span></h1>
-  <h1>silver <span class='swatch' style='background-color: silver;'>&nbsp;</span></h1>
-  <h1>gray <span class='swatch' style='background-color: gray;'>&nbsp;</span></h1>
-  <h1>white <span class='swatch' style='background-color: white;'>&nbsp;</span></h1>
-  <h1>maroon <span class='swatch' style='background-color: maroon;'>&nbsp;</span></h1>
-  <h1>red <span class='swatch' style='background-color: red;'>&nbsp;</span></h1>
-  <h1>purple <span class='swatch' style='background-color: purple;'>&nbsp;</span></h1>
-  <h1>fuchsia <span class='swatch' style='background-color: fuchsia;'>&nbsp;</span></h1>
-  <h1>green <span class='swatch' style='background-color: green;'>&nbsp;</span></h1>
-  <h1>lime <span class='swatch' style='background-color: lime;'>&nbsp;</span></h1>
-  <h1>olive <span class='swatch' style='background-color: olive;'>&nbsp;</span></h1>
-  <h1>yellow <span class='swatch' style='background-color: yellow;'>&nbsp;</span></h1>
-  <h1>navy <span class='swatch' style='background-color: navy;'>&nbsp;</span></h1>
-  <h1>blue <span class='swatch' style='background-color: blue;'>&nbsp;</span></h1>
-  <h1>teal <span class='swatch' style='background-color: teal;'>&nbsp;</span></h1>
-  <h1>aqua <span class='swatch' style='background-color: aqua;'>&nbsp;</span></h1>
-</div>
-
 <a id='about-link' href='#about'>❓</a>
 <div id='about'>
   <a class='close' href='#'>❌</a>