Color Formats in CSS
joshwcomeau.com
joshwcomeau.com
The great content and didactics aside, it is the bomb proof interactive elements that do it for me. More often than not, sliders don’t work on phones and/or break scrolling. Not here.
Edit: I use brave and removed every smoothing from my scrolling.
A script maps the temperature in °f to a value between 0 and 360, and this value is used for the Hue paramater in CSS hsl() colors.
> 140 colors just isn't enough—it's even less than the 8-bit color palette available on the original NES console
Is incorrect, as the NES didn't support 8-bit color... From Wikipedia:
"the console can display up to 25 colors simultaneously out of 54 usable colors"
I doubt any games used this though.
Some games did this to great effect, like Elite which had mode 4 (mid res, mono) on top for the ship view and mode 5 (low res, 4 colour) for the controls [or in the version enhanced for the extra capability of the BBC Master, mode 1 (mid res 4 colour) & mode 2 (low res 8 colour¹)]. There was one driving game that didn't flip modes but did flip pallets to get more than 4 colours on a mode 1 screen display and that even loaded some code into a strip of the display memory that always shows blue sky (just setting all the pallet entries to blue so the data wasn't visible).
I don't think the technique was fast enough on those machines to work more granularly than per row (or per few rows) though, so no expanding the pallet over the space of one scan line.
--
[1] The BBC supported a mode with 16 pallet entries, but only 8 colours as the other 8 were used for flashing pairs, and those 8 were fixed as the standard primary mixes² instead of anything more flexible
[2] You could change what colours mapped to each pallet entry though - I once saw an attempt to get more colours by flipping the pallet between two options each screen refresh, essentially temporal dithering like some LCD panels did to fake 8-bit colour from a 6-bit panel, this actually worked but was too flickery to be really useful though.
Both camps can be very vocal, but most of us probably hover around other engineers and sparingly around designers.
It certainly is overly-simplistic.
The Display P3 color space is about 50% larger than sRGB… there are many thousands of colors that occur naturally that can't be displayed in the sRGB color space, yet our cameras and phones have been capturing these colors for years.
Not being able to display graphics and images at full fidelity is a form of information loss and most engineers shouldn't be okay with that.
Apple's article "Improving Color on the Web (July 1, 2016)" [1] where they describe how a 2015 iMac and a 2016 iPad Pro had the ability to support Display P3 and how it's supported in the operating system and browser.
The demo picture includes someone's orange sneakers standing on grass; many of the green colors of the grass are outside the sRGB color space. Sure, most browsers will display the closest color it can display but the picture isn't as good as it should be.
Lost among the recent fuss about image support (JPEG XL, AVIF, WebP) is being able to use better color spaces natively without having to attach or embed a Display P3 color profile (which regular JPEG requires) which are often stripped out by CMSes and unaware web developers.
Using Display P3 would probably save online merchants millions of dollars in support costs and returns since fabric dyes are often outside of the sRGB color space and can't be displayed accurately for those customers using (at least today) Chrome or Firefox on non-iOS devices.
What's odd is the latest Pixels from Google don't seem to support Display P3 but every device from Apple except the entry level iPads do. The iPhone 7 from 2016 supports Display P3.
Ultimately, I think it depends pretty highly on the definition of “okay” (as far as the web is concerned, we’ve historically always been okay with many levels of compromise), but I don’t think I’m off the mark in suggesting that the in the hierarchy of concerns of the typical web developer (whatever that may be), P3 color simply isn’t ranked very highly. So “doesn’t care” probably isn’t an entirely accurate way of painting it, but like I said…it’s an over-simplified explanation.
Personally, I like to think that I’m pretty aesthetically inclined compared to a lot of my peers, but this is actually the first I’ve even heard of Safari supporting it!
Because there's a contingent of loud HNers who reflexively drag Apple and Safari because they believe:
A. Apple is intentionally limiting Safari to protect its App Store business
B. Apple is some kind of illegal monopoly for only allowing (for now) WebKit as the browser engine on iOS and iPadOS; therefore Apple is evil.
C. Safari is still the buggy and slow to adopt web standards browser from 5 years ago, even though most of them haven't used or tested against it since then. Some of these people claim Safari is the new IE; either they have amnesia or weren't doing web development when IE 6 was the bane of every developer's existence; otherwise they would know better.
D. All the above… and more.
> nobody cares that Chrome and Firefox haven’t found the time to get P3 color working in five or six years?
Unfortunately because Chrome has approximately 70% of the browser market and Firefox's marketshare is in the single digits, if a feature doesn't ship in either browser, it's like the feature itself doesn't exist.
Same thing with the :has() selector… the most anticipated CSS feature probably ever. Safari shipped it in March of 2022 and usual suspects acted like it was no big deal. Chrome didn't ship it until the end of August and Firefox still hasn't shipped.
And even though progressive enhancement is a thing, many of the most vocal posters on HN don't seem to practice it.
They could use the following media query to test for a P3 display, supported by Chrome and Safari:
@media screen and (color-gamut: p3) {…}The irony: Chrome and Firefox do support Display P3 on iOS because they use WebKit as their rendering engine. And yet Chrome doesn't support Display P3 on Android…
http://jakevdp.github.io/blog/2014/10/16/how-bad-is-your-col...
(which also links to https://matplotlib.org/2.0.2/users/colormaps.html)
Does this work on Android for anyone? I tried in chrome on a Pixel 6a, and the two red squares look identical to me.
The only display color setting I found in the android setting was a choice between "natural", "boosted" or "adaptive" but none worked, and I found no settings like "sRGB" or "P3" for screen. Any other setting I may be missing?
Since there's no mainstream browser for Android that supports Display P3, it's unlikely that you're seeing the correct image.
There's a test image as part of this excellent article on color; you'll know right away if your hardware and browser supports Display P3 or not [1].
I'm using Safari on a 2017 iMac, so I can see the Display P3 images.
[1]: https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-...
The Pixel 6a hardware doesn't support DCI-P3 Wide Color Gamut; the last Pixel to support this was the 4 XL [1].
Even if your hardware supported DCI-P3, browser support is required; mobile Chrome doesn't support it yet and it's still behind a flag on desktop Chrome, according to Can I Use.[2]
[1]: https://www.epey.co.uk/phone/e/YToyOntpOjU7YToxOntpOjA7czo2O...
Might someone share a link - with a high signal to noise ratio - to a CodePen or tutorial that demos / gives examples of this? Perhaps some use cases as well?
I'm intrigued, but not experienced enough to know the best place(s) to start.
I included a couple of links to high signal-to-noise ratio articles on the advantages and use cases of CSS variables [1].
And discussion from when it was posted on HN: https://news.ycombinator.com/item?id=26503572
I loved the cartoon character on the website.
He popped up on one side when I was in the middle of the article and said "Hope I did not startle you. May I interest you in my newsletter?". I said "No thanks" and he went away.
And when I reached the end of the article, there he was again -- sitting on a small mound, and waiting patiently for me to finish reading and get there eventually.
Somehow it felt very "natural" that he would wait for me at the end -- knowing I would meet him there again, just in case if he could be of any help.
Loved the little touch. Not sure if the author/designer meant it this way though.
Thank you.