back
▲ 111 points

Show HN: Ember – Redshift safe color palettes

github.com
by carpdiem·7d ago·23 comments·view on hn ↗
Most color palettes collapse if you've got a strong redshift/nightshift color filter actively suppressing green and blue channels. I made one that doesn't.

Ember has terminal, chart, heatmap, and UI palettes designed and tested to be as distinguishable as possible under both the redshift & non-redshift condition... so no more duplicate color appearances (or worse yet, disappearing colors!).

23 comments
Pretty neat! I currently have night shift active on my phone (it’s 11 PM here), so I have to take into account that the preview of what it looks like with redshift on is filtered twice for me, but I can see from the preview images that have not had filtering applied ahead of time that it does look good and distinguishable :)

The README having a lot of preview images is great.

If you could I would also much appreciate if there were a couple of example web pages linked that uses your CSS. For example if you make a GitHub pages branch in your repo and use it to host a couple of different kind of HTML pages (like an example blog post page with either lorem ipsum text or for example repeating parts of the text that you have in the README itself, and also an example dashboard page for example). So that one can look at that too in addition to the images in the README.

Example web pages is a great idea. It's a very new project (just did it over a couple of evenings during a trip last week), so there's nothing formal out there yet, but I'll add in some contrived examples later today.
How's this for an example webpage?

https://www.usuallypragmatic.com/ember/

It has live examples in coding / data visualization / image display / animation / etc, with the ability to toggle the color palettes as well as toggle redshift on/off.

This is pretty cool. Seems like a somewhat similar concept to certain types of color blindness?

On so many occasions I have been photo editing in the evening and not realized I am wildly overcompensating my balance adjustments because I forgot to turn off redshift.

I wish more apps adopt such actually functional themes rather than yet another iteration of Windows Vista-like glassmorphism

There is also https://warmburnout.com/

Thanks. Just set my shell and all IDEs to this. Perfect!
I love this, and the example images are really beautiful. It feels sci-fi, but is actually practical too. Nice job and thank you for sharing.
Really glad you liked it! I use an absurd amount of redshift personally, and have spent too much time thinking about / working on light-and-color related projects, so it came out of a place of need and love alike.
I wanted to say "under filter" ones look way better, but then realized I have redshift enabled, so I was looking at double filtered ones!
This looks nice, I will try it out.

The README could use more of a human touch, though… it’s pretty hard to read.

Can I ask which parts? I wrote the intro section by hand, and left the rest of it Fable-generated with significant "guidance" and rounds of re-writing.

I think the current weakest part is the explanation of the science behind it, but I'm curious if there was anything specific that jumped out at you.

"These are the exact commanded sRGB values shipped in every export." Tell me what that sentence means and why each of those words is there. Challenge: In the context of the first sentence of a section, with no preceding target for "these." If you manage to assign a meaning: Why do I care, at that point in the readme, about the information in that meaning?

"A warm filter is not a tinted overlay." That's lovely (I suppose), but only an AI would start a section by telling me what something is not, rather than what it is. It's also not really a calamari salad, but it didn't see fit to mention that. This time.

Strongest AI indicator: Words that may carry meaning, if you don't think so hard, but don't work towards any meaningful narrative (because there is none) -- they carry the LLMs need to generate text, not the reader's need to gain progressive understanding. All of this writing without a mind model of the reader shares the same flaws.

generally it helps to make the readme more of a map of content where you have the big picture for each section and then let people dive via links where they want to know more.
Added in a Table of Contents at the top to improve it for now. May do more substantial re-writes later.
How did you end up so invested and becoming so good with colors? I ask because typically programmers aren't good designers. Did you learn color theory professionally or is this a hobby?
That's a... surprisingly deep question. I'm actually a physicist by background first, so I got my start doing waaayyy too many calculations with blackbody and emissions spectra.

Then, back in 2010, when I was just getting into startups, I spent two weeks straight at Powell's in Portland reading through their graphic design section.

After that, I never got very far away from light or perception... AR/VR -> graphics -> silicon photonics -> physical AI (now).

I'm still very much learning, but if you like this stuff and want to learn more yourself there's a couple sources I can recommend:

- Interaction of Color, by Josef Albers. Amazing book, but you really want to get a physical copy.

- I really like this talk from SciPy 2015 to get a sense of how people work with and talk about color maps in practice: https://www.youtube.com/watch?v=xAoljeRJ3lU

- This is a really, really thorough (and beautifully illustrated) article on what color spaces are: https://www.makingsoftware.com/chapters/color-spaces-models-...

- And last, I wrote a very technical blog post a few years back, if you want to see some math on a bunch of this: https://www.usuallypragmatic.com/projects/Generating-Color-T...

Thanks, fascinating links. But they seem to be more on interactions of light and colors, whereas ember is more related to color palette. I know picking color palette tend to be difficult in general and sometimes more art than science. So I was curious if you had art background.

Another thing I noticed is that most of the colors used there seem to be lower on the saturation side, with the exception of #8FF0FF. I'm assuming it's not by accident. Most people don't even think about colors in terms of saturation and value.

Aww thanks for creating a color palette just for me <3
These will also be useful when I’m traveling away from my screen at very high speeds. Thanks!
This is what I originally thought this project was intended for, the name is confusing. I suspect it might not work as well with actual physical redshift, as that multiplies the frequencies by some factor (which would change the frequencies and spacing between the RGB channels), instead of merely selectively dimming the green and blue channels of a display, as the nightshift/redshift features do.
Fair point on the naming collision. I know these sorts of color filters end up with different names via different apps on different platforms, so just describing it as 'redshift safe' seemed like the lesser evil.

And it's an great question about relativistic redshift! That actually would end up with more or less the opposite result: you'd want to shift all of your palette colors and meaning into commanded-blue channels.

That's because the relativistic redshift pulls everything to longer wavelengths, so as you approached the speed of light, you'd start literally losing colors as they got red-shifted out of the human visual range.

The first thing you'd lose is the red channels (which would get shifted into the infrared, and thus be invisible). That happens at about 0.2c, depending on the wavelength of the red LEDs in your screen.

Then you lose green once you get to about 0.38c.

Blue doesn't disappear from your visible range until you get up to ~0.52c.

Faster than that, and the only things you'll be able to see with naked eye started off as ultraviolet frequencies (or above)! (aka - you'd need HW changes to your screen, so it's outside the realm of SW to fix)

Looks so nice. What is the easiest way to use this in ghostty+fish?
Good project