8 ms·

Colors – A nicer color palette for the web

125 points by mrmrs 12y ago

japaget 12y ago
Looks good, except that Olive should be a dark yellow-green instead of a dark blue-green as it is in this palette.
loupeabody 12y ago
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-color-palette http://www.google.com/design/spec/style/color.html#color-ui-...
- claar 12y ago
  I like the purple on your orangepeel link a lot better than the OP's.
- zpao 12y ago
  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.
canterburry 12y ago
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.
- mcmillion 12y ago
  Doubtful. The standard colors are all just mixes of RGB at varying degrees (ff/255, 7f/127, etc).
- barkingcat 12y ago
  I don't think hundreds of hours of testing went into anything for the html spec back in the 90's. Things were quite ad hoc in the early days! That said, there were probably specific reasons why those colors were chosen, reasons that might not make so much sense today. Oh I remember - it's to fit into the 256 colour palette of gifs and old school graphics adapters that can't store too many bits! If you wanted more colours, you had to swap out the pallette. I don't think that applies today anymore, even on the most basic computers.
- emddudley 12y ago
  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.
- Aldo_MX 12y ago
  In the 90's you could barely afford a 256-color capable graphic card, this is why a Web-Safe color palette exists[1]. There were no "hours testing", they just picked the colors that were used by the most popular browsers. [1] http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors
Glyptodon 12y ago
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 12y ago
  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 12y ago
    "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 12y ago
      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.)
altcognito 12y ago
Call me old fashioned, but I like my black #000
- jastanton 12y ago
  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 12y ago
    " 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 12y ago
      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.
  - deleted 12y ago
    [deleted]
  - thwarted 12y ago
    Is this why you see a lot of web pages that are some mid-shade grey background with another mid-shade grey text, resulting in extremely low contrast and increased difficulty in reading?
Aardwolf 12y ago
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 12y ago
  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
khaki54 12y ago
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 12y ago
  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.
artursapek 12y ago
Don't talk shit about olive
- mrmrs 12y ago
  +1
blt 12y ago
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 12y ago
  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.
  - keithpeter 12y ago
    Nice enough. I agree with gp about the change in colour distances though. Can't use your palette as a drop-in on older pages
    - mrmrs 12y ago
      Agreed :) That was never the point. It is just a really simple module I found useful for myself as I didn't like the defaults.
  - msane 12y ago
    But they were already pretty easy to change?
  - sayemm 12y ago
    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.
untilHellbanned 12y ago
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 12y ago
  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.
ElliotM 12y ago
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 12y ago
  Can they sue you for that?
  - abraham 12y ago
    They can sue for anything. Winning is a different matter. They generally just threaten with disabling your Applications using their API.
- nilved 12y ago
  Oh no!
SwellJoe 12y ago
Wow. ITT people have a lot of emotions about a set of colors.
- mrmrs 12y ago
  Well, picking colors to paint a bike shed is really hard.
jmulho 12y ago
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 12y ago
  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 12y ago
    Interesting stuff. Thanks. The section on gender differences is hilarious!
NickWarner775 12y ago
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.

125 points by mrmrs 12y ago

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

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-color-palette http://www.google.com/design/spec/style/color.html#color-ui-...

claar 12y ago
I like the purple on your orangepeel link a lot better than the OP's.
zpao 12y ago
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.

canterburry 12y ago

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.

mcmillion 12y ago
Doubtful. The standard colors are all just mixes of RGB at varying degrees (ff/255, 7f/127, etc).
barkingcat 12y ago
I don't think hundreds of hours of testing went into anything for the html spec back in the 90's. Things were quite ad hoc in the early days! That said, there were probably specific reasons why those colors were chosen, reasons that might not make so much sense today. Oh I remember - it's to fit into the 256 colour palette of gifs and old school graphics adapters that can't store too many bits! If you wanted more colours, you had to swap out the pallette. I don't think that applies today anymore, even on the most basic computers.
emddudley 12y ago
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.
Aldo_MX 12y ago
In the 90's you could barely afford a 256-color capable graphic card, this is why a Web-Safe color palette exists[1]. There were no "hours testing", they just picked the colors that were used by the most popular browsers. [1] http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors

Glyptodon 12y ago

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 12y ago
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 12y ago
  "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 12y ago
    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.)

altcognito 12y ago

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

jastanton 12y ago
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 12y ago
  " 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 12y ago
    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.
- deleted 12y ago
  [deleted]
- thwarted 12y ago
  Is this why you see a lot of web pages that are some mid-shade grey background with another mid-shade grey text, resulting in extremely low contrast and increased difficulty in reading?

Aardwolf 12y ago

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 12y ago
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

khaki54 12y ago

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 12y ago
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.

artursapek 12y ago

Don't talk shit about olive

mrmrs 12y ago
+1

blt 12y ago

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 12y ago
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.
- keithpeter 12y ago
  Nice enough. I agree with gp about the change in colour distances though. Can't use your palette as a drop-in on older pages
  - mrmrs 12y ago
    Agreed :) That was never the point. It is just a really simple module I found useful for myself as I didn't like the defaults.
- msane 12y ago
  But they were already pretty easy to change?
- sayemm 12y ago
  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.

untilHellbanned 12y ago

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 12y ago
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.

ElliotM 12y ago

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 12y ago
Can they sue you for that?
- abraham 12y ago
  They can sue for anything. Winning is a different matter. They generally just threaten with disabling your Applications using their API.
nilved 12y ago
Oh no!

SwellJoe 12y ago

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

mrmrs 12y ago
Well, picking colors to paint a bike shed is really hard.

jmulho 12y ago

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 12y ago
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 12y ago
  Interesting stuff. Thanks. The section on gender differences is hilarious!

NickWarner775 12y ago

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.