Needs more consideration. The colors are not equally different.
edit: op originally specifically referred to yellow.
Obviously designing for bad screens and/or eyes are both very important considerations, though.
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
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.
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.
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)
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.
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.
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.
This page has more information: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
The loss is no longer having any intuition about what a color is just by seeing the numbers.
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.
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.
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
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:
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”.
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.
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.
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
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.
But the RGB defaults can't be easily reasoned about either, so this is still an improvement, so it's not worse
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 headlined article is a rainbow, not some universally applicable colour scheme.
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.
> 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
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.
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?
PS: ASCII is a 7-bit encoding. "8 bits minimum" sounds like you are thinking in UTF-8.
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.
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
But yeah, if used separately they would be nearly indistinguishable.
EDIT: Found this which seems reasonable: https://sashamaps.net/docs/resources/20-colors/
Another visualization technique which can help in addition to color is different pattern fills.
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.
jjgreen•2mo ago
andelink•2mo ago
HelloUsername•2mo ago