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.
Whats 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.
Short answer - RGB is really convenient for lighting up sub pixels on your LCD screen, but it's utterly terrible at conveying information about relation between colors. HSL is a clever hack to quickly answer which color is slightly dimmer or brighter than this color, but again, it's quite terrible at conveying information about difference between colors.
I encourage you to think about two random colors and imagining a gradient between them and then drawing said gradient in RGB and HSL color spaces. In both cases it will be wildly different from what you'd expect or could create with two blobs of oil paint on canvas.
Long answer - unfortunatelly it's quite hard to convey why we need a better color space in twitter-space but this video (while 40m long it's quite condensed) is an excellent explainer: https://www.youtube.com/watch?v=gnUYoQ1pwes
OKLCH is really easy to work with. Once you have your palette it's easy to get correct shades and hues by tweaking some values. This works great with CSS custom properties.
oklch and oklab are much easier to reason about than alternatives. For oklch, The first parameter is the lightness, the second is the chroma (essentially its saturation), and the 3rd is the hue. I find it very easy to tweak colors by making them brighter or more saturated. Unlike lch, such changes in oklch have regular effects on how the color will be percieved.
This 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.
For purposes like graphic design or color grading it's usually more useful to first focus on lightness contrast, then pick hue and chroma afterward. Having uniform steps of ΔE is not really important, and using that as a primary criterion will usually make for worse choices. Color is multidimensional and trying to simplify it to a single distance function is substantially misleading for this context.
The main purpose of ΔE is specifying error tolerances for specified colors / measuring small differences between nearby colors, so that e.g. if you hire someone to paint a car or print a magazine you can check that their output matches expectation sufficiently. For colors that are significantly different ΔE isn't that helpful a practical tool.
> Our eyes are much more sensitive to Blue/Violet, and less sensitive to green.
Hm? It's the exact opposite. That's why the full-intensity RGB green looks much brighter than the full-intensity blue. To convert RGB to pure luminance (gray), you do something like 0.3 * R + 0.6 * G + 0.1 * B, meaning green contributes six times as much as blue.
There are three main models to numerically model a color space.
There is an additive color mixing model, which is basically your standard RGB model, where you basically control how bright each of the red, green, and blue lamps shining at a point. There is a complementary subtractive color mixing model, which is controlling the amount of pigments you drop onto a substrate (CMYK is what you'll see used in computers these days). Then there's a third model, where you measure it according to brightness, colorfulness, and then the actual hue it is--there's a lot more variants in this model, basically any colorspace you don't recognize is this kind of model.
If you visualize colors existing in an RGB cube, you have 8 colors at the vertices: black and white are at opposite ends of a diagonal, and the other 6 are two sets of nonadjacent vertices: red, green, and blue in one set, and cyan, magenta, and yellow in the other set. Given such a cube, you should be able to easily see that RGB is using one of those sets as its basis set, whereas CMYK is using the other set as its basis set. The third set of models is built by tilting the cube such that the black-white diagonal is now the vertical line (one of the components), and then distance from this line becomes another component, and then the angle around the line is the final component--it's a cylindrical coordinate space in 3D space, not a Cartesian space.
Some models, like CIELAB or Oklab, use the third model but retain a Cartesian coordinate system, the last two values being called something generic like 'a' and 'b'. Oklch is the same as Oklab, but expressed as cylindrical coordinates, because chroma (colorfulness aka distance from the pure light line) and hue (aka the dominant color of the light) is more convenient for people to work with than a Cartesian system.
OKLCH really shines if you have to interpolate color between two colors (e.g. in space resulting in a gradient or in time as part of an animation) or you just want to change a color without makingnit darker or brighter.
If you interpolate between RGB colors you will get very weird grayish shades inbetween and the new color may be preceptually darker or brighter, which may be a problem (e.g. if it is text on a background). With OKLCH you define one color and as you rotate around the color wheel it stays the same preceptual brightness, which is incredibly cool.
This means before a designer would have to touch 3 values (RGB or HSV) to match the colors preceptually using their eyeballs, now there is only one value and it matched nearly perfectly as it is.
L is for lightness (0-100%), C is for chroma (0-0.5), H is for hue (0-360deg).
Lightness dictates how white or black a color is, chroma dictates how saturated it is, and hue is which angle on the color wheel it occupies. Varying these one at a time lets you intuitively pick colors that are close to one another in the space of human perception. And CIE Lab colors are especially nice because they cover more than the sRGB gamut that we're all used to defining with HSL or RGB, so you can really make the most of your fancy wide color gamut monitor.
Unfortunately in the CSS implementation of oklab Chroma takes priority over Lightness, so if you have high Chroma and Lightness at 100% that results in a color outside the RGB gamut, it will not give you white, but the lightest color with that Chroma. To me this is quite counterintuitive.
> L is for lightness (0-100%), C is for chroma (0-0.5), H is for hue (0-360deg).
My programmer brain immediately jumped away in disgust.
I'm sure there's many good reasons for choosing those, but it seems to me it could have easily have been done with 3 percentages (0-100% for the 3 numbers). Way easier to work with programmatically.
I'd argue you can reason about it better, because the space is telling you how the colors actually work perceptually. Trying this tool (https://oklch.com/) it feels like you can get to the color you want quicker. The invalid ranges are a bit of a problem for manually editing these values, though.
The deal with Oklch is that hsl/hsb don’t do a good lightness mapping regarding color perception, but Oklch does. So, if you transform your RGB to lch and move the “l” value, you can easily get a nicer color palette. Also, you can tell the lightness of two colors by looking at the “l” value; that’s not true for hsl/hsb. That’s useful if you want lightness contrast or different hues with a similar lightness.
Other than that, I agree that “chroma” is hard to reason about. But, at least it is easier to reason than the “a”/“b” parameters in “lab”.
This 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]
I 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.
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.
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.
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
I 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:
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):
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.
> 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
A HTML color hex code does not use all available bits in a byte but has a strict format. It's of the form #abc, where # is fixed and abc are hex digits (0-9 A-F), one for R, G, and B. Thus, each channel has 4 bits of precision.
PS: ASCII is a 7-bit encoding. "8 bits minimum" sounds like you are thinking in UTF-8.
The author doesn’t understand/communicate-well what a n-bit color palette means, which then confused the rest of us. It refers to the complete size of the palette, in 2^n of course.
She created a 12-entry indexed palette, from the 12-bit (4096) possibilities of short css-hex codes, one nibble per char. (Also single css-hex codes double, so results are brighter than expectations.)
Tldr: This is a 12-entry indexed palette, not a 12-bit one. Neither of which we are constrained to.
Ah 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.
If 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.
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.
I 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.
I 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.
Is 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.
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.
There'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.
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.
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
Looks 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.
I 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.
Seems to have been for CSS and SVG bandwidth golf. The article mentions it being for this site: 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.
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.
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.Whats 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.
Short answer - RGB is really convenient for lighting up sub pixels on your LCD screen, but it's utterly terrible at conveying information about relation between colors. HSL is a clever hack to quickly answer which color is slightly dimmer or brighter than this color, but again, it's quite terrible at conveying information about difference between colors.
I encourage you to think about two random colors and imagining a gradient between them and then drawing said gradient in RGB and HSL color spaces. In both cases it will be wildly different from what you'd expect or could create with two blobs of oil paint on canvas.
Long answer - unfortunatelly it's quite hard to convey why we need a better color space in twitter-space but this video (while 40m long it's quite condensed) is an excellent explainer: https://www.youtube.com/watch?v=gnUYoQ1pwes
Previous discussion and an excellent link here: https://news.ycombinator.com/item?id=43073819
OKLCH is really easy to work with. Once you have your palette it's easy to get correct shades and hues by tweaking some values. This works great with CSS custom properties.
oklch and oklab are much easier to reason about than alternatives. For oklch, The first parameter is the lightness, the second is the chroma (essentially its saturation), and the 3rd is the hue. I find it very easy to tweak colors by making them brighter or more saturated. Unlike lch, such changes in oklch have regular effects on how the color will be percieved.
This page has more information: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
This 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.
I 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)
A Rainbow with equal DE between colors would probably look better than this one with equal DL.
For purposes like graphic design or color grading it's usually more useful to first focus on lightness contrast, then pick hue and chroma afterward. Having uniform steps of ΔE is not really important, and using that as a primary criterion will usually make for worse choices. Color is multidimensional and trying to simplify it to a single distance function is substantially misleading for this context.
The main purpose of ΔE is specifying error tolerances for specified colors / measuring small differences between nearby colors, so that e.g. if you hire someone to paint a car or print a magazine you can check that their output matches expectation sufficiently. For colors that are significantly different ΔE isn't that helpful a practical tool.
> Our eyes are much more sensitive to Blue/Violet, and less sensitive to green.
Hm? It's the exact opposite. That's why the full-intensity RGB green looks much brighter than the full-intensity blue. To convert RGB to pure luminance (gray), you do something like 0.3 * R + 0.6 * G + 0.1 * B, meaning green contributes six times as much as blue.
There are three main models to numerically model a color space.
There is an additive color mixing model, which is basically your standard RGB model, where you basically control how bright each of the red, green, and blue lamps shining at a point. There is a complementary subtractive color mixing model, which is controlling the amount of pigments you drop onto a substrate (CMYK is what you'll see used in computers these days). Then there's a third model, where you measure it according to brightness, colorfulness, and then the actual hue it is--there's a lot more variants in this model, basically any colorspace you don't recognize is this kind of model.
If you visualize colors existing in an RGB cube, you have 8 colors at the vertices: black and white are at opposite ends of a diagonal, and the other 6 are two sets of nonadjacent vertices: red, green, and blue in one set, and cyan, magenta, and yellow in the other set. Given such a cube, you should be able to easily see that RGB is using one of those sets as its basis set, whereas CMYK is using the other set as its basis set. The third set of models is built by tilting the cube such that the black-white diagonal is now the vertical line (one of the components), and then distance from this line becomes another component, and then the angle around the line is the final component--it's a cylindrical coordinate space in 3D space, not a Cartesian space.
Some models, like CIELAB or Oklab, use the third model but retain a Cartesian coordinate system, the last two values being called something generic like 'a' and 'b'. Oklch is the same as Oklab, but expressed as cylindrical coordinates, because chroma (colorfulness aka distance from the pure light line) and hue (aka the dominant color of the light) is more convenient for people to work with than a Cartesian system.
OKLCH really shines if you have to interpolate color between two colors (e.g. in space resulting in a gradient or in time as part of an animation) or you just want to change a color without makingnit darker or brighter.
If you interpolate between RGB colors you will get very weird grayish shades inbetween and the new color may be preceptually darker or brighter, which may be a problem (e.g. if it is text on a background). With OKLCH you define one color and as you rotate around the color wheel it stays the same preceptual brightness, which is incredibly cool.
This means before a designer would have to touch 3 values (RGB or HSV) to match the colors preceptually using their eyeballs, now there is only one value and it matched nearly perfectly as it is.
L is for lightness (0-100%), C is for chroma (0-0.5), H is for hue (0-360deg).
Lightness dictates how white or black a color is, chroma dictates how saturated it is, and hue is which angle on the color wheel it occupies. Varying these one at a time lets you intuitively pick colors that are close to one another in the space of human perception. And CIE Lab colors are especially nice because they cover more than the sRGB gamut that we're all used to defining with HSL or RGB, so you can really make the most of your fancy wide color gamut monitor.
Unfortunately in the CSS implementation of oklab Chroma takes priority over Lightness, so if you have high Chroma and Lightness at 100% that results in a color outside the RGB gamut, it will not give you white, but the lightest color with that Chroma. To me this is quite counterintuitive.
with my posh upper-crust wide color gamut eyes *big eyelashes flutter-winking*
> L is for lightness (0-100%), C is for chroma (0-0.5), H is for hue (0-360deg).
My programmer brain immediately jumped away in disgust.
I'm sure there's many good reasons for choosing those, but it seems to me it could have easily have been done with 3 percentages (0-100% for the 3 numbers). Way easier to work with programmatically.
Hue is a cyclic value, so it has to be in degrees
Chroma cap is dependent on Lightness and Hue, so it has to be unsized to preserve "equal delta leads to equal color distinction" concept
In color spaces you just don't have any math that can be done without following its structure
You may check https://oklch.com/ on how the color space looks like
> Hue is a cyclic value, so it has to be in degrees
There's nothing magical about the number 360. You can do cycles in the 0-1 range. You can even make trigonometry with that (no radians). See:
http://pico8wiki.com/index.php?title=Sin
I'd argue you can reason about it better, because the space is telling you how the colors actually work perceptually. Trying this tool (https://oklch.com/) it feels like you can get to the color you want quicker. The invalid ranges are a bit of a problem for manually editing these values, though.
The deal with Oklch is that hsl/hsb don’t do a good lightness mapping regarding color perception, but Oklch does. So, if you transform your RGB to lch and move the “l” value, you can easily get a nicer color palette. Also, you can tell the lightness of two colors by looking at the “l” value; that’s not true for hsl/hsb. That’s useful if you want lightness contrast or different hues with a similar lightness.
Other than that, I agree that “chroma” is hard to reason about. But, at least it is easier to reason than the “a”/“b” parameters in “lab”.
It does, that's why the default way to enter should've been at least okHSL and okHSV https://bottosson.github.io/misc/colorpicker/
But the RGB defaults can't be easily reasoned about either, so this is still an improvement, so it's not worse
The beyond tellerrand conference had a pretty good talk on the different color models in CSS: https://www.youtube.com/watch?v=9UyJe22WH58
The win is working with lightness and contrast. For example, once you have a palette, making it a bit lighter is easy.
The loss is no longer having any intuition about what a color is just by seeing the numbers.
Isn’t that largely just a matter of learning the hue wheel? And maybe chroma to apply saturation?
This 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/ [2] https://www.youtube.com/watch?v=gnUYoQ1pwes [3] https://www.escapemotions.com/products/rebelle/about
I 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.
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.
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.
The viridis package is great for this too! 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
I 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:
From not-color-blindness, there are more than a few pairs which would still be bad choices for lines on 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):
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.
Technically, this is a 3.5849625 bit palette, though if you add black, white, transparent, and a reserved entry, it’d be 4 bit.
Right. A 12 bit palette would be 4096 colors.
In this context, 12bit refers to the combined bit count of RGB (each 4bit)
In 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
Did 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
But hold on 4 characters...
A single ASCII character is minimum 8 bits so 4x8 is 32 bits... assuming the hash is ignored that's still 24 bits.
What have I missed?
A HTML color hex code does not use all available bits in a byte but has a strict format. It's of the form #abc, where # is fixed and abc are hex digits (0-9 A-F), one for R, G, and B. Thus, each channel has 4 bits of precision.
PS: ASCII is a 7-bit encoding. "8 bits minimum" sounds like you are thinking in UTF-8.
Ah thanks, and yes I was.
The author doesn’t understand/communicate-well what a n-bit color palette means, which then confused the rest of us. It refers to the complete size of the palette, in 2^n of course.
She created a 12-entry indexed palette, from the 12-bit (4096) possibilities of short css-hex codes, one nibble per char. (Also single css-hex codes double, so results are brighter than expectations.)
Tldr: This is a 12-entry indexed palette, not a 12-bit one. Neither of which we are constrained to.
Ah 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.
The article is about choosing 12 colors from the 4096-color palette.
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.
If 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.
it would be great if this could be modified to suit both colour blind and non colour blind people
That would be a waste of a data point. Consider joining the colors in a circular shape.
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.
> chosen with consideration for how we perceive luminance, chroma, and hue
Needs more consideration. The colors are not equally different.
I 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.
Yeah, the purples look very close on my screen
It 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.
Yeah and it's essentially lacking a red
I 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.
Why is 12 bits 4 characters? Shouldn't it be 3 hexadecimal digits (as shown on the website), since each digit is 4 bits?
3 hexadecimal digits and one # symbol is 4 characters.
Four characters counting the pound sign.
It takes fewer keypresses to refer to it simply as #, which is worth doing as its name is locale dependent.
Is 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/
You 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.
Yes. But different checkered patterns are also super ugly, which is a real concern when you're trying to attract customers and make a living.
Thanks! Love this color palette. I never liked the jarring difference in luminance between colors in the standard palettes.
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.
There'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.
I think those could be used as states for a component: hover/disabled etc.
But yeah, if used separately they would be nearly indistinguishable.
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.
Or oklch:
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
Oh, thanks for that; OKLAB is something quite new, by one Björn Ottosson.
Must be because most other colour spaces are not very perceptually uniform. I initially thought a variety of HSL but that is definitely not uniform.
Available in several formats at cpt-city http://seaviewsensing.com/pub/cpt-city/kmo/
Also on lospec: https://lospec.com/palette-list/12-bit-rainbow
This link is not working for me.
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
Fun exercise in constraints, but why limit yourself to 12 bit color? Was this a technical requirement?
Looks 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.
I 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.
Seems to have been for CSS and SVG bandwidth golf. The article mentions it being for this site: 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.
Just like Amiga OCS/ECS. 4-bits for each red, green and blue.
Are there gray colors to go along with it? This seems great for charts though
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.
Why would you want to use a linear color space for something meant for eyes?
I assume they meant a perceptually linear color space, which is exactly what you'd want to use for something meant for eyes.
[flagged]