11 ms·
The 12-bit rainbow palette
- nomagicbullet 4y agoI'm a color nerd and I love seeing how even with such an old concept (RGB is 162 years old), people are still interested in finding opportunities to innovate. I love this palette and will be adopting it. Thanks for sharing.
- hypertele-Xii 4y agoRGB is a bit older than 162 years, those are the three colors the human eye percieves (excluding mutations).
- ravi-delia 4y agoEh, RGB is a particular abstraction which is about that old. The human eye is way weirder even before you throw in all the luminosity stuff, and by the time the brain actually computes the color data? Forget it.
- visarga 4y agoLike this optical illusion - the pieces at the top are the exact same colour as the ones at the bottom. https://pbs.twimg.com/media/FSqWB1yX0AAZ-fk?format=png https://pbs.twimg.com/media/FSqWB1yX0AAZ-fk?format=png
- hypertele-Xii 4y agoRGB is not an abstraction. The color-sensing cells in your eyes come in literally three varieties: red, green, and blue. https://en.wikipedia.org/wiki/Cone_cell https://en.wikipedia.org/wiki/Cone_cell
- function_seven 4y agoThey’re actually S, M, and L. While we can choose three primary colors such that a large gamut can be represented, it is impossible to choose 3 hues that will be able to represent the entire visible gamut. Our color sensing cones and the brain processing behind them is more complicated than simple mixing of R, G, and B. Cyan is a good example. It lives on a “hump” in the color space that cannot be reached by any general-purpose gamut.
- hypertele-Xii 4y agoS, M, and L are shorthands for short, medium, and long wavelengths. Guess what these wavelengths are commonly called? Red, green, and blue (though in inverse order, L=R, M=G, S=B). Can you clarify your example of cyan? I'm perfectly capable of both seeing and producing cyan with my human eyes and RGB screen.
- function_seven 4y agoSo what is called "Cyan" on a computer screen (#00ffff) is as close as you can get to the real color by mixing RGB. In real life, Cyan would be a pure lightsource at, say, 490nm. When that light hits your retina, it will stimulate the S, M, and L receptors in different ways, and your brain will do the math on those differential signals to "rebuild" the color. RGB is a hack we've come up with to stimulate each of the cones separately. But it cannot cover the whole gamut. Look at this diagram: [0]. The triangle is the gamut that results from choosing a particular set of 3 primaries. Only colors inside that triangle can be simulated by the mixing of those primaries. Colors that lie outside of the triangle cannot be created. There are other gamuts that cover more visible colors, like the Adobe Wide Gamut [1]. Even this one still manages only 78% of the colors we're capable of seeing. And still no pure Cyan. The thing we call "cyan" on our computer screens is desaturated. The mixing of the green and blue primaries that mimics pure 490nm unfortunately also stimulates the L cone too much. From [2]: > No mixture of colors, however, can produce a response truly identical to that of a spectral color, although one can get close, especially for the longer wavelengths, where the CIE 1931 color space chromaticity diagram has a nearly straight edge. For example, mixing green light (530 nm) and blue light (460 nm) produces cyan light that is slightly desaturated, because response of the red color receptor would be greater to the green and blue light in the mixture than it would be to a pure cyan light at 485 nm that has the same intensity as the mixture of blue and green. [0] https://commons.wikimedia.org/wiki/File:CIE_chromaticity_diagram_2012_version.png#/media/File:CIE_chromaticity_diagram_2012_version.png https://commons.wikimedia.org/wiki/File:CIE_chromaticity_dia... [1] https://en.wikipedia.org/wiki/Wide-gamut_RGB_color_space https://en.wikipedia.org/wiki/Wide-gamut_RGB_color_space [2] https://en.wikipedia.org/wiki/Color#Color_in_the_eye https://en.wikipedia.org/wiki/Color#Color_in_the_eye
- ravi-delia 4y agoNot the sRGB used in monitors and simple color-pickers, no? Might be wrong here, but I'm fairly certain that day-to-day RGB that most programmers are familiar with is a direct representation of the brightness of the various colors of pixel in a given region (modulo green). The CIE-XYZ color space is the one which tries to represent human vision. RGB isn't crazy far off, but the R, G, and B values certainly don't map directly onto the activation of the L, M, and S cones. (0,255,0) is legal RGB, and displays a particular color, even though such a combination of activations is clearly impossible in the human eye. So given that RGB is a simpler, more tractable representation of a more complicated system...I'd call that an abstraction.
- nomagicbullet 4y agoAppreciate your note. I should have said the RGB color model used by humans to represent color spectrum.
- cma 4y ago12 element not 12 bit, right?
- echelon 4y agoBoth. The members use 12 bit depth. These look fantastic as demoed here: https://grid.iamkate.com https://grid.iamkate.com
- dqh 4y agoEach of the 8-bit channels is only allowed 16 different values, i.e. needs 4 bits to represent. I think it's reasonable to describe three 4-bit channels as 12-bit colour?
- zeta0134 4y agoBoth: the resulting colors are specified as 4-bit component values, one for each of R, G, and B
- notorandit 4y agoRight. The very same palette can be done with usual 24- and 32- bit palette. A palette is supposed to be a (chosen) subset of the whole color space. So this is a 12 colors palette over a (presumably) 24hbit color space. A 12-bit palette should have 4096 different colors to be enumerated. That one is a 4-bit palette.
- Dwedit 4y ago12 bit is 4096 colors. This is 12 colors, or 3.585 bits (Usually rounded up to 4 bits to make 16 colors)
- tambarskjelve 4y agoEvery color in the palette exists in a 12-bit color space because each component can be stored in four bits, totaling 12 bits. As a result, each component can also be represented by one hexadecimal. It's nice to have a palette where the colors don't require 24 bits to be displayed correctly, and three hexadecimal digits are arguably easier to type out and remember than six.
- dqh 4y agoI really like this, but FYI I do struggle to tell the difference between the first and last colour. There are probably others out there with this problem.
- marcuskaz 4y agoYou might have a slight color deficiency, you can try this online color vision acuity test: https://www.xrite.com/hue-test https://www.xrite.com/hue-test
- hayley-patton 4y agoI did it, decided to compare results, and saw > Best Score for your Gender -69420 > Worst Score for your Gender 1000000000 Someone doesn't sanitize their inputs?
- susam 4y agoI get this now: > Best Score for your Gender -2147483648 > Worst Score for your Gender 2147483647
- ygjb 4y agothat was a cool test, thanks for sharing it!
- dqh 4y agoYeah, I scored a 6 where 0 is perfect.
- skykooler 4y agoI scored a 0, but I still find the first and last colors to be hard to tell apart at a glance (though they might be easier to distinguish if they were right next to each other).
- deleted 4y ago[deleted]
- joshu 4y agoi love oklab for this
- naikrovek 4y agoI need a 16-color version of this for terminals. actually this probably already exists. 8 colors of equal perceived brightness and the same 8 colors at a higher but equal to each other perceived brightness.
- joshka 4y agoThis was my first thought too. I wonder how close to solarized[1] that would come. [1]: https://ethanschoonover.com/solarized/#features https://ethanschoonover.com/solarized/#features
- dngray 4y agoExcept that solarized has a bunch of other problems https://github.com/jan-warchol/selenized/blob/master/whats-wrong-with-solarized.md https://github.com/jan-warchol/selenized/blob/master/whats-w...
- dylan604 4y ago"Thus in the case of a dark background colorscheme, the normal relationship for background and body text is base03:base0 (please note that body text is not base00)." This was at the bottom, but even earlier in the blog when the codes were first shown, base0 and base00 just seemed kludgy to me on first sight. Then to see this note shows that I wasn't the only person to have issues with the naming. I know naming is hard and all, but this just seemed like low effort
- a1369209993 4y ago> 8 colors of equal perceived brightness Doesn't work because as you adjust the brightness, yellow turns brown before blue stops looking washed-out (or vice versa). The problem is that yellow is, 1/255 increment for 1/255 increment, about 9 times brighter than blue, and the range of brightnesses that produce useful saturation just doesn't isn't wide enough to accomodate that difference.
- naikrovek 4y agohow often do you think people adjust brightness?
- emsign 4y agoIf you take a closer subjective inspection of the corrected palette you will notice that the luminance adjustments makes typical day colors bright and typical night colors dark. It looks like day and night adjusted now. Due to the color diffraction of our atmosphere when the sun is low the colors get filtered and the light gets lower and this new palette is a better representation of that daily change.
- p-e-w 4y agoWhat is the advantage of restricting the palette to a color depth of 12 bits, when every display device the colors are likely to be shown on supports much higher color depth, and printing yields much wider color ranges as well? The only hint given in the article is > so each colour requires only four characters when specified as a hexadecimal colour code in a CSS or SVG file but surely this can't be the answer? Such a minor technical detail doesn't seem worth deviating even slightly from the "ideal" HCL values.
- epidemian 4y agoIDK it's cool to be able to write these nice colors with 3 hex characters :)
- tasuki 4y agoI think I understand why. I think the primary reason is that it's minimalist and very much empathise with such endeavours. There are several advantages to such minimalism: easier to read and write in code, fewer bytes to store and transfer, and perhaps also satisfying one's ocd. Let me flip this on you: why use 6 characters to specify colours when 3 will do fine? What exactly would your "ideal" HCL values be?
- p-e-w 4y ago> What exactly would your "ideal" HCL values be? The post specifically mentions that "slight changes" to the constructed HCL values "must be made" in order to conform to the 12-bit color depth. So the author first derived certain values from theoretical/aesthetic considerations, then modified them for the sole purpose of fitting into 12 bits. This doesn't make sense to me except in very, very niche cases where saving 3 bytes (or even less, considering compression) actually matters more than visual quality.
- tasuki 4y agoThanks, I missed that part. But also it appears you missed that these changes aren't noticeable: > Using a 12-bit colour depth limits the available colours, so slight changes to hue, chroma, and luminance must be made, but these are small enough not to be noticeable. Again, I don't think it's about saving the disk/network the 3 characters. It's about minimalism and perhaps about developer experience: these colours are easier to read, write, and remember. Is that worth nothing? Perhaps you use a CSS preprocessor and can define variables for your colours and don't need to write them down repeatedly. But perhaps other people don't. Or perhaps they're porting a colour scheme to many different applications. In these cases, three letter colour codes are superior to six letter ones.
- copperwater69 4y ago
- bscphil 4y agoI think starting with HSL (as opposed to e.g. Oklab) is a mistake. (EDIT: the following claim was a mistake on my part.) Note this from the results: > The resulting palette has evenly-spaced hues, only small variations in chroma, and smoothly increasing and decreasing luminance: IMO the palette does not have decreasing luminance. To my eye, on a color corrected monitor, luminance seems to peak at yellow.
- c22 4y ago"Yellow is given the highest luminance, as it only looks yellow when bright. After choosing two other colours — a red and a blue in this case — the luminance can then be calculated for the other hues."
- bscphil 4y agoAh thanks, I realize I misread it. It's "smoothly increasing and decreasing", meaning it drops off on either side.
- deleted 4y ago[deleted]
- splittingTimes 4y ago> rainbow palette for use in my data visualisations. Indeed for her kind of data the rainbow palette works okay. But if you have to visualize more complex / denser data, beware of the pitfalls of the rainbow color palette. It is not always the best choice. IBM did research back in the 90s on perceptually-based colormaps and how to best represent various types of data within the color dimensions of luminescence, saturation and hue [1]. For example, they found that, (1) Hue was not a good dimension for encoding magnitude information, i.e. rainbow color maps are bad. (2) The mechanisms in human vision responsible for high spatial frequency information processing are luminance channels. If the data to be represented have high spatial frequency, use a color map which has a strong luminance variation across the data range. (3) For interval and ratio data, both luminance- and saturation-varying color maps should produce the effect of having equal steps in data value correspond to equal perceptual steps, but the first will be most effective for high spatial frequency data variations and the second will be most effective for low spatial frequency variations. === [1] the original link got removed from IBMs website. Back in the day it was under https://www.research.ibm.com/people/l/lloydt/color/color.HTM https://www.research.ibm.com/people/l/lloydt/color/color.HTM A pdf copy is here: https://github.com/frankMilde/interesting-reads/blob/master/ibm-research__why-should-engineers-and-scientists-be-worried-about-color.pdf https://github.com/frankMilde/interesting-reads/blob/master/...
- ajuc 4y agoWhat's wrong with grayscale? Why do we need to add confounding variables?
- WastingMyTime89 4y agoPointing that luminance is the best channel to encode spatial frequency is akin to encouraging greyscale. It’s just that you can do it with a hue and a non zero saturation if it suits the style you are looking for. Plus sometimes you have more than on me set of data mixed and it’s useful to be able to distinguish both by using multiple colours.
- visarga 4y agoWhen you want to plot a categorical distribution you need to encode category by colour, but you want them to appear maximally distinctive.
- LAC-Tech 4y agoHow much of how we perceive luminance is biological? Or I suppose neural... (out of my depth here). By which I mean, is there any objective measure of human perceived luminance?
- Archelaos 4y agoThere exists a method called "Magnitude Estimation". https://groups.inf.ed.ac.uk/webexp/release/demos/magnitude-estimation-info.html https://groups.inf.ed.ac.uk/webexp/release/demos/magnitude-e... describes it as follows: "Magnitude estimation a technique standardly applied in psychophysics to measure judgments of sensory stimuli (Stevens 1975). The magnitude estimation procedure requires subjects to estimate the magnitude of physical stimuli by assigning numerical values proportional to the stimulus magnitude they perceive. Highly reliable judgments can be achieved for a whole range of sensory modalities, such as brightness, loudness, or tactile stimulation."
- smodo 4y agoIf you really want to make sure people can read visualizations with this many colors, please use one of the many palettes designed for color blind/deficient readers. It doesn't detract from your graphs and makes them readable for everyone.
- visarga 4y agoThis is great when plotting categorical distributions but I can never get to 20-30 distinct colours, only works for about 10.
- otikik 4y agoToo many blues
- benj111 4y agoShout out to https://grid.iamkate.com/ https://grid.iamkate.com/ on the same site Shows realtime and historic energy generation data for the uk. Recently been updated to include price history and other stuff.
- vardump 4y agoThat's how Amiga OCS/ECS color palette works as well, 4 bits per primary. For whatever reason my brain considers it important enough I still remember $dff180 is the first color palette entry address. :-)
- deleted 4y ago[deleted]
- deleted 4y ago[deleted]
- fjfaase 4y agoThe Dutch artist Peter Struycken has made paintings with various rainbow palette, not using some kind of computer based method (although he is a prominent computer artist), but just his eyes. See: https://www.pstruycken.nl/EnS20.html https://www.pstruycken.nl/EnS20.html (A computer program was used to design of the pattern being used in the paintings.) He has created many colour palettes for specific buildings and applications. See: https://www.pstruycken.nl/EnDyn.html?Li,tag=q&w https://www.pstruycken.nl/EnDyn.html?Li,tag=q&w
- amelius 4y agoInstead of giving us a small number of colors, could this idea be turned into a new colorspace model?
- danwills 4y agoYeah I've been using HSV transform in feedback (in glsl shaders) to great effect lately (rotate hue a bit to get rainbow-color cycling) but only the other day I was wondering how the heck to make this rainbow better!? (essentially: more like real diffraction) If it passed through the colors in the article instead of going around the hsv-wheel that would be a huge improvement I reckon! I'll brave the syntax and try to paste my current method: vec3 rgb2hsv(vec3 c) { vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); float d = q.x - min(q.w, q.y); float e = 1.0e-10; return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); } I wish I knew more about what this code is really up to, I inherited it from somewhere, can't remember, and I'll admit I haven't tried to understand it yet.
- nanis 4y agoHmmm, with 12 bits, I was expecting 4096 colors, not 12.
- tuukkah 4y agoNot 4096 rainbow colors, but rainbow colors in a color space of 4096 colors. I have to admit I was expecting 4096 colors too, the "rainbow" of Amiga's HAM6 graphics mode: https://commons.m.wikimedia.org/wiki/File:Amiga_500-3000_HAM6.jpg https://commons.m.wikimedia.org/wiki/File:Amiga_500-3000_HAM...
- psychphysic 4y agoI skimmed, the b&w comparison is nice. Bit when I create visualisations the info I need (can't guess myself or workout) is what it looks like with colour blindness. That's rather more common than not having access to colour.
- IIAOPSW 4y agoI'm personally partial to 3 bit and sometimes 4 bit color because it can be easily implemented on an RGB LED and will be instantly recognizable to people as "subway map colors". The 4th bit variant just introduces "half power" option.
- Pxtl 4y agoEven hue seems to have yielded some redundant-looking blues.
- bloopernova 4y agoThis was cool to read, because it indirectly taught me to understand HSV. I've always had trouble understanding the colour spaces other than RGB. After reading that article, I understood a little more about the luminance due to the greyscale used. From there I searched for "rgb vs cmyk vs hsv" and found this: https://www.geeksforgeeks.org/difference-between-rgb-cmyk-hsv-and-yiq-color-models/ https://www.geeksforgeeks.org/difference-between-rgb-cmyk-hs... (with annoying "sign up with google" popovers) From there I wondered if there was a visualizer for the HSV cone, and yes there is! https://color.lukas-stratmann.com/color-systems/hsv.html https://color.lukas-stratmann.com/color-systems/hsv.html So, if you're out there wondering if you should write that visualizer that you had a weird idea for, please, please do so. It may help some random internet person understand something :)
- roter 4y agoI really like this palette. If I had one caution, it would be for using it for symmetric or diverging colour scales. i.e. for anomalies with 0 at the centre. Typically zero would be at the lightest greyscale which for this palette is the yellow, offset from centre. That said, in the example visualizations on their site, colour is used to indicate unique values, and are strikingly clear. So, all good!
- counterpartyrsk 4y agoLove the pallet
- Maursault 4y agoThis isn't 12-bit color depth. It's a 12 color palette, so its color depth is x if 2^x=12 or ln(12) ------ ln(2) Color depth (or bit depth) is the number of bits used to indicate the color of a single pixel. So 24-bit color depth produces 16,777,216 colors, 12-bit color depth produces 4096 colors, 8-bit color depth produces 256 colors, and 4-bit color depth produces 16 colors. A 12 color palette is 3.58496250…-bit color depth.
- Inufu 4y agoThe 12 bit part refers to the colours being specified using three hex letters.
- chrisseaton 4y agoYou’re misunderstanding - they mean they’ve chosen colours from a 12-bit subset of RGB.
- Maursault 4y ago> You're misunderstanding >> The palette uses a 12-bit colour depth It is the author that has misunderstood.[1] [1] https://en.wikipedia.org/wiki/Color_depth https://en.wikipedia.org/wiki/Color_depth
- chrisseaton 4y agoNo, read it again more carefully. They’ve selected colours from the subset of RGB that is representable with 12-bits. > 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: Four hexadecimal characters is twelve bits. The colours they’ve chosen can be represented precisely in a 12-bit colour space. Get what they mean? It’s further confirmed again in the article: > Using a 12-bit colour depth limits the available colours, so slight changes to hue, chroma, and luminance must be made, but these are small enough not to be noticeable. How could it ‘limit the available colours’ unless this was their meaning?
- JaDogg 4y agoNice, I can extract some 4 colour palettes out of this for game dev.
- giantdude 4y agoFirst and last color (purples) are extremely similar on my monitor.
- memco 4y agoTurned this into an iTerm color scheme to play around with the colors if anybody's interested: https://gist.github.com/memco/83edcaf20123dbe6ab3f19bef7e8a133 https://gist.github.com/memco/83edcaf20123dbe6ab3f19bef7e8a1....
- dmitrygr 4y ago#ed0 #9d5 #4d8 These look the same to approx 6% of the population, especially when not immediately next to each other or used for thin lines/bars. Accessibility is seemingly never considered