10 ms·
“Tomato” versus “#FF6347” – the tragicomic history of CSS color names
- nlh 11y agoFunny - I had a conversation with a friend about this exact topic the other day. Painting a few (old) walls in my apartment. I asked the original designer what color they were, and she confidently replied "Swiss Coffee". Great! So I got to Lowes only to find out....there are about 35 different variations on Swiss Coffee. We seem to have solved the color issue when it comes to programming - hex codes are (relatively) easy. Why are we still choosing our home paints based on horribly arbitrary names like "Shadow Mist" and "Lily Pond" ... ? (And yes, I know the actual answer - branding! Why would you buy Brand A over Brand B if all the colors get commoditized into hex codes....the answer is...you wouldn't. So? Fancy names for everyone!)
- zyxley 11y agoPantone uses coded colors (e.g. things like "#106U Bright Yellow"), with each having RGB and CMYK values, physical ink-mixing proportions for custom printing, paint standards, etc. From what I understand it's pretty popular with corporate marketing because it takes the hassle out of getting extremely consistent colors across different physical and digital media.
- 542458 11y agoIt has been more or less solved - it's called the Pantone Color system. That said, it doesn't really work the way you'd expect. It'll get you close (say, if you need a consistent color for your brand), but a pantone color on it's own isn't enough to define a material. The issue with defining physical colour codes is that it gets really complicated when you consider finish. With screen color, you have only one finish, and that's whatever the user's monitor happens to have. With paints and plastics the finish (how glossy the surface is, how metallic it is, coated or uncoated, inclusions like metal flake, etc) really messes things up. This tends to "break" systems like Pantone, and means that it's really hard to choose a few variables to absolutely define a color.
- smackfu 11y agoEven Pantone at the basic level has coated and uncoated.
- illicium 11y ago> With screen color, you have only one finish, and that's whatever the user's monitor happens to have Screens have a huge number of "finishes" because calibration varies wildly between devices. It's gotten better over the years but still few users have screens that accurately reproduce 100% of sRGB.
- itp 11y agoThat's true, but I think the point is that a single screen only has one "finish" (at any given point in time?).
- 542458 11y agoYou're right. I should have said "With screen color, you have only one choice of finish, and that's whatever the user's monitor happens to have".
- jacobolus 11y ago> few users have screens that accurately reproduce 100% of sRGB. All currently selling Apple computers (at least phones, tablets, laptops, and desktops, I’m not sure about the watches) are extremely close to sRGB. So that’s a considerable proportion of computer/mobile device users. Other vendors’ devices have a much spottier record, but matching sRGB is by no means an impossible goal. More generally, screens can be precisely characterized (either at the factory or by end users) and color management software can pipe pixel colors through a lookup table on their way to the display, so that at least in-gamut colors appear correctly. Sadly Windows and Linux didn’t support proper color management at an OS level for many years, so lots of software on those platforms still doesn’t do it correctly. And web browsers on all platforms punt on correctly doing color management for CSS colors, with the excuse of matching non-color-managed Flash. Even more unfortunately, neither iOS nor Android has any color management whatsoever. iOS gets around this by making sure all the displays have nearly identical color (at least on recent machines), but on Android getting accurate color is a crapshoot. Then there are televisions, for most of which color is a complete joke.
- ssharp 11y agoI've never shopped paint brands based on color. I always just assume the brand will have the color I want in their collection of swatches. I have bought different brands based on perceived/researched quality. I've found personal/anecdotal differences in how well paint coats, how runny it is, how well it holds up, using different brands.
- zyxley 11y ago> I always just assume the brand will have the color I want in their collection of swatches. The problem comes when you need to do a patch job on the drywall for whatever reason (lost cat in the walls, wiring problem, whatever), and when it comes time to repaint not being able to match the exact color gets you a square that's a slightly different color than the rest of the wall.
- masklinn 11y ago> (And yes, I know the actual answer - branding! Why would you buy Brand A over Brand B if all the colors get commoditized into hex codes....the answer is...you wouldn't. So? Fancy names for everyone!) There's no denying physical paint brings additional complexities. The paint's exact recipe will change the interactions with the surface, the thickness of the layers and how the paint ages, all of which (and the painted surface itself) influence the final color and how it evolves. And then each color can come in a variety of finishes.
- lotyrin 11y agoI don't think it's a conspiracy to create paint brand loyalty, it's just too hard to codify real life color except as mix ratios of the formulations for pigments and paint that differ from brand to brand. You could define a standard measuring device and a standard light source and white and black balance but then you'll have two paints that measure #F00 but aren't guaranteed to at all look the same color to the human eye in varying natural light conditions. If you got really sophisticated and defined color as a graph of wavelength to albedo then you'd probably just end up where we already are of "Cherry (brand A)" and "Cherry (brand B)" because it's post-facto and not prescriptive (and still wouldn't account for specular vs diffuse reflection).
- wlesieutre 11y agoYou couldn't even name a paint by a short number (like a hex code) if you wanted to. That only works because we get to think of colors in terms of three channels, a mix of red/green/blue. Cherry (brand a) and Cherry (brand b) paint could look identical under daylight but totally different under incandescent. To define an actual reflective color of an object, you need a spectral reflectance distribution. This measures what percent of light is reflected at any given wavelength. http://hyperphysics.phy-astr.gsu.edu/hbase/vision/imgvis/spdcur.gif http://hyperphysics.phy-astr.gsu.edu/hbase/vision/imgvis/spd... Then the actual color you see depends on the spectral power distribution of the light source. For every wavelength, you multiply the amount of light of that wavelength by the percent of light reflected at that wavelength, and you end up with a new spectral power distribution for light coming off the object. That goes into your eye, hits the retina, activates three types of cones in some proportion, and your brain turns it into a perceived color. Incidentally, the image linked above includes a tomato. “#FF6347” doesn't cut it. More info (and image source) here: http://hyperphysics.phy-astr.gsu.edu/hbase/vision/spd.html http://hyperphysics.phy-astr.gsu.edu/hbase/vision/spd.html Pantone works because it's a lookup table that maps short names to a set of predefined reflectance distributions. In the real world, that's as close to hex colors as we can get.
- wlesieutre 11y agoFor a bit more detail in that step at the retina, here are the relative responses of the different cones to various wavelengths (normalized to max = 1): https://en.wikipedia.org/wiki/Trichromacy#/media/File:Cones_SMJ2_E.svg https://en.wikipedia.org/wiki/Trichromacy#/media/File:Cones_... Once you account for how much light comes off the object at each wavelength, these curves determine how strongly they impact your color perception. S/M/L stand for short, medium, and long, and are the names we give to the different cone types based on the relative length of waves that stimulate them. As you can see, we don't have a very balanced view of the "visible spectrum." Butter, for example, is about 1.5x as reflective at 400nm as 450nm. But your eyes are something like 20x as sensitive to the light at 450nm (near peak sensitivity of short wavelength cones), so that light has a bigger impact on activating the short cones. 450nm is also picked up by medium and long cones, while 400 is pretty much below their range.
- yoodenvranx 11y agoThe big problem is that the color on the wall changes over the years. If you have to fix a scratch in a colored wall after 3 years you might as well just paint it new.
- RobertKerans 11y agoOur team at work had a very long-running argument last year with the general manager in charge of our main income-generating operation who wanted to base the search on the our main product site on product codes. Those product codes are fairly logical in the way they are structured, and are clearly very specific, and he just did not get why people looking for items might not find them far more useful than, say, names of things
- smcl 11y agoHa, I posted this here the other day and it died on its arse. Random
- dang 11y agoWe emailed you a repost invite but you never responded. Did it go into a spam bin? (Edit: We also emailed you one for https://news.ycombinator.com/item?id=10345055 https://news.ycombinator.com/item?id=10345055). I'll take this as a data point that the repost invite experiment is working, i.e. is helping to reduce the randomness of what gets noticed here.
- scrollaway 11y agoRepost invites? What have I missed?
- jffry 11y agoTo quote dang: Please email hn@ycombinator.com if you would like us to send you a repost invite. This is an experiment we've been working on that gives good stories a second chance at attention on HN. via https://hn.algolia.com/?query=%22repost%20invite%22&type=comment&sort=byDate&prefix&page=0&dateRange=all https://hn.algolia.com/?query=%22repost%20invite%22&type=com...
- dang 11y agoWe've been running a series of experiments to find a solution to good stories failing to achieve liftoff from /newest. The latest experiment involves emailing submitters when we notice a good story that got overlooked and inviting them to repost it. (On HN, a small number of reposts is ok when a story hasn't had significant attention yet; see the FAQ.) Such reposts get an initial upvote from us. They also go into a pool from which the software periodically selects a story to place randomly near the bottom of the front page. Not all such stories get this treatment—it depends on factors like how old they are, how stale the front page is, and some randomness. Placing a story near the bottom of the front page ensures that it gets a bit more attention from the community—surprisingly less than expected, but still a lot more than languishing on the 5th newest page. If there's interest, the story rises; if not, it falls off after a few minutes. We use a combination of software filters and human review to find good-but-overlooked stories. "Good" here means by HN's definition of "gratifying intellectual curiosity". The currently open questions are: (1) what to do when the submitter has no email address or doesn't check their email; (2) whether to add a profile setting people can turn on to have this happen automatically, and how exactly that would work; and most importantly (3) how to distribute the human review aspect to the community in a way that doesn't just reduce to the upvoting mechanism, which obviously does not suffice to surface the best stories. Here are some links to look at if you want more about this: https://hn.algolia.com/?sort=byPopularity&prefix&page=0&dateRange=all&type=comment&query=by:dang%20repost%20invite https://hn.algolia.com/?sort=byPopularity&prefix&page=0&date... (<-- mostly comments I posted because the submitter had no email address in their profile) https://news.ycombinator.com/item?id=9828818 https://news.ycombinator.com/item?id=9828818 https://news.ycombinator.com/item?id=9866140 https://news.ycombinator.com/item?id=9866140 https://news.ycombinator.com/item?id=8790134 https://news.ycombinator.com/item?id=8790134
- jacobolus 11y agoThe CSS color names are incredibly stupid. The colors they call “red”, “green”, “blue”, etc. are nowhere near the colors humans would consider closest to matching those labels, and combinations of basic CSS colors result in unusably ugly design. More generally, color collections without any order or structure are terrible – that goes for Pantone, Crayola crayon colors, paint names at the hardware store, etc. These are great for vendor lock in, but useless for human understanding. Instead colors should be specified in e.g. Munsell coordinates https://en.wikipedia.org/wiki/Munsell_color_system https://en.wikipedia.org/wiki/Munsell_color_system where the numbers are meaningful and intuitive. And in the context of computers, the specification of color as RGB coordinates is fine for CPU-to-display communication, but ordinary people should never be forced to interact with it, as the dimensions of gamma-corrected RGB have very little relation to the structure of human color perception. Trivial shims over RGB such as HSL or HSV are not an acceptable alternative.
- Lawtonfogle 11y ago>The colors they call “red”, “green”, “blue”, etc. are nowhere near the colors humans would consider closest to matching those labels, and combinations of basic CSS colors result in unusably ugly design. Is there even a standard for what people would say represents a given color? Color perception may very well have a cultural component to it. I know the perception of sound does have a cultural component because there are certain distinct sounds that, if not exposed to while really young, are effectively simplified into a single sound by the brain. The common example is the r and l sound among Japanese, but there is far more.
- ColinDabritz 11y agoXKCD had a wonderful color survey: http://blog.xkcd.com/2010/05/03/color-survey-results/ http://blog.xkcd.com/2010/05/03/color-survey-results/ Plenty of good info there, but especially scrolling down to the color chart: http://imgs.xkcd.com/blag/satfaces_map_1024.png http://imgs.xkcd.com/blag/satfaces_map_1024.png
- calebegg 11y agoHere's a pretty good attempt, using an online survey as the basis: http://xkcd.com/color/rgb/ http://xkcd.com/color/rgb/ See also: http://blog.xkcd.com/2010/05/03/color-survey-results/ http://blog.xkcd.com/2010/05/03/color-survey-results/
- Lawtonfogle 11y ago>Perhaps the most vehement denunciation comes from a 2002 e-mail written by programmer Steven Pemberton: “The X11 colour names are an abomination that should have been stifled at birth, and adding them to CSS is a blemish on the otherwise excellent design of CSS. Now I don't have much experience with CSS. Only have been using it for ~5 years, and never any of the real complex magic. But if I were to make a list of design problems I have with CSS, color names wouldn't even make it on the list.
- coldtea 11y agoYeah, it's not like various programmers don't write "denunciation" emails/posts all the time for every kind of thing. Not sure why this particular denunciation gives the issue much weight. Besides this guy is associated with even more failed projects than CSS color names, such as XHTML2, XForms, and RDFa.
- wmil 11y agoThe "otherwise excellent design of CSS"? That's something I've never heard anyone say... The IE5.5 border-box box model issues happened because the CSS box model was so strange they assumed it was a mistake in the spec.
- johnchristopher 11y agoChuckles The other narrative I heard from some MS devs at the time was more like "we are reading the specs right, mozilla got it wrong". I might still have the IRC logs to back this up.
- nly 11y agoDid MS even talk to the authors of the spec or Mozilla about it before shipping?
- johnchristopher 11y agoI don't remember when MS entered the W3C but that comment was around IE6 times.
- wmil 11y agoOh and before anyone comments on it, I should point out that "Peru" is a reference to a pottery color. Some people assume it's racist.
- monkeyprojects 11y agoAn utter aside but One colour does have a tragic history:- #RebeccaPurple or #663399 http://www.economist.com/blogs/babbage/2014/06/digital-remembrance http://www.economist.com/blogs/babbage/2014/06/digital-remem...
- davebees 11y agoas mentioned in the article.
- Splines 11y agoPersonally, the nice thing about a color name (maybe not these color names) is that it tells you what it's supposed to look like. So if you want a tomato color, you can use "tomato", and not worry that your monitor is or isn't calibrated correctly. If you're at all color blind, trying to design using color codes is probably an exercise in frustration. Maybe what you need is a separate tool that tells you what that specific color code most looks like, sort of like xkcd's color survey: http://blog.xkcd.com/2010/05/03/color-survey-results/ http://blog.xkcd.com/2010/05/03/color-survey-results/
- LeoPanthera 11y agoThere's already a convenient list of colors built from this data: http://xkcd.com/color/rgb.txt http://xkcd.com/color/rgb.txt (Visible graphically here: http://xkcd.com/color/rgb/ http://xkcd.com/color/rgb/ ) Says the author: "I have no opinion about whether it should be used to build a new X11 rgb.txt except that seems like the transition would be a huge headache."
- 0x4a42 11y agoShould be entitled "The tragic history of CSS episode n" where n is any number between 0 and infinity. CSS is a complete utter crap that failed to solve the problems for which it exists. Today CSS is a broken tool that still can't easily be used to design even the most basic layout without requiring a ton of hacks. Among a fews: - A broken box model that the W3C picked over the one from MS. For finally adding the MS's model years later leaving us with 2 boxe models and a broken compatibility. - Centering things? You have to use hacks even for this simple purpose. - Building grids? Let's have fun and pick the one you prefer : html tables, display table, floats, flexbox, css grids... - About Tables: 15 years ago everybody switche to tabless layouts for the purpose of separating markup from presentation. A few years later we got access to the table display mode in CSS because, well, not a single one from the other solution worked well to build layout. Qo we got offered the option to emulate html tables in CSS. - They added CSS animations. What animations have to do with styling and layout? Oh it's to compensate the bad performances we got when animating things with JS. Etc, etc, etc. CSS is just a complete mess.
- mfoy_ 11y agoI use CSS quite a bit and I still barely grok the myriad interactions between display, position, and float and nested variations thereupon. That's why I love Bootstrap.
- deleted 11y ago[deleted]
- ghrifter 11y agoI still can't believe you have to hack a margin: 0 auto; to center stuff still... Unless there's a new html element or css trick I'm unaware of? (like the `<center>` of old)?
- RadioactiveMan 11y agoA fun quirk of colour names in HTML: http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color http://stackoverflow.com/questions/8318911/why-does-html-thi... I don't think it applies to CSS, just 'bgcolor' and the like.
- shogun21 11y agoHow many people use the names as opposed to hex values? I'd rather just use the hex value and ensure it's rendered even if the browser hasn't implemented the latest version of the spec.
- wavefunction 11y agoI use the hex-values/rgba because what does 'papaya whip' even mean? Plus not everyone on the internet are literate in English so RGBA or hex-RGB is far more internationalized.
- thaumasiotes 11y ago> “I'm not a native English speaker. Imagine my reaction the first time I saw the ‘gainsboro’ color or ‘papaya whip,’” Daniel Glazman, co-chairman of the CSS Working Group, told Ars. Speaking as a native English speaker, I don't see how this could possibly be worse for non-native speakers. They have no idea, and neither do we.
- caf 11y agoIf you were writing an application where you wanted to allow your user to choose colours - say for tagging items or customising an interface - it might make sense to present them with a list of named colours rather than make them choose from a colour wheel (or, heaven forfend, directly enter a 24 bit RGB number). It would likely be best to define your own list of named colours, for localisation reasons if nothing else, but for the initial version of a feature I could see using the CSS colour names directly.
- DonHopkins 11y agoWe can all be thankful that at least CSS didn't adopt X11's approach to naming fonts. [1] [2] [1] http://www.sslug.dk/artikler/gnulinux/Bilder/xfontsel-twm.gif http://www.sslug.dk/artikler/gnulinux/Bilder/xfontsel-twm.gi... [2] http://www.klauser.com/lxug/ch13.pdf http://www.klauser.com/lxug/ch13.pdf
- ghrifter 11y ago> .. “dark gray” was lighter than “gray” ... And still is! <div style="height:400px; background-color:gray;"></div> vs <div style="height:400px; background-color:darkgray;"></div>
- kragen 11y agoIt's interesting that the article kind of skipped straight from X11 colors to CSS. Presumably what happened was that JWZ, who was hacking together the Motif frontend for Mozilla (shortly before they renamed it to Netscape), added <font color="foo"> and <body background="bar"> to it, and just handed that string directly to XLookupColor, so that <font color="red"> would work? And then whoever was hacking together the Microsoft Windows and MacOS frontends had to copy rgb.txt and "#c0ffee" parsing into the Mozilla code in order to get cross-platform combatibility? I don't know, I wasn't there, but to me that's the actually interesting juncture. Up to that point, WWW colors could have been specified in any way whatsoever. After that, browsers had to be compatible with Mozilla (then Netscape, and then later IE) or people wouldn't use them.