12 ms·
The 12-bit rainbow palette
- BugsJustFindMe 1y ago> chosen with consideration for how we perceive luminance, chroma, and hue Needs more consideration. The colors are not equally different.
- p1necone 1y agoI think the only way to fix that would be to darken the yellow to the point where it's not really perceived as yellow anymore though - more like a muddy mustard. edit: op originally specifically referred to yellow.
- 01HNNWZ0MV43FF 1y agoYeah, the purples look very close on my screen
- sho_hn 1y agoIt looks quite fantastic on my fairly new OLED screen, and the colors are pleasingly differentiated here. Obviously designing for bad screens and/or eyes are both very important considerations, though.
- sockaddr 1y agoYeah and it's essentially lacking a red
- mjmsmith 1y agoI thought the colors on the linked 'National Grid: Live' page looked pretty good, but they don't match the palette. For instance, the red used is #c45.
- jjgreen 1y agoAvailable in several formats at cpt-city http://seaviewsensing.com/pub/cpt-city/kmo/ http://seaviewsensing.com/pub/cpt-city/kmo/
- andelink 1y agoThis link is not working for me.
- HelloUsername 1y agoAlso on lospec: https://lospec.com/palette-list/12-bit-rainbow https://lospec.com/palette-list/12-bit-rainbow
- pspeter3 1y agoAre there gray colors to go along with it? This seems great for charts though
- barrkel 1y agoMy 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.
- colechristensen 1y agoFrom not-color-blindness, there are more than a few pairs which would still be bad choices for lines on a chart.
- eyegor 1y agohttps://cran.r-project.org/web/packages/khroma/vignettes/tol.html https://cran.r-project.org/web/packages/khroma/vignettes/tol... The tol palettes are the best looking colorblind friendly palettes to me. Most of the others get complaints from non colorblind users about looking bad/desaturated.
- levocardia 1y agoThe viridis package is great for this too! https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html https://cran.r-project.org/web/packages/viridis/vignettes/in... The top comment color palette also reminds me a lot of the viridis "turbo" palette, which is a more perceptually uniform on MATLAB's notoriously bad "jet" palette
- bee_rider 1y agoI tried to get a palette that would work for colorblind people, but I only made it up to 3-4 colors IIRC. I needed to plot more lines… so I ended up using shapes. My plot could be more beautiful without them, but at least everybody can read it. :shrug:
- deleted 1y ago[deleted]
- kazinator 1y agoBy LCH, is she referring to this? https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_model 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.
- ratmeadow 1y agoMust be because most other colour spaces are not very perceptually uniform. I initially thought a variety of HSL but that is definitely not uniform.
- curtisf 1y agoOr oklch: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
- kazinator 1y agoOh, thanks for that; OKLAB is something quite new, by one Björn Ottosson.
- cdev_gl 1y agoReally 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 1y agoBeautiful palette! CSS recently has been adding way more color features, here's the palette represented in oklch: #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) 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.
- nonethewiser 1y agoWhats the deal with oklch? My naive reaction was a that it sucks to define colors in a way you can’t easily reason about or need and external tool to make.
- MrLeap 1y agoThis is the first I've heard of oklch. Here's the perspective of somebody who writes a lot of shaders: It looks similar to Hue/saturation/value encoding, which as tons of uses, but with saturation replaced with "chroma" where it seems to nonlinearly adjust saturation probably based on some perceptual study that makes it extra spicy and high science.
- snibsnib 1y agoI used to work in a paint lab. You are correct, oklch seems to be based off CIELCh. Our eyes are much more sensitive to Blue/Violet, and less sensitive to green. There's a bunch of maths behind the perceived responses of our eyes. If you're interested you can calculate perceived differences in the LCh colorspace using something like CIEDE2000.(https://en.wikipedia.org/wiki/Color_difference#CIEDE2000 https://en.wikipedia.org/wiki/Color_difference#CIEDE2000) A Rainbow with equal DE between colors would probably look better than this one with equal DL.
- msephton 1y agolove 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
- deleted 1y ago[deleted]
- NelsonMinar 1y agoThe 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.
- deleted 1y ago[deleted]
- jjmarr 1y agoWhy is 12 bits 4 characters? Shouldn't it be 3 hexadecimal digits (as shown on the website), since each digit is 4 bits?
- saurik 1y ago3 hexadecimal digits and one # symbol is 4 characters.
- shadowfacts 1y agoFour characters counting the pound sign.
- tom_ 1y agoIt takes fewer keypresses to refer to it simply as #, which is worth doing as its name is locale dependent.
- deleted 1y ago[deleted]
- jjcm 1y agoFun exercise in constraints, but why limit yourself to 12 bit color? Was this a technical requirement?
- mark-r 1y agoLooks like it was just for the convenience of specifying each color with 3 hex digits instead of 6. I doubt it was a requirement, just a nice to have. And the difference between 12 and 24 bits is negligible in this application.
- tasuki 1y agoI also often limit myself to 3 hex digits. The colors look very similar (except the really light ones), and it's more convenient to work with 3 hex digits than with 6 hex digits.
- WorldMaker 1y agoSeems to have been for CSS and SVG bandwidth golf. The article mentions it being for this site: https://grid.iamkate.com/ https://grid.iamkate.com/ According to the bottom of it, it can get quite a few views each day, so bandwidth savings may visibly effect hosting costs. The main CSS file is only 5kb compressed/15kb uncompressed, so it seems to have been part of a larger effort in minimalism.
- matthew_morgan 1y ago[flagged]
- whall6 1y agoWhy 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.
- saretup 1y agoThat would be a waste of a data point. Consider joining the colors in a circular shape.
- JdeBP 1y agoIf you are showing a gradient, then the colour-blind people of the world will tell you in quite strong terms not to use a rainbow for the scale at all, let alone to use a rainbow that has been designed to have this sort of perceived lightness curve. The headlined article is a rainbow, not some universally applicable colour scheme.
- 123pie123 1y agoit would be great if this could be modified to suit both colour blind and non colour blind people
- hedora 1y agoTechnically, this is a 3.5849625 bit palette, though if you add black, white, transparent, and a reserved entry, it’d be 4 bit.
- WatchDog 1y agoRight. A 12 bit palette would be 4096 colors.
- turnsout 1y agoIn this context, 12bit refers to the combined bit count of RGB (each 4bit)
- WatchDog 1y agoIn the context of the original post, or in the context of talking about color depth in general? In the context of the original post, it seems like Kate is just talking about 12 total colors, it's not 12 bit in any logical sense. In the context of color depth sure, 12-bit color[0] would be 4 bits per channel. [0]: https://en.wikipedia.org/wiki/Color_depth#12-bit_color https://en.wikipedia.org/wiki/Color_depth#12-bit_color
- TonyTrapp 1y agoDid you read the article? > 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
- WatchDog 1y agoAh right. I did read it, but I didn't comprehend it properly, because she also happened to also only choose 12 colors for the palette. I see now, she's saying that it's 12 bit, because instead of using a 6 digit hex code, she is using 3 digit hex codes, at four bits per hex value, it's 12 bits.
- 1y ago
- Dwedit 1y agoThe 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.
- gblargg 1y agoWhy would you want to use a linear color space for something meant for eyes?
- reverius42 1y agoI assume they meant a perceptually linear color space, which is exactly what you'd want to use for something meant for eyes.
- zeroq 1y agoThis is nice, and works really nice for her use case! Two things to note when thinking about color schemes: (1) dr. Cynthia Brewer spent way too much time developing the color scheme for maps with information and similar inforgraphics. I can't find the document at this time, but was a lecture long explanation about how she got them. (2) designers often use "sacred geometry" bullshit like "golden ratio", PI, Phi, and such to explain their thought process. The most common way to create a color palette is to use opposite colors, "triads" and "tetrads". All of this is based on color wheel in HSL/HSV. Which is almost as bad at describing relation between colors as RGB. [2] 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's obviously a terrible way to reason about color relationship. 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] [1] https://colorbrewer2.org/ https://colorbrewer2.org/ [2] https://www.youtube.com/watch?v=gnUYoQ1pwes https://www.youtube.com/watch?v=gnUYoQ1pwes [3] https://www.escapemotions.com/products/rebelle/about https://www.escapemotions.com/products/rebelle/about
- hdjrudni 1y agoI think it's rather unpleasant for her use-case actually. I rainbow looks quite nice but when used in a dashboard like that... I don't know, the big solid blocks don't look nice to me. I think they're too saturated. They're nicer for the (outlined) squares and lines, not so nice in the donut graph and for the header backgrounds.
- otikik 1y agoThere's 3 "clear blues" that look indistinguishable to me, unless they appear next to each other. The two magentas also look too close to be distinguishable.
- troupo 1y agoI think those could be used as states for a component: hover/disabled etc. But yeah, if used separately they would be nearly indistinguishable.
- Sammi 1y agoIs there a good way to select visually distinct colors? It's easy to do one self if it'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's hard. EDIT: Found this which seems reasonable: https://sashamaps.net/docs/resources/20-colors/ https://sashamaps.net/docs/resources/20-colors/
- NelsonMinar 1y agoYou found a solution but be aware it's almost always impossible for people to recognize or pick 20 categories of things. Another visualization technique which can help in addition to color is different pattern fills.
- Sammi 1y agoYes. But different checkered patterns are also super ugly, which is a real concern when you're trying to attract customers and make a living.
- vardump 1y agoJust like Amiga OCS/ECS. 4-bits for each red, green and blue.
- seanwilson 1y agoCool! 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): https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvciI6eyJiYXNlIjp7InJlZCI6eyI1MCI6eyJ2YWx1ZSI6IiMzMzY2YmIifSwiMTAwIjp7InZhbHVlIjoiIzAwOTljYyJ9LCIyMDAiOnsidmFsdWUiOiIjMDBiYmNjIn0sIjMwMCI6eyJ2YWx1ZSI6IiMyMmNjYmIifSwiNDAwIjp7InZhbHVlIjoiIzQ0ZGQ4OCJ9LCI1MDAiOnsidmFsdWUiOiIjOTlkZDU1In0sIjYwMCI6eyJ2YWx1ZSI6IiNlZWRkMDAifSwiNzAwIjp7InZhbHVlIjoiI2VlOTk0NCJ9LCI4MDAiOnsidmFsdWUiOiIjY2M2NjY2In0sIjkwMCI6eyJ2YWx1ZSI6IiNhYTMzNTUifSwiOTUwIjp7InZhbHVlIjoiIzg4MTE3NyJ9fX19fQ%253D%253D https://www.inclusivecolors.com/?style_dictionary=eyJjb2xvci... 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. > An LCH rainbow colour palette can be created by choosing fixed chroma and luminance values and varying the hue > Yellow is given the highest luminance, as it only looks yellow when bright. I find it interesting how hue and luminance are sometimes conflated when talking about colors. "Blue" usually means "blue hue, low to high luminance", and similar for a lot of other colors like green. But "yellow" usually means "yellow hue, high luminance", similar for orange.
- jesii 1y agoThanks! Love this color palette. I never liked the jarring difference in luminance between colors in the standard palettes.