Gregory's ServerI designed the 12-bit rainbow palette for use on https://grid.iamkate.com. It consists of twelve colours chosen with consideration for how we perceive hue, chroma, and luminance. 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. For more details, see https://iamkate.com/data/12-bit-rainbow/
|
90 comments
  @ctietze @ksaj @kate "My" two cyans are the 4th and 5th color from right (or the two rightmost in your excerpt). Wait... my definition of cyan always was "blue-green with a bit of whitestep", as if cyan never occurs without a bit of white mixed in. @ksaj I do suspect that this chart would only make sense to normal-sighted people. I do see a difference between Baseline and Deuteranomaly, it's the smallest difference out of all lines, but I do suspect that difference is due to the fact that I'm seeing it on an RGB Monitor made for normal-sighted people. @anathem Yea, they aren't perfect. But it's pretty close-yet-not-perfect for me for the tritanomaly spectrum.   @kate love it! Going to work this into an internal analytics tool at work for our charts. @kate I've recently had similar thoughts to define the colors for my linux terminal. I went for constant luminance, though. With two different brightness levels and trying to maximize apparent hue differences (too many blues and greens). Going with smoothly changing luminance is a nice idea, though probably not quite applicable for my use case... @kate This is great but it could be expanded to 15 or 16 colors if you include black, white, and one or two shades of gray. I also question whether this pallet would improve accessibility for people with visual impairments. Fascinating - calls to mind Goethe's theory of colour and the subjective emotions (mood) embedded in the multitude of tone and hue https://www.openculture.com/2013/09/goethes-theory-of-colors-and-kandinsky.html @kate Kate, I love where you took this palette! 🌈📊💥❤️🎨 Great job smoothing the luminance changes while preserving the general gist of the actual color shade we perceive. :)  @kate Not nearly as beautiful as your nicely crafted palette, but if anyone wants dynamically generated palettes of any size of maximally distinguishable colors (to the human eye), I wrote this JavaScript library: https://www.npmjs.com/package/maxichrome Image example is palettes of 12 for three cases @kate I love it! Considering making a tailwind palette of this, except then I’d ruin the short hex codes 😔 Dear @kate, your work is simple and perfect. I test the palette on different monitors and programs; it's spotless. Thank you for sharing it. In the comments, you said that all your works have a CC0 license; thank you also for this. I am a psychologist and an amateur photographer loving to enjoy color palettes and try experimenting with them (to create alternative palettes). You provide a new toy, at least for me. ☺️     @kate That's a pleasing palette. If you're using it for false color in visualization, wouldn't there be a problem with the most right color being too easily interpreted as somewhere on the left side? It's almost like the most right color should be the first left and everything else shifted right by one. Anyway, it's still quite a bit nicer than the typical data visualization choices 😃  @jhoward @kate I was thinking the same - they’re fine if they’re always kept separate in a visualisation but if they cross paths then they could be confused. I’ve zero expertise in this so curious to hear the actual answer from Kate - or alternatively why you (Kate) didn’t make the right-most one a darker blue. I’m sure there’s a good reason! @kate It is so pretty, I wish I had had it when I was working on Atari STe... and then I'd have requested a 9-bit variant for Atari STf and for Sega Genesis.  @kate just discovered it, very impressive! Did you use HSL and then adjust luminance by hand? I wonder if LCH or OKLCH is easier to use for this sort of stuff, as its L component already corresponds to the perceived light. Colour picker: https://oklch.com/#70,0.1,77,100 @kytta I choose the lightest (yellow) and darkest (burgundy) colours, interpolated between them in the HCL colour space, and then adjusted them to 12-bit RGB colours while ensuring the HCL differences between neighbouring colours were still approximately constant across the palette  @kate @simon I wonder if you're aware of the contrast distortion a rainbow palette causes for visualizations, and how it also presents nearly the same colors at both extremes for most common forms of color blindness. There are better palettes for viz work, the most common being viridis. Read more here: @Globaltom @kate This is incredible! Perfect balance of visually appealing and mathematical purity. Did you use linear interpolation for luminance or a sine curve? Do you think a different chroma or lum min/max would work better for dark vs light modes?  @kate thank you for this, it’s very good! I’ve worked most my career in color (physical print, so *no one* wants anything muted) and never thought of approaching a color palette in this way.  @kate Nice work, I’ve always wanted guidance on how to choose colors for graphs and this makes it easy.  @kate I wish I had a website to build just to spray these wonderful colours everywhere on it. @kate Hope you don't mind put it out on codepen. https://codepen.io/MrRoberts/pen/PoBBEzG   @kate words cannot express how much I love this and how desperate I am to see how it looks on https://pico.pinout.xyz and my blog! @kate Apropos of nothing but my own personal experience, this is a very nice set of colors. I can actually see the 12 bands. I have some kind of visual deficiency where I see a reduced color set from the “average” person. I describe it like this: if a normal person sees the 64 box of crayons, I only get so see the box of 8. Shades in the blue/green range are the hardest for me to distinguish. Frequently on software color pickers, multiple consecutive boxes will all look the same to me.   @kate Came for the palette, stayed for https://grid.iamkate.com/ @Globaltom The standard formula (from ITU-R Recommendation BT.601) is the weighted average 0.299 * red + 0.587 * green + 0.114 * blue @kate As a yellow-blue colourblind individual, there is a huge swath that looks like the same colour to me. The first 5 and last 3 are differentiated (and look great!), but everything in between is a smear of cyan. @kate  @kate @brunty I wonder what the phenomenon is called when one can’t directly look at this palette. I have to look to the side of it to see it properly. Otherwise, the colors bleed together, and I can’t tell where one begins and the other ends. I don’t think I’m color blind, but this has me questioning that.  @kate LOVE THE PALETTE!!! Plus, I'm goint to use this image as a wallpaper!! @kate I love the logic behind this! ...but eyeballing the respective r/g/b columns on the 16 colour triplets, I was confused that the blue values didn't follow a logical progression - the "5" in #a35 drops awkwardly between a 7 and a 6. Digging further, I see you already have it as #a36 in the embedded svg, the "#a35" in only the visible text and css. Is "a36" the intended fix? (though... #a35 seems redder/better to me, but then the third colour would have to become #c65 or even #c64?!) Dear @kate I'd like to adapt your model for my color palette templates in presentations. The Hex value don't work, at least not in LibreOffice where the # character is ignored. Do you have a recommendation? Best wishes, |
@kate very handy, thank you for sharing!