
Colors – A nicer color palette for the web - mrmrs
http://clrs.cc
======
blt
Is this a joke? So much pomp and circumstance for a list of 16 hex colors! A
big-ass readme file with install instructions??? Fucking ruby gems??? And to
top it all off, it breaks designs that use the original colors. Distant colors
are now similar. Lime on Green would have been ugly but readable before; with
these new values it would be totally illegible.

~~~
mrmrs
Seems worth commenting on though :)

It isn't a joke. It's what i use personally as a designer and I thought I'd
open source it. If you don't like the colors, they are pretty easy to change.

~~~
sayemm
I like your new default colors and this project in general. So nice job with
putting this out there.

But at the same time, I don't use your CSS file. I think the commenter above
who's hating on this thinks some of it might be redundant. I guess it depends
on your use-case and what kind of styling you do... I am by no means a CSS/web
designing expert. For my projects personally, I just your use the HEX code of
your new default colors whenever I need it. And I keep it bookmarked it for
reference.

~~~
mrmrs
Yeah! I think judging by web traffic that is how most people use this project
- which wasn't my intention at all - but I'm glad some people are finding it
useful. I tried to make it as easy as possible to digest/use/install the
colors however you want. Whether it's cutting and pasting from the web page -
or installing through npm.

------
ElliotM
Neat project but I'd be careful showing the Twitter (and Github I suppose)
logo with the various colors. This is prohibited by their logo guidelines -
[https://about.twitter.com/press/brand-
assets](https://about.twitter.com/press/brand-assets)

~~~
thisjepisje
Can they sue you for that?

~~~
abraham
They can sue for anything. Winning is a different matter. They generally just
threaten with disabling your Applications using their API.

------
Glyptodon
Hmm. I'm sure it's a calibration issue looking at the hex, but the red looks
rather orange on some of my displays.

(Basically it looks red on my IPS panels, but very very orange on my TNs. The
same panels - not from the same manufacturer - also make the actual orange
look more like a goldenrod.)

~~~
jacobolus
Actually, what they call “red” is just a very orangey red.

Already, sRGB’s FF0000 is quite definitely on the orange side of neutral (I
tend to call the sRGB primaries “orangish red”, “yellowish green”, and
“purplish blue” for clarity when trying to explain technical aspects of color
to non-experts).

So when they push toward an even oranger color, it starts getting silly to
still keep calling it “red”.

Actually in general, the palette at clrs.cc (while it might have been
carefully be internally harmonized) is not all that close to the labels that
typical English speakers attach to those color words. For instance, what this
palette calls “olive” is much closer to neutral green than what it calls
“green” (and is entirely unrelated to the color people typically call
“olive”).

Additionally, there’s such a dramatic variation in saturation (technically,
“chroma”) between colors in this palette that I don’t think they work
especially well together. Some of the colors are muted and others are crazy
colorful. This is what happens when you only pick colors at the very edge of
the sRGB gamut.

~~~
dghf
"Already, sRGB’s FF0000 is quite definitely on the orange side of neutral (I
tend to call the sRGB primaries “orangish red”, “yellowish green”, and
“purplish blue” for clarity when trying to explain technical aspects of color
to non-experts)."

I did wonder about that, especially when desaturating "pure" blue produced a
kind of lilac, and when I got a cyan (rather than green) after-image from
"pure" red.

Thanks for confirming.

Out of interest, where would you say neutral red, green and blue fall in the
sRGB space (or are they out of gamut)?

~~~
jacobolus
For any given hue, you can pick a range of colors. There are an infinite
number of neutral red/green/blue/yellow colors within sRGB. However, for blue
and green especially, these unfortunately happen to be less colorful than you
might achieve with paint or see in nature.

(Note, the “hue” measure used in spaces like HSL/HSV is non-uniform,
especially in the blue–purple range. So that explains part of the effect you
see when you “desaturate” sRGB #0000FF. Your “desaturate” operation is also
shifting the hue, if you define hue based on human perception.)

~~~
blue1
Jacobulous: Your comments are very interesting, can you point to some good
resource (book/site/etc) to learn about such things?

~~~
tripzilch
The lessons from scratchapixel.com were for me the most helpful, they really
made all the stuff about colour-spaces "click" for the first time. Mainly this
chapter, explaining about the tristimulus, CIExyz and how they transform into
sRGB and what is up with that horseshoe shape:

[http://www.scratchapixel.com/lessons/3d-basic-
lessons/lesson...](http://www.scratchapixel.com/lessons/3d-basic-
lessons/lesson-5-colors-and-digital-images/)

Further, if you click around there's a few more chapters relevant to colours
that put this theory into practice (in the context of raytracing and
rendering):

[http://www.scratchapixel.com/lessons/3d-advanced-
lessons/bla...](http://www.scratchapixel.com/lessons/3d-advanced-
lessons/blackbody/spectrum-of-blackbodies/)

[http://www.scratchapixel.com/lessons/3d-advanced-
lessons/sim...](http://www.scratchapixel.com/lessons/3d-advanced-
lessons/simulating-the-colors-of-the-sky/atmospheric-scattering/)

------
altcognito
Call me old fashioned, but I like my black #000

~~~
jastanton
I agree that black should be #000 for the sake of semantics. Though it's
pretty popular opinion to never use black in design:
[http://ianstormtaylor.com/design-tip-never-use-
black/](http://ianstormtaylor.com/design-tip-never-use-black/)

~~~
JTxt
" Argument: Don't use black because nothing in nature is actually black.

False Conclusion: Don't use black on a web page because nothing in nature is
actually black.

False Assumption: The black on a web page is actually pure black.

True Conclusion: Use black if you want to - it won't be pure black, it will
simply be the darkest you can get.

PS. This is also true for paint: Black paint is also not pure black. " -ars
[https://news.ycombinator.com/item?id=6581935](https://news.ycombinator.com/item?id=6581935)

Kinda unrelated story: I ran into trouble using "true black" (A combo of CMYK)
on a van wrap. In all the testing I did, it looked fine, but outdoors, it
looked green. But photos of the wrap looked fine. (the camera has a uv
filter?) Figured out that the cyan ink fluorescenced in daylight with that
combo of ink and material at least. And converted it to just black ink for the
next ones.

~~~
marcosdumay
Monitor and ink manufacturers make a real effort to get as near to pure "does
not exist in nature" black as possible. Nature does not.

And, of course, almost pure black does exist in nature (look in a deep hole
some day). It's only rare.

------
jmulho
Proposed experiment:

1) Provide a matrix of all 32 colors and a list of the 16 color terms. Ask
people to pick the tile that best matches each color term.

2) Provide the matrix of colored icons/logos that uses the new palate, and the
same matrix using the old palate. Ask people to pick the prettier matrix.

I don't think the new palate has any chance of winning the first contest. It
might win the second. Perhaps that's the point.

~~~
berdario
Reminds me of the xkcd color experiment:

[http://xkcd.com/color/rgb/](http://xkcd.com/color/rgb/)

[http://blog.xkcd.com/2010/05/03/color-survey-
results/](http://blog.xkcd.com/2010/05/03/color-survey-results/)

~~~
jmulho
Interesting stuff. Thanks. The section on gender differences is hilarious!

------
khaki54
I like the set, but I thought that the reasoning for the web safe colors was
not that they were a "good" choice for web design, but that they were
empirically likely to be rendered consistently across all types of display,
even uncalibrated.

~~~
jacobolus
If by “web safe” colors you mean the 216-color grid of 00, 33, 66, 99, CC, FF
along each of the RGB axes (this is the common definition of “web safe”
colors), then this basically incorrect. Web safe colors vary dramatically
between displays, just like any others.

The reason for “web safe” colors was that most color displays in the mid-1990s
used a 256-color palette to render everything on screen, so any colors not in
the palette would be dithered. Browsers had their palettes set to include the
216 “web safe” colors in addition to various operating system default colors.
Web safe is basically irrelevant to anything since sometime in the mid-2000s.

Web safe colors render just as inconsistently across uncharacterized displays
as any other colors. And when the displays are properly characterized
(“calibrated” is the popular word for this, but not quite technically right),
colors at the very corners of the gamut (like FF0000 or whatever) are actually
much likelier to vary, if any of the displays’ gamuts doesn’t cover the
entirety of the sRGB gamut.

------
untilHellbanned
Why so much hate? This looks nice. I'd put the old palette below the new
palette. Seeing the old palette first, I immediately thought "those don't look
new or very pretty".

~~~
mrmrs
Yeah I thought about putting the old colors below as I agree it's not nice to
see first - maybe I'll try that out this weekend. Thanks for the suggestion.

------
loupeabody
I've been using [0] and the Material Design color guidelines [1] lately,
they're great!

[0][http://colours.neilorangepeel.com/](http://colours.neilorangepeel.com/)
[1][http://www.google.com/design/spec/style/color.html#color-
ui-...](http://www.google.com/design/spec/style/color.html#color-ui-color-
palette)

~~~
zpao
So long as you know the colors in [0] are all just the hardcoded CSS
"standard" colors, then great :) There are some "awesome" ones there
(papayawhip, lightgoldenrodyellow) and the history of how they came to be (via
X11) is pretty interesting too.

------
japaget
Looks good, except that Olive should be a dark yellow-green instead of a dark
blue-green as it is in this palette.

------
canterburry
I do like these, however, I'd be very cautious about replacing such universal
defaults as I am sure there are very specific reasons why these very shades
where chosen.

I am quite certain hundreds of hours of testing went into picking these shaded
given different monitors and devices available....in the 90's.

~~~
emddudley
I am pretty sure the only reasoning behind the original colors was that they
are mathematically nice. Like #FF0000 for red and #008080 for teal (with the
exception of orange, which wasn't one of the original 16). The colors were not
chosen for aesthetics, that is for sure.

------
Aardwolf
Nice set. The maroon is a bit too purplish for my taste, maroon is supposed to
be dark red, not purple. There are already two other colors in the purple
range there (purple and fuschia)... :)

~~~
adestefan
Same here. Looks nothing like maroon on my 2011 13" MBP. When I hear maroon
something like Panatone 202 is what I want to see.

[http://mera.se/PMS/202C.html](http://mera.se/PMS/202C.html)

------
NickWarner775
All of the colors are much softer than the old pigments, gives the page a much
more friendly and inviting feel. Most modern websites seem to use these
similar colors.

------
SwellJoe
Wow. ITT people have a lot of emotions about a set of colors.

~~~
mrmrs
Well, picking colors to paint a bike shed is really hard.

------
artursapek
Don't talk shit about olive

~~~
mrmrs
+1

