
“Tomato” versus “#FF6347” – the tragicomic history of CSS color names - pmcpinto
http://arstechnica.com/information-technology/2015/10/tomato-versus-ff6347-the-tragicomic-history-of-css-color-names
======
0x4a42
Should 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.

~~~
antod
> CSS is a complete utter crap that failed to solve the problems for which it
> exists.

Huh? Do you not remember/know what it was like to style webpages with FONT
elements before CSS? CSS was a godsend. That was the separating content from
presentation breakthrough.

The problem for which it existed wasn't layout. CSS1 (1996) didn't even have
anything in it for layout.

>\- About Tables: 15 years ago everybody switche to tabless layouts for the
purpose of separating markup from presentation.

Using tables for layout was the original hack. Likewise using floats to avoid
it was also a hack. Neither of those features were designed for those
purposes. You can possibly blame the CSS standard for being incomplete, but
you can't blame it for designers creating elaborate hacks out of it.

> 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.

You make it sound like table display was added after the failure of other
layout methods. Not so - table display was there right from the beginning when
CSS first added layout (CSS2 in 1998). It was IEs failure to implement it for
nearly a decade that meant nobody was aware of or could use it for many years.

~~~
nikatwork
> _Using tables for layout was the original hack._

A simple and practical hack that worked (and continues to work) identically
across all browsers without the need for elaborate edge case code.

I'm curious, with the new libraries, can CSS yet do:

<table width="90%" align="center"><tr valign="middle"><td width="20"
valign="top">menu</td><td width="100">leftcol</td><td
width="*">content</td></tr></table>

~~~
olavk
The display:table css properties are exactly equivalent to the display model
of html tables. They were specified in CSS2 which became a recommendation in
1998, which is 17 years ago (!).

But due to the IE6 dominance and abandonment it took many years before this
part of css was broadly supported by browsers, so developers had to either use
html tables (even when not semantically appropriate) or use hacks like floats
(which was not designed for this) to achieve a table-like layout. So the age
of hack was due to browsers not supporting css, not to to deficiencies in css
as such.

That said, html tables never displayed identically across browsers before css.
There were lots of corner cases e.g. with the interaction of fixed and
flexible columns. Which is not really surprising since the display model for
tables were never specified in the first place before css.

~~~
nikatwork
_> display:table_

The delicious irony is that CSS had to emulate the old table model to overcome
its default layout deficiencies. And IIRC it still can't natively handle
mixing relative and fixed widths, and consistent vertical centering.

 _> html tables never displayed identically_

My bread and butter used to be slicing photoshop comps into websites. My table
layouts were pixel perfect on every browser without hacks. I do agree there
were a few things that had to be accomodated using &nbsp; and spacer gifs -
but it was painless compared to elaborate and fragile CSS hacks.

I shouldn't still care about this stuff - I moved to IOS dev thank goodness -
but I still nuture a burning hatred of CSS years later :)

~~~
olavk
There is no irony. CSS replicate the table layout model in order allow you to
separate markup from presentation but still be able to show tables. Otherwise,
how should the default style sheet for table-elements look? CSS obviously
needed to to have at least the same presentational power as presentational
HTML to be backwards compatible.

------
Lawtonfogle
>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.

~~~
wmil
The "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
_Chuckles_

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
Did MS even talk to the authors of the spec or Mozilla about it before
shipping?

~~~
johnchristopher
I don't remember when MS entered the W3C but that comment was around IE6
times.

------
nlh
Funny - 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!)

~~~
542458
It 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.

~~~
illicium
> 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.

~~~
jacobolus
> _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.

------
Splines
Personally, 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
There'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."

------
jacobolus
The 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.

~~~
semi-extrinsic
How is #FF0000 a poor choice for "red"? It's basically the definition.

Edit: and the color called "blue" in the image on top of the Munsell system
wiki page is not blue, it's some shade of teal.

~~~
quesera
Well, #ff0000 is the definition of "red" within the RGB colorspace,
corresponding to the full brightness of the "red" (only) pixel components,
constrained by your monitor's limited reproduction gamut.

So yeah, it's "red". But it's not the color of anything that has ever been
viewed by humans in real life (except itself). There are few pure colors in
nature anyway, but you can talk about "red" being wavelength of the center of
the "reddish" range of the visible light spectrum.

Of course, names for colors are always subjective. Crayola might be the best
universal reference. Crayola red bears little resemblance to #ff0000, even
discounting the pigment vs. light mixing and perception differences.

But you have to call it something, right? So #ff0000 is "pure red, RGB,
luminous". :)

------
DonHopkins
We 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.gi...](http://www.sslug.dk/artikler/gnulinux/Bilder/xfontsel-twm.gif)

[2]
[http://www.klauser.com/lxug/ch13.pdf](http://www.klauser.com/lxug/ch13.pdf)

------
kragen
It'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.

------
shogun21
How 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
I 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
> “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.

------
RadioactiveMan
A fun quirk of colour names in HTML:
[http://stackoverflow.com/questions/8318911/why-does-html-
thi...](http://stackoverflow.com/questions/8318911/why-does-html-think-
chucknorris-is-a-color)

I don't think it applies to CSS, just 'bgcolor' and the like.

------
ghrifter
> .. “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>

------
wmil
Oh 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
An utter aside but One colour does have a tragic history:-

#RebeccaPurple or #663399

[http://www.economist.com/blogs/babbage/2014/06/digital-
remem...](http://www.economist.com/blogs/babbage/2014/06/digital-remembrance)

~~~
davebees
as mentioned in the article.

------
smcl
Ha, I posted this here the other day and it died on its arse. Random

~~~
dang
We 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
Repost invites? What have I missed?

~~~
dang
We'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/?query=by:dang%20repost%20invite&sort...](https://hn.algolia.com/?query=by:dang%20repost%20invite&sort=byPopularity&prefix&page=0&dateRange=all&type=comment)
(<\-- 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)

