User:Waldyrious/palette

Reduced palettes from Munsell color system, value (brightness) 8.
 * Goal: obtaining a set of same-brightness, equally-spaced hues to use as colors for a syntax highlighting engine.

Background and process
I've been thinking a little about choosing a good color set for Remember the dot's syntax highlighter. I wanted to derive a good combination, rather than hand-pick a set that I think looks good.

Here's how I reached my proposal. My idea was to use colors that are equally spaced in hue (perceived hue, not pure hue as in HSL) and that have the same perceived brightness (so they'll stand out from the white background by the same amount).

For this, I used the Munsell color system, and (with the help of the Virtual Atlas), picked the plane of brightness 8 (the maximum is 9, but that's too dim). But that plane has lots of colors, very close to each other. I wanted to have only a few colors, and roughly equally spaced.

So, using Photoshop, I exported the image into png-8 with several palette choices, relying on its algorithms (perceptive, adaptive, restrictive and selective) to group similar colors together in the most economical way (I set the maximum at 16 colors, since the syntax highlighter currently supports 14 different colors, and one of the 2 extra ones was going to be the white background anyway).

I also exported each of these adding the web-snap restriction (which is what the "restrictive" option seems to do anyway), allowing it to auto-select the number of colors (it picked 18).

I extracted the resulting palettes with pngcheck and generated this page with them, so I could test how they looked.

It turns out the non-web-restricted colors don't produce very pleasant palettes this way; I'm guessing that's because they're less saturated. Even better then, as I would prefer using web-safe colors anyway (not for their purported safety, but because they're neater to specify:  is a shorthand for  ).

However, in both cases, the uniform lightness is somewhat lost, so I used a standard formula to calculate the perceived luminosity from the RGB values; the list can be filtered to allow only colors with similar luminosity, which was the goal of using the Munsell color system in the first place.

No color restriction
File: munsell_lightness8-16colors-adaptive.png

#b4d3cc #bdd49f #c1cae6 #cfc7ce #d8cb76 #dbede4 #e1e0b5 #e2bcd2 #e3c639</tt> #e4c0a8</tt> #e7edf4</tt> #ebece4</tt> #ede2ce</tt> #f1eef2</tt> #f7e5e5</tt>

File: munsell_lightness8-16colors-perceptual.png

#b4d3ce</tt> #b6d79a</tt> #c1cae9</tt> #cfc7ce</tt> #d6cb86</tt> #d9e5b9</tt> #dcede7</tt> #e1c841</tt> #e3bbd1</tt> <tt>#eabda4</tt> <tt>#ead8a6</tt> <tt>#ebece4</tt> <tt>#efe2d0</tt> <tt>#efeef3</tt> <tt>#f6e6eb</tt>

File: munsell_lightness8-16colors-selective.png

<tt>#add6cc</tt> <tt>#b5d797</tt> <tt>#b6ceef</tt> <tt>#c0cfc4</tt> <tt>#c2ccda</tt> <tt>#cdc4eb</tt> <tt>#cdc8d2</tt> <tt>#d3c8ba</tt> <tt>#d5c3d3</tt> <tt>#d7ca89</tt> <tt>#e0c843</tt> <tt>#e6bacc</tt> <tt>#e7e2c5</tt> <tt>#eabda4</tt> <tt>#ededef</tt>

Only web colors

 * Note: The  entries are only placeholders, to allow alignment and comparison between the generated palettes.

File: munsell_lightness8-16colors-restrictive.png

<tt>#ffffff</tt> <tt>#ffffff</tt> <tt>#ffffff</tt> <tt>#cccc33</tt> <tt>#ffffff</tt> <tt>#cccc99</tt> <tt>#cccccc</tt> <tt>#ccccff</tt> <tt>#ffffff</tt> <tt>#ccffff</tt> <tt>#ffffff</tt> <tt>#ffcc33</tt> <tt>#ffcc66</tt> <tt>#ffcc99</tt> <tt>#ffcccc</tt> <tt>#ffccff</tt> <tt>#ffff00</tt> <tt>#ffff33</tt> <tt>#ffff66</tt> <tt>#ffff99</tt> <tt>#ffffcc</tt>

File: munsell_lightness8-18colors(auto)-restrictive.png

<tt>#99cc99</tt> <tt>#99cccc</tt> <tt>#99ccff</tt> <tt>#cccc33</tt> <tt>#cccc66</tt> <tt>#cccc99</tt> <tt>#cccccc</tt> <tt>#ccccff</tt> <tt>#ccffcc</tt> <tt>#ccffff</tt> <tt>#ffcc00</tt> <tt>#ffcc33</tt> <tt>#ffcc66</tt> <tt>#ffcc99</tt> <tt>#ffcccc</tt> <tt>#ffccff</tt> <tt>#ffffff</tt> <tt>#ffffff</tt> <tt>#ffffff</tt> <tt>#ffffff</tt> <tt>#ffffcc</tt>

File: munsell_lightness8-18colors(auto)-adaptive/perceptual/selective+websnap.png

<tt>#99cc99</tt> <tt>#99cccc</tt> <tt>#99ccff</tt> <tt>#cccc33</tt> <tt>#cccc66</tt> <tt>#cccc99</tt> <tt>#cccccc</tt> <tt>#ccccff</tt> <tt>#ccffcc</tt> <tt>#ccffff</tt> <tt>#ffcc00</tt> <tt>#ffcc33</tt> <tt>#ffcc66</tt> <tt>#ffcc99</tt> <tt>#ffcccc</tt> <tt>#ffccff</tt> <tt>#ffffff</tt> <tt>#ffffff</tt> <tt>#ffffff</tt> <tt>#ffffff</tt> <tt>#ffffcc</tt>

All web colors combined

<tt>#99cc99</tt> <tt>#99cccc</tt> <tt>#99ccff</tt> <tt>#cccc33</tt> <tt>#cccc66</tt> <tt>#cccc99</tt> <tt>#cccccc</tt> <tt>#ccccff</tt> <tt>#ccffcc</tt> <tt>#ccffff</tt> <tt>#ffcc00</tt> <tt>#ffcc33</tt> <tt>#ffcc66</tt> <tt>#ffcc99</tt> <tt>#ffcccc</tt> <tt>#ffccff</tt> <tt>#ffff00</tt> <tt>#ffff33</tt> <tt>#ffff66</tt> <tt>#ffff99</tt> <tt>#ffffcc</tt>

Only whole hue values
As explained here, the Munsell hue is divided into five main hues (Red, Yellow, Green, Blue, and Purple), and 5 intermediate hues, totaling a 10-fold subdivision of the hue cycle: R, YR, Y, GY, G, BG, B, PB, P and RP. The system then specifies finer subdivisions, but since the objective here is to obtain a set of hues that are clearly distinguishable from one another, using only these ten base divisions is probably enough for a good distribution.

Sortable table

 * There isn't really a Munsell color with hue B, value 8 and chroma 6, but the one immediately next to it (hue 2.5PB) was used instead.

Final proposal
Considering all the above, I believe a good choice is to use the Munsell line of Chroma 6 and Value 8, plus the Chroma 0 as a gray color. It is evident that these colors do indeed present similar perceived brightness, even though their L values in HSL space vary quite a bit (from 67% to 85%). Their saturation is also similar.

This selection allows a set of colors with enough variation to support almost all the different elements in the syntax highlighter. Some colors would need to be reused for some elements, but this already happens in the current default color scheme. The final palette proposal is therefore:

<tt>#e6c18c</tt> <tt>#d4cc81</tt> <tt>#b6d7a2</tt> <tt>#a4d9c9</tt> <tt>#b3cdfd</tt> <tt>#cdc8d2</tt> <tt>#e1bae4</tt> <tt>#edb7c7</tt> <tt>#f1b8aa</tt>

Note: the red was moved to the end to allow direct comparison with the purple-red, and the "grey" was moved to next to the bue, for the same reasons.

Variants and adjustments
Below is the same list, snapped to the nearest named color (via WolframAlpha). Hover the colors to see the names.

<tt title="BurlyWood"    >#deb887</tt> <tt title="DarkKhaki"    >#bdb76b</tt> <tt title="DarkSeaGreen" >#8fbc8f</tt> <tt title="PowderBlue"   >#b0e0e6</tt> <tt title="LightSteelBlue">#b0c4de</tt> <tt title="Silver"       >#c0c0c0</tt> <tt title="Plum"         >#dda0dd</tt> <tt title="Pink"         >#ffc0cb</tt> <tt title="DarkSalmon"   >#e9967a</tt>


 * Note: the grey and the red ones were hand-tweaked because WA's suggestions didn't really match well; it's possible there would be even better matches for the other colors, but this seems sufficient.

And here, snapped to the nearest web-safe color (via Photoshop):

<tt>#ffcc99</tt> <tt>#cccc99</tt> <tt>#cccc99</tt> <tt>#99cccc</tt> <tt>#ccccff</tt> <tt>#cccccc</tt> <tt>#cccccc</tt> <tt>#ffcccc</tt> <tt>#ffcc99</tt>

For comparison, here's the "all web colors combined" palette from above:

<tt>#99cc99</tt> <tt>#99cccc</tt> <tt>#99ccff</tt> <tt>#cccc33</tt> <tt>#cccc66</tt> <tt>#cccc99</tt> <tt>#cccccc</tt> <tt>#ccccff</tt> <tt>#ccffcc</tt> <tt>#ccffff</tt> <tt>#ffcc00</tt> <tt>#ffcc33</tt> <tt>#ffcc66</tt> <tt>#ffcc99</tt> <tt>#ffcccc</tt> <tt>#ffccff</tt> <tt>#ffff00</tt> <tt>#ffff33</tt> <tt>#ffff66</tt> <tt>#ffff99</tt> <tt>#ffffcc</tt>

We could combine these to get a hand-picked palette. It wouldn't be theoretically pure, but at least it would be based on something that is...