10 ms·
Design Tip: Never Use Black
- dzenn 14y agoits funny how most people here dont know anything about design .. i totally agree never use black .
- pizza 14y agoNever use black because it's too strong to always be used? If you want something strong, use black. If you don't, don't. That's about it.
- thinkingisfun 14y agoThat's why I like using #222 for text, it leaves #000 for the <strong> tag.
- azylman 14y agoI really hoped that this was going to be a joke about how, if you use black, Apple will sue you for patent infringement...
- mnicole 14y agoI'm trying to remember the name of the designer that tried to call out fab.com a few months ago for "stealing" his aesthetic. By aesthetic I mean he puts white Helvetica type on black.
- highace 14y agoGood read. I came to this exact realisation myself not too long ago too. A hint of blue in your greys makes them much more appealing than pure grey.
- re_todd 14y agoReminds me of the time I was looking through a page wondering how the designer got the greys to look so good. I was surprised when I saw the css class called "bluish-grey", and I suddenly realized he had been using a blue tint and I hadn't really noticed. (He also used #333 for blacks, which looked really good, and I've been using ever since).
- dsr_ 14y agoUnless, you know, you want highly readable text. In which case there's nothing better than pure black, as your text color or as your background (but not both at once, please.)
- powerslave12r 14y agoWhile the inverse of that (light text on dark) makes for a terrible reading experience, yet so many bloggers/sites do it. (Funny observation: I seem to prefer dark themes for coding Python, Ruby, C and light ones for Java)
- kstenerud 14y agoI've always preferred light on dark. Bottom line: You can't please everyone.
- gizmo686 14y agoSet the color to "foreground" and "background", then let the browser (or viewing program) color them based on user preference.
- darkstalker 14y agoMy text editor background is pure black. I can't stand writing code on a white background for a long time. Some people uses blue backgrounds that are a lot worse.
- lazyjones 14y agoThe reason why many people prefer black text on white is that they have an astigmatism: http://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/ http://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on... I have one on the left eye but preferred white on black before I switched to Windows (from Linux), where the system colors are black on white and thus I have mostly windows with black on white open (a few dark terminal windows are extremely distracting). On the other hand, I found white/colored text on blue (as modern in the 90's, e.g. Turbo Pascal and other DOS editors/IDEs) quite readable.
- hakanito 14y agoTotally agree.
- PaulHoule 14y agohow about "never use white?" rgb(255,255,255) is the brightest color value you can have on the screen and colors like rgb(255,0,0) don't really pop against it because they're dark in comparison.
- rokhayakebe 14y agoI agree, white is a lot harder on the eyes. As an experiment I switched my kindle fire reading app to a white background and forgot about it. Two weeks later I realized I was reading for a noticeable shorter amount of time (lets' say average 20 mns per day as opposed to 1 hour + per day). I would pick up the reader, but I just would not be able to go for a long time.
- ianstormtaylor 14y agoMy problem with not using white is that even slightly-grayed whites take on very different tints depending on the display, so as much as I'd like to use it, I avoid it. But, I do remember one of my drawing teachers at RISD telling us not to use the white charcoal sticks in our charcoal drawings (there the white is the weird unnatural element). And it's true, when I mixed in whites for highlights instead just erasing to the color of the paper, things started to feel weird.
- duaneb 14y agoYes, and this will only only grow worse the better screens get w/r/t brightness and contrast.
- ricardobeat 14y agoI love #fafafa.
- lsdafjklsd 14y agoLearned about this in my motion graphics class, no such thing as pure black in nature. Also, all of the articles on your website link to this story. Great reads.
- Xcelerate 14y agoNot quite true. Black holes for instance. Also, there's some carbon nanotube pigments used to absorb like 99.9999% of light that lands on it. It still looks pure black even when using a powerful flash to take a photo of it. These pigments were developed by NASA for use in telescopes where even a little bit of light can ruin the image.
- bberrry 14y agoBlack holes are not black dude.. You can't see them at all.
- thinkingisfun 14y agoWhich is what black is: You can't see it, since it returns no light.
- D9u 14y agoAs I've previously mentioned, cave darkness is completely black, and natural.
- Xcelerate 14y agoYou shine line at it; no light comes back. That is known as "black".
- duaneb 14y ago> ...no such thing as pure black in nature. This is exactly why it can be so effective when used correctly. Obvious, if you're painting, black looks uncanny, but that's a far different situation than digital design.
- 14y ago
- danso 14y agoThe best design tip I've picked up in the last five years was that sometimes, in your CSS definitions, you can use #555 or #777 or even #333, and not just black. I don't mean that I didn't know you could enter hex numbers for colors, I just didn't realize that when I wanted a "black" border, #888 makes for a much less jarring border than #000...and this is critical if you have a lot of bordered elements.
- gmac 14y agoYes -- and for borders it's arguably still black, just thinner, since a 1px line at 50% black could be an aliased representation of a 0.5px line at 100% black.
- hnriot 14y agoThis comes up often on hn. Using painting, especially Wayne Thiebaud's as support for the argument is very weak. He's a pop art painter that is known for using exaggerated colors, it's part of the pop art movement's signature style. I would agree that when painting a shadow, you will likely find if you look carefully that it is not black, but in web design color is different and design has different goals to painting. The former is about clarity and function, the latter is expression and feeling. In rebuttal to the argument, there are several hundred years of printing that seemed to have moved western civilization forward quite nicely that was black on white.
- imperialWicket 14y agoMost paper isn't #fff, and most black inks don't appear as #000. Also, I think that tactic opens the debate to aspects of technology, manufacturing, and cost analysis. I agree that painting isn't the most optimal tool for pushing this point, but I don't think the print argument is a whole lot better when comparing to css styling technique.
- jessevondoom 14y agoWell the thing with printing is that the K part of CMYK is actually not the darkest black, yet it's 100% K that's used to print a book. Fully saturated rich black (100% C+M+Y+K) is usually a little too jarring against a bright stock — take a look at most high quality books and notice that the stock is off-white and the ink isn't nearly as rich as #000 black on screen. I think the original point as a lot of merit. Staying even just a little bit further from #000 or even pure grays (try #335, etc) can give more even tones and keep contrast high while reducing fatigue. You're right about comparing art to print though — different goals, even though the conclusion is valid.
- michaelmior 14y agoBack when I used to do some print design, we always used 95% K max. Anything else came out funny on the stock we were using.
- ianstormtaylor 14y ago
- michaelpinto 14y agoPaul Rand (who was perhaps the best graphic designer of the 20th Century) would disagree with that "tip"
- danso 14y ago...can you provide insight why? It may be so, but context is important, and argument by authority is not particularly helpful.
- hnriot 14y agoI would imagine the commenter was referring to the works of Rand. Google for some of his corporate brands and look at all the black. Try the Next logo for example.
- danso 14y agoOK, no argument there. The headline could be softened (Never use black in web layouts) as logos/branding are different from UI/UX design.
- vidarh 14y agoPeople here also seems to take it far too literally. There are always exceptions, no matter how absolute the article words it. But while rules are there to be broken, they are best broken when you are skilled enough to know when it works to do so. Most people who will read that article are not going to be skilled enough at graphical design to be able to easily decide when breaking this "rule" is an improvement and when it makes things worse, and so will probably benefit from paying attention to it. Those that do understand when breaking it is really an improvement should go ahead and do so when appropriate. The problem of course is that far too many people think they're experts.
- lsiclait 14y agoHere's an article with Paul Rand's views on the subject (that extols black) http://www.paul-rand.com/foundation/thoughts_black/#.UCLgysjC6z4 http://www.paul-rand.com/foundation/thoughts_black/#.UCLgysj...
- mischov 14y agoIn case you're curious, the text you are reading now is #000. Which is not to say that #222 wouldn't be easier on the eyes.
- radley 14y agoProbably would look less pixely...
- ianstormtaylor 14y agoBut it's also on a tan background :p so it's probably fine. It's all about contrast.
- hackerpolicy 14y agoUpvoting so it can still look #000.
- shpoonj 14y ago"Problem is, we see dark things and assume they are black things. When, in reality, it’s very hard to find something that is pure black. Roads aren’t black. Your office chair isn’t black." This only applies to skeumorphic designs. Terminals were green text on a solid black screen for a reason... readability. Now is the time to ditch gradients and shadows and focus on usability instead of making things look 'real'.
- mynameishere 14y agoOkay, don't use black. I can just go to Tools -> Web Developer -> CSS -> Disable Styles -> All Styles to fix your bad design with a superior non-design.
- rlpb 14y agoI'm not sure that this argument works. #000 on my screen isn't black either. It's dark grey. Doesn't this mean avoiding #000 for design aimed at screen display cause you to avoid pure black twice, and thus just reduce contrast? Perhaps that's what you want, and what looks better. But it isn't because #000 is pure black, because no screen can achieve that.
- tinco 14y agoHe does not only tell you to reduce the contrast, which with a good enough screen can be arbitrarily high, he also advices you to increase the saturation. And pure black can not have saturation.
- hwillis 14y agoMy first thought as well. But there is an argument to be made that the screen is a different world, and the black of the screen looks as unnatural as pure black in the real world. I think this would apply less to a phone or something with a short view time, as adjusting to the new color palette would take us some amount of time.
- rio517 14y agoNow someone needs to tell this to the people who redesigned http://salon.com http://salon.com recently. It's virtually unreadable.
- Raisin 14y agoAlso stop using grey http://stopusinggrey.com/ http://stopusinggrey.com/ add just a bit of colors to you designs.
- lovskogen 14y agoUnless, you know, you want to make images or video pop out with great contrast.
- kstenerud 14y agoshpoonj your account has been hellbanned as of 11 days ago here: http://news.ycombinator.com/item?id=4305877 http://news.ycombinator.com/item?id=4305877
- runemadsen 14y agoOne thing to think about is that many users have auto-dimming screens, which means that your dark-grey color will appear black anyway. What tends to happen with these low contrast, analogous color schemes is that they result in a mid-gray soup of colors. I tend to use higher contrast on the web than in print. Itten's seven color contrasts is a great way to learn how to create contrasted color schemes that still survive dimmed screens, even without using the light/dark contrast.
- deleted 14y ago[deleted]
- playhard 14y agoBrilliant Article .This made me read color theory For starters, http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/ http://www.smashingmagazine.com/2010/01/28/color-theory-for-... http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/introduction-to-color-theory/ http://mobile.tutsplus.com/tutorials/mobile-design-tutorials...
- aw3c2 14y agoThose could really use some scientific sources.
- dholowiski 14y agoNO. This is how we end up with dark gray text on light gray background, on a web site. If you're building something that people will read, make it easy for them to read.
- deleted 14y ago[deleted]
- artursapek 14y agoMy painting teacher at RISD told me that when he paints an outdoor scene he always mixes a tiny bit of blue into every color he uses, because the color of the sky is reflected off everything. It's a real skill to see color arbitrarily as it actually is, without attaching labels to it.
- danem 14y agoI don't understand how accurate representation of color becomes a concern in the areas graphic design. Sure, black is almost never a good choice when practicing any sort of representational art. Mixing it with other pigment in a effort to darken it saps any nuance or sensitivity that may have been present in your colors, and will almost never be true to the colors you are actually observing. I don't however, understand how any of this is relevant and applicable to most design. Offhandedly disregarding all use of black is quite silly, and shows a lack of appreciation of the interplay of colors. Designers aren't artists. Designers very often make no attempt to represent any real thing. So why should physical phenomena enter the equation? It is also incredibly important for designers to be sensitive of color, and to be aware of how they interact and play with one another. All of that is a given.
- mrxd 14y agoHuman beings are accustomed to looking a physical phenomena. Designs that deviate from those rules are experienced as artificial, strange or uncomfortable. But you're right that you can't say never use black. It would be more correct to say never use black unless your goal is to make the viewer feel uncomfortable.
- danem 14y agoPlease show me some research, or even anecdotal evidence supporting the claim that black makes people uncomfortable. Furthermore, the idea that designs which deviate from physical counterparts, are "strange" or "uncomfortable" is completely unsupported by vast amounts of highly popular and effective designs. Indeed it is often the goal of many designers to deviate from and simplify any physical artifact it may reference. https://www.google.com/search?q=emil+ruder&tbm=isch https://www.google.com/search?q=emil+ruder&tbm=isch https://www.google.com/search?q=edward+tufte&tbm=isch https://www.google.com/search?q=edward+tufte&tbm=isch https://www.google.com/search?q=josef+muller+brockmann&tbm=isch https://www.google.com/search?q=josef+muller+brockmann&t... https://www.google.com/search?q=paul+rand&tbm=isch https://www.google.com/search?q=paul+rand&tbm=isch http://www.pentagram.com/ http://www.pentagram.com/ I haven't seen any claim substantiated by evidence of any sort. All claims appear to supported by the concerns of representational artists, this blog post, and some huge assumptions made about the human mind. Graphic design is too complex, sophisticated to be subjected to these maxims you and others seem eager to impose.
- swasheck 14y agoHow do I reconcile this with "Always Bet On Black?"
- gallerytungsten 14y agoThis article suffers from a bit of confusion over the difference between art and design. Art: don't use the color black (or build up to it.) Good tip from "childhood art teacher." Another way of putting it: don't use black unless you know what you're doing. Design: black is the strongest color. (The three strongest colors in design are black, white, red.) However, don't use a black background with white text (or any other color text on a dark background; bad readability). If your design isn't working in black and white, it's not working.
- markbnine 14y agoExcept for movie posters Clockwork Orange. Aliens. Star Wars. Love the black.
- incongruity 14y agoAs someone with professional experience in photography and a masters in design – I think this piece is seriously lacking. First – the photo that is used as "evidence" caught my eye quickly because it is clearly poorly processed/improperly exposed. There is no black point and that's a bad thing for the image; which leads me to say – you can't make the sweeping generalization that black is always bad. It's not – and the work of one pop art painter and a bad bit of photography isn't substantiated proof. If you want to actually make something meaningful out of this, you'd actually push hard on the idea that too much contrast is a bad thing. Black isn't bad. Heavy contrast can be. Instead, get down to the root reasons that we have issues with contrast – in short, we're wired to notice differences in color or brightness than we are for absolute values of color or brightness. As such, it's not about one color, it's about the contrast. Check out Jeff Johnson's Designing with the Mind in Mind: http://www.amazon.com/Designing-Mind-Simple-Understanding-Interface/dp/012375030X http://www.amazon.com/Designing-Mind-Simple-Understanding-In... or Colin Ware's Visual Thinking for Design: http://www.amazon.com/Visual-Thinking-Kaufmann-Interactive-Technologies/dp/0123708966/ http://www.amazon.com/Visual-Thinking-Kaufmann-Interactive-T... Both of those do a much better job at explaining the hows and whys of the average person's visual perception.
- huffman 14y agoA good counter example to the pop art painter are Baroque painters, who used very dark colors very heavily in their pieces http://en.wikipedia.org/wiki/Baroque_painting http://en.wikipedia.org/wiki/Baroque_painting
- tripzilch 14y agoNot much of those you linked to actually use pure black, but this one comes pretty close: http://en.wikipedia.org/wiki/File:Francisco_de_Zurbarán_018.jpg http://en.wikipedia.org/wiki/File:Francisco_de_Zurbarán_018.... It also happens to show very nicely what's wrong with using pure black as shadows: they're not shadows, they're holes. (what a god-awful painting, btw. and they compare his work to Caravaggio's ... )
- billswift 14y ago
- D9u 14y agoWhile the article is well presented, and contains many good points, I must take issue with a few of the ideas set forth. 1.) I'm not taking "design tips" from someone whose site takes so long to load on a slow connection. 2.) Obviously the author has never been in a cave and turned all lighting off. Cave darkness is a complete and total absence of light & color save for black. This color IS NATURAL! 3.) In the spirit of the "green" movement, doesn't the use of black equate to less power consumption? (Remember http://www.blackle.com/ http://www.blackle.com/ "energy saving search?") That said, I'm sure that the author is vastly more artistically talented than I, as I can't even color within the lines in my grandchildren's coloring books!
- ianstormtaylor 14y agoColoring inside the lines is vastly overrated. Just ask Mrs. Zamula.
- ricardobeat 14y agoThe moment you add a dot of any visible color in that cave, it's not pitch black anymore. So no, 100% black is not found in nature paired to other colors.
- kadavy 14y agoAvoiding black definitely causes you to make color choices that add more dimension and realism to your interfaces. Interfaces, after all, are representations of reality. One helpful tip: "warm" colors jump out at you, and "cool" colors recede away from you. You can use this to your advantage when designing buttons, or even when working with typography. More detail in this article, "Why Monet Never Used Black": http://www.kadavy.net/blog/posts/d4h-color-theory/ http://www.kadavy.net/blog/posts/d4h-color-theory/
- novalis 14y ago"Why does the Facebook Mobile interface feel so nice?" I didn't know that, looks horrible to me. But either way a somewhat good read in general.
- duaneb 14y agoI'm not sure this applies to user interfaces and digital design, where style is a huge aspect. The starkness of true black on true white is stark, and sometimes that's what you're looking for, especially for minimalism. For example, see http://whatthefuckshouldimakefordinner.com/ http://whatthefuckshouldimakefordinner.com/. I would think a design student would recognize that not everyone wants to have the same look and feel as other people, and there is a place for black. Just not in his sketching class at RISD.
- chipsy 14y agoDisagree with the concept. I would recommend studying pixel art for examples of really strong color usage - most modern styles work within an economical palette, just like in graphic design. Black is commonplace, it's how it's used that matters. The scene as a whole has similar considerations for contrast and weight as graphic design, even though the individual elements tend to emphasize detail and lighting. Enormous pixel art thread: http://forums.tigsource.com/index.php?topic=167.0 http://forums.tigsource.com/index.php?topic=167.0
- codegeek 14y agofunny thing for me is that I had a hard time reading his blog since the font color is too light for me. It could just be me though.
- cag_ii 14y agoSame here, the dark grey used for the article title would look much better IMO.
- alexanderh 14y agoI couldnt disagree with this article more. I'm frustrated with how little webpages use black. In all my development environments where i'm coding for hours on end, i always find black background with white text to be far superior in terms of readability. I wish everyone had AMOLED screens (even on our desktops) so using black had more of a real purpose.
- swah 14y agoLittle experiment: I changed text from black to #130F30 on a website and couldn't notice the difference..
- Teapot 14y agoI only see the difference when i know to look for it. That's good design.
- icoder 14y agoWell, black is not black, it is simply the darkest color your medium (paper, screen, etc) can display. Not using it would effectively reduce the dynamic range of your medium.
- localhost3000 14y agoanyone else have this experience: reading this article on an iphone only to notice that the thing in my hand - perhaps the most successful consumer electronic device in the world - was as close to jet black as anything else I'd seen today? :\ ... what about black turtle necks - are those OK?
- poppysan 14y agoIt really depends. I am not a fan of the tip because it is a bit misleading. The reason there aren't many true blacks in representational art is due to reflection of light into the shadows. Also, given the overall temperature of an image, it can be just as high-contrast to use a color on the opposite end of the color wheel. Either way, these are style decisions, which are highly subjective.
- electic 14y agoThere is a lot of black on HackerNews and I love HN:)
- esolyt 14y agoI find this approach too extreme. Black is sometimes needed. You may choose to use true black and maximize the contrast when you need to improve readability, especially for accessibility reasons.
- gcb 14y ago> words on pages aren't black But they should! Death to low contrast text. Even if your #333 on #eee is "almost full contrast but fashionable". It's not, on both accounts.
- rjzzleep 14y agoop obviously not as knowledgeable as he thinks he is. but as some here mentioned theres nothing better than light on dark for eye comfort. otoh if you take antialiased font it will NEVER be really black anyway. and people who use bitmap fonts for long hour coding sessions just because it feels better, causes less headaches etc. will tell you that you can take your advice and ... ;)
- synor 14y agoAnsel Adams disagrees.
- jasonlingx 14y agoErm... The "absolute black" on your screen isn't absolute black either...
- ClintonWu 14y agoFunny to see this ranked right above Pulse's post: http://news.ycombinator.com/item?id=4360756 http://news.ycombinator.com/item?id=4360756
- ehutch79 14y agoto all the commenters arguing against the point... this article isnt for you. it's for people who just through everything up as #000 and #FFF. It's for the people who desperately need things like bootstrap.
- far-I 14y agoIt's a matter of preference too. Do you think Richard Pettibon's stuff would like nice in grey? I don't think so!