[HN Gopher] Color Formats in CSS
___________________________________________________________________
Color Formats in CSS
Author : samwillis
Score : 178 points
Date : 2022-12-30 10:12 UTC (12 hours ago)
(HTM) web link (www.joshwcomeau.com)
(TXT) w3m dump (www.joshwcomeau.com)
| mark-r wrote:
| I don't remember hearing the story behind "rebeccapurple", that
| was a touching link to include.
| muxxa wrote:
| 3 digit hex values are also handy for prototyping, e.g. #c40 for
| an orange, or #ccc for a light gray
| [deleted]
| gherkinnn wrote:
| I truly admire the consistent care Josh puts in to his work.
|
| 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.
| lghh wrote:
| Whatever the opposite of web dev blog spam is, Josh is the
| poster child for it. He could easily not add the interactive
| elements and his content would still be well written and
| informative, but instead he goes all in on everything he does.
| I really hope he is making a full time career of of this,
| because if anyone deserves to it's him. I am grateful for how
| much I've learned from his blog and course.
| entropie wrote:
| It changes my scroll behaviour and I hate that. I instantly
| close sites that do that.
|
| Edit: I use brave and removed every smoothing from my
| scrolling.
| weego wrote:
| [flagged]
| samwillis wrote:
| That's a horribly dismissive comment. If you don't find
| something interesting or of value to you on HN just don't
| comment.
|
| Suggesting that css, colour models and colour spaces is a
| shallow topic shows a compleat misunderstanding of the topic.
| Aardwolf wrote:
| > If so, it likely means that your monitor or browser doesn't
| support wide-gamut color formats. You might have better luck
| checking on your mobile device!
|
| 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?
| alwillis wrote:
| > 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 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...
|
| [2]: https://caniuse.com/css-color-function
| moozeek wrote:
| Works for me on a 2018 Moto w stock Android 10. My color
| options are (translated) natural, boosted and saturated, w
| saturated active. Seems to be the factory default.
| chiefalchemist wrote:
| > Unlike with Sass variables/functions, which compile away into
| hardcoded values, CSS variables are dynamic. We can tweak any of
| these values using JavaScript, and all the other ones will
| automatically update.
|
| 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.
| alwillis wrote:
| I explained why "we" (web developers) should want CSS custom
| properties (also known as CSS variables) versus Sass-style
| variables a couple of weeks ago when the CSS Working Group
| asked for feedback on nesting syntax.
|
| I included a couple of links to high signal-to-noise ratio
| articles on the advantages and use cases of CSS variables [1].
|
| [1]: https://news.ycombinator.com/item?id=34019907
| albert_e wrote:
| Offtopic:
|
| 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.
| [deleted]
| worldmerge wrote:
| You always have such nice posts Josh!
| LordDragonfang wrote:
| Slightly off topic, but whenever I see talk about perceptually-
| uniform color, I'm reminded of this classic post about graphing
| library colormaps:
|
| 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)
| espo wrote:
| [flagged]
| LordDragonfang wrote:
| Was this comment written by ChatGPT? Because it has the same
| level of casual tautology (The first sentence especially; "the
| reason it's lighter is because defined that way") and
| confidently incorrect information.
|
| The whole gray/dark gray thing has practically nothing to do
| with sRGB, it's an artifact of one being an X11 color and one
| not.
| karlshea wrote:
| I assumed the same when I read it, it reads like an SEO spam
| blog post.
| velcrovan wrote:
| HSL came in clutch when I designed my website
| (https://joeldueck.com) to change colors based on the outside
| temperature. (See the slider at the bottom)
|
| A script maps the temperature in degf to a value between 0 and
| 360, and this value is used for the Hue paramater in CSS hsl()
| colors.
| berkut wrote:
| Picky, but:
|
| > 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"
| onion2k wrote:
| That's not quite true. The NES could reregister colors in the
| middle of a scanline to get additional colors up to 410
| onscreen at once. https://ahefner.livejournal.com/11670.html
|
| I doubt any games used this though.
| dspillett wrote:
| Ah, memories of playing with similar tricks to do split-
| screen modes on BBC computers. Did it myself for a display
| when I wanted the full 8 colours1 for an image (I was drawing
| fractal things) but decent resolution text for the display of
| parameters at the bottom.
|
| 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 colour1)]. 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 mixes2 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.
| ergonaught wrote:
| The "named colors" example of darkgray being "lighter" than gray
| disrupted my reading, because darkgray is obviously and
| significantly darker than gray on my system.
| enlyth wrote:
| Do you by any chance use a browser extension like DarkReader?
| This is what I noticed as well but after disabling it the
| behaviour reversed
| [deleted]
| methyl wrote:
| Odd, what display do you use?
| Eric_WVGG wrote:
| Why is it that Safari gets dragged for not supporting an endless
| rabbit hole of "web app" standards, and nobody cares that Chrome
| and Firefox haven't found the time to get P3 color working in
| five or six years?
| ovao wrote:
| An overly-simplistic explanation may be that most engineers
| don't care about "how red a red is", whereas most _designers_
| are super interested in their reds being very red.
|
| Both camps can be very vocal, but most of us probably hover
| around other engineers and sparingly around designers.
| wildrhythms wrote:
| Another fun resource for browsing the built-in colors:
| https://enes.in/sorted-colors/
|
| And discussion from when it was posted on HN:
| https://news.ycombinator.com/item?id=26503572
| misterS wrote:
| That's a really nifty visualisation of the 140 named web colors.
| therealcamino wrote:
| I thought so too. Clicking around, I had a hunch when I saw
| "lightseagreen" that these were the old X11 colors, and went
| looking for "lemonchiffon" to confirm it. (From the text though
| it sounds like there are other sources as well.)
| 11235813213455 wrote:
| I don't like when color pickers have a square area, it looks
| confusing. If you have a triangle it's probably clearer, for
| example with hwb one corner is for white, another for black,
| another for the pure color. It works for other 3D color models
| like hsl https://caub.github.io/color-wheel/build/
___________________________________________________________________
(page generated 2022-12-30 23:01 UTC)