The 12-bit rainbow palette

Beautiful palette!<p>CSS recently has been adding way more color features, here&#x27;s the palette represented in oklch:<p><pre><code> #817 → oklch(0.44 0.1815 335.38) #a35 → oklch(0.51 0.1559 7.49) #c66 → oklch(0.63 0.1298 21.44) #e94 → oklch(0.75 0.1415 62.42) #ed0 → oklch(0.88 0.18646 103.9148) #9d5 → oklch(0.82 0.181 131.77) #4d8 → oklch(0.80 0.1757 154.39) #2cb → oklch(0.76 0.1298 184.05) #0bc → oklch(0.72 0.123861 206.321) #09c → oklch(0.64 0.129199 231.0549) #36b → oklch(0.52 0.1448 260.03) #639 → oklch(0.44 0.1603 303.37) </code></pre> You can see the lightness and chroma moving within a narrow range as it sweeps the hue. These new color space functions make making palettes like this way easier.

This is nice, and works really nice for her use case!<p>Two things to note when thinking about color schemes:<p>(1) dr. Cynthia Brewer spent way too much time developing <i>the</i> color scheme for maps with information and similar inforgraphics. I can&#x27;t find the document at this time, but was a lecture long explanation about how she got them.<p>(2) designers often use &quot;sacred geometry&quot; bullshit like &quot;golden ratio&quot;, PI, Phi, and such to explain their thought process. The most common way to create a color palette is to use opposite colors, &quot;triads&quot; and &quot;tetrads&quot;. All of this is based on color wheel in HSL&#x2F;HSV. Which is almost as bad at describing relation between colors as RGB. [2]<p>PS. my pet peeve for a long time was trying to understand why most color quantization algorithms were relying on finding the distance between RGB colors in 3D space (by mapping RGB components to XYZ coordinates) while it&#x27;s obviously a terrible way to reason about color relationship.<p>PPS. a random dude with a similar interest but way more dedication (re)disovered a work by Kubelka and Munk from 1931 describing an algorithm how to properly mix colors and based on that created an incredible graphics program that allows you to paint just like in real life - with oils and watercolors on canvas! [3]<p>[1] <a href="https:&#x2F;&#x2F;colorbrewer2.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;colorbrewer2.org&#x2F;</a> [2] <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=gnUYoQ1pwes" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=gnUYoQ1pwes</a> [3] <a href="https:&#x2F;&#x2F;www.escapemotions.com&#x2F;products&#x2F;rebelle&#x2F;about" rel="nofollow">https:&#x2F;&#x2F;www.escapemotions.com&#x2F;products&#x2F;rebelle&#x2F;about</a>

My usual problem with these palettes from color blindness. The two greens are almost identical for the most common type. They don&#x27;t have good contrast if they&#x27;re e.g. used for lines in a chart.

Cool! I have a palette editor tool that lets you visualise how the hue, saturation and luminance varies over the palette using the HSLuv colorspace (ignore the UI mockup on the left):<p><a href="https:&#x2F;&#x2F;www.inclusivecolors.com&#x2F;?style_dictionary=eyJjb2xvciI6eyJiYXNlIjp7InJlZCI6eyI1MCI6eyJ2YWx1ZSI6IiMzMzY2YmIifSwiMTAwIjp7InZhbHVlIjoiIzAwOTljYyJ9LCIyMDAiOnsidmFsdWUiOiIjMDBiYmNjIn0sIjMwMCI6eyJ2YWx1ZSI6IiMyMmNjYmIifSwiNDAwIjp7InZhbHVlIjoiIzQ0ZGQ4OCJ9LCI1MDAiOnsidmFsdWUiOiIjOTlkZDU1In0sIjYwMCI6eyJ2YWx1ZSI6IiNlZWRkMDAifSwiNzAwIjp7InZhbHVlIjoiI2VlOTk0NCJ9LCI4MDAiOnsidmFsdWUiOiIjY2M2NjY2In0sIjkwMCI6eyJ2YWx1ZSI6IiNhYTMzNTUifSwiOTUwIjp7InZhbHVlIjoiIzg4MTE3NyJ9fX19fQ%253D%253D" rel="nofollow">https:&#x2F;&#x2F;www.inclusivecolors.com&#x2F;?style_dictionary=eyJjb2xvci...</a><p>I.e. from the first to the last color, the hue increases in even gaps, and the luminance goes from quite dark then gradually brighter up to yellow, then gradually darker again.<p>&gt; An LCH rainbow colour palette can be created by choosing fixed chroma and luminance values and varying the hue<p>&gt; Yellow is given the highest luminance, as it only looks yellow when bright.<p>I find it interesting how hue and luminance are sometimes conflated when talking about colors. &quot;Blue&quot; usually means &quot;blue hue, low to high luminance&quot;, and similar for a lot of other colors like green. But &quot;yellow&quot; usually means &quot;yellow hue, high luminance&quot;, similar for orange.

Technically, this is a 3.5849625 bit palette, though if you add black, white, transparent, and a reserved entry, it’d be 4 bit.

Why is the far left and far right nearly the same color? If you’re showing a gradient the max and min would be nearly indistinguishable.

&gt; <i>chosen with consideration for how we perceive luminance, chroma, and hue</i><p>Needs more consideration. The colors are not equally different.

The 12 bit constraint is a fun one although a little artificial. But picking 12 different colors with constant luminance is quite a challenge! ColorBrewer only goes to 9, and to my eyes more than 6 is very hard to make out. But these 12 are quite nice if you don&#x27;t mind a little blurring, particularly folks with some form of colorblindness.

Why is 12 bits 4 characters? Shouldn&#x27;t it be 3 hexadecimal digits (as shown on the website), since each digit is 4 bits?

Is there a good way to select visually distinct colors? It&#x27;s easy to do one self if it&#x27;s only a few colors, but it gets particularly hard the more than 6 or so colors. I have a use case where I need up to 20 or 30 visually distinct colors, and it&#x27;s hard.<p>EDIT: Found this which seems reasonable: <a href="https:&#x2F;&#x2F;sashamaps.net&#x2F;docs&#x2F;resources&#x2F;20-colors&#x2F;" rel="nofollow">https:&#x2F;&#x2F;sashamaps.net&#x2F;docs&#x2F;resources&#x2F;20-colors&#x2F;</a>

Really cool project! I like the twelve color palette the author presents, and the grayscales, but I&#x27;d love to see more about the choice to use twelve bits to encode it. Presumably enough of the rest of the possibility space is needed to justify writing a custom encoding. Or maybe it was done because custom color encodings are cool, which they definitely are.<p>The palette is so pretty, I wonder how the whole LCH color space quantized down to 4096 colors looks. I find limited bitdepth color spaces fascinating to look at, there&#x27;s so many choices about how to represent color they can look wildly different.

There&#x27;s 3 &quot;clear blues&quot; that look indistinguishable to me, unless they appear next to each other. The two magentas also look too close to be distinguishable.

By LCH, is she referring to this?<p><a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;CIELAB_color_space#Cylindrical_model" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;CIELAB_color_space#Cylindrical...</a><p>I&#x27;ve not paid much attention to this aspect of CIELAB, but, oh, I see; if you go clockwise around the rectilinear representation you do get rainbow order.

Available in several formats at cpt-city <a href="http:&#x2F;&#x2F;seaviewsensing.com&#x2F;pub&#x2F;cpt-city&#x2F;kmo&#x2F;" rel="nofollow">http:&#x2F;&#x2F;seaviewsensing.com&#x2F;pub&#x2F;cpt-city&#x2F;kmo&#x2F;</a>

Thanks! Love this color palette. I never liked the jarring difference in luminance between colors in the standard palettes.

love this! great work. I often use 12-bit&#x2F;4-character definitions just for a fun extra limitation. going the extra mile to create a palette with them is so cool

Fun exercise in constraints, but why limit yourself to 12 bit color? Was this a technical requirement?

Are there gray colors to go along with it? This seems great for charts though

Just like Amiga OCS&#x2F;ECS. 4-bits for each red, green and blue.

The problem with using 12-bit sRGB is that sRGB is not a linear colorspace. You&#x27;re not taking 16 evenly spaced points in the full range of brightness, you&#x27;re taking 16 points along the sRGB curve.