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 2 hours ago [-]
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.
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.
ChadNauseam 2 hours ago [-]
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.
snibsnib 1 hours ago [-]
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.
A Rainbow with equal DE between colors would probably look better than this one with equal DL.
jacobolus 50 minutes ago [-]
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.
diegof79 2 hours ago [-]
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”.
striking 2 hours ago [-]
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.
WhitneyLand 2 hours ago [-]
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.
hedora 16 minutes ago [-]
Technically, this is a 3.5849625 bit palette, though if you add black, white, transparent, and a reserved entry, it’d be 4 bit.
WatchDog 4 minutes ago [-]
Right. A 12 bit palette would be 4096 colors.
whall6 1 hours ago [-]
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.
saretup 37 minutes ago [-]
That would be a waste of a data point. Consider joining the colors in a circular shape.
barrkel 3 hours ago [-]
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
bee_rider 1 hours ago [-]
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:
colechristensen 3 hours ago [-]
From not-color-blindness, there are more than a few pairs which would still be bad choices for lines on a chart.
BugsJustFindMe 3 hours ago [-]
> chosen with consideration for how we perceive luminance, chroma, and hue
Needs more consideration. The colors are not equally different.
p1necone 3 hours ago [-]
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.
01HNNWZ0MV43FF 3 hours ago [-]
Yeah, the purples look very close on my screen
sho_hn 3 hours ago [-]
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.
sockaddr 3 hours ago [-]
Yeah and it's essentially lacking a red
mjmsmith 2 hours ago [-]
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.
NelsonMinar 2 hours ago [-]
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.
jjmarr 2 hours ago [-]
Why is 12 bits 4 characters? Shouldn't it be 3 hexadecimal digits (as shown on the website), since each digit is 4 bits?
saurik 1 hours ago [-]
3 hexadecimal digits and one # symbol is 4 characters.
shadowfacts 2 hours ago [-]
Four characters counting the pound sign.
tom_ 1 hours ago [-]
It takes fewer keypresses to refer to it simply as #, which is worth doing as its name is locale dependent.
1 hours ago [-]
cdev_gl 3 hours ago [-]
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.
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.
mcdeltat 2 hours ago [-]
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.
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
pspeter3 4 hours ago [-]
Are there gray colors to go along with it? This seems great for charts though
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.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.
This page has more information: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
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.
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”.
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.
The loss is no longer having any intuition about what a color is just by seeing the numbers.
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
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 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.
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.
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...