I designed the 12-bit rainbow palette for use on National Grid: Live. It consists of twelve colours chosen with consideration for how we perceive luminance, chroma, and hue:
The palette uses a 12-bit colour depth, so each colour requires only four characters when specified as a hexadecimal colour code in a CSS or SVG file:
#817
#a35
#c66
#e94
#ed0
#9d5
#4d8
#2cb
#0bc
#09c
#36b
#639
Designing the palette
Computers define colours in terms of red, green, and blue components, which are treated equally. However, we perceive these components as having differing luminance: compared to a pure red, a pure green looks much brighter and a pure blue looks much darker. As a result, a simple RGB rainbow palette has large changes in luminance between neighbouring colours. This can be seen by converting colours to greys of equal perceived luminance:
The LCH colour space is an alternative to the RGB colour space that defines colours in terms of luminance, chroma, and hue components. These components are perceptually uniform, which means that a change by a particular numerical amount will be perceived similarly for any colour.
An LCH rainbow colour palette can be created by c
15 Comments
jjgreen
Available in several formats at cpt-city http://seaviewsensing.com/pub/cpt-city/kmo/
pspeter3
Are there gray colors to go along with it? This seems great for charts though
BugsJustFindMe
> chosen with consideration for how we perceive luminance, chroma, and hue
Needs more consideration. The colors are not equally different.
barrkel
My usual problem with these palettes from color blindness. The two greens are almost identical for the most common type. They don't have good contrast if they're e.g. used for lines in a chart.
kazinator
By LCH, is she referring to this?
https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical…
I'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.
cdev_gl
Really cool project! I like the twelve color palette the author presents, and the grayscales, but I'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.
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's so many choices about how to represent color they can look wildly different.
jasonthorsness
Beautiful palette!
CSS recently has been adding way more color features, here's the palette represented in oklch:
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.
msephton
love this! great work. I often use 12-bit/4-character definitions just for a fun extra limitation. going the extra mile to create a palette with them is so cool
NelsonMinar
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't mind a little blurring, particularly folks with some form of colorblindness.
jjmarr
Why is 12 bits 4 characters? Shouldn't it be 3 hexadecimal digits (as shown on the website), since each digit is 4 bits?
jjcm
Fun exercise in constraints, but why limit yourself to 12 bit color? Was this a technical requirement?
matthew_morgan
Thanks dude
whall6
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.
hedora
Technically, this is a 3.5849625 bit palette, though if you add black, white, transparent, and a reserved entry, it’d be 4 bit.
Dwedit
The problem with using 12-bit sRGB is that sRGB is not a linear colorspace. You're not taking 16 evenly spaced points in the full range of brightness, you're taking 16 points along the sRGB curve.