设计与产品ianstormtaylor.com
设计建议：永远不要使用黑色
Design Tip: Never Use Black
2012 — 2021，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这篇设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。它更像一则启发式经验而非严格规范，评论区也围绕可读性、对比度和媒介差异展开了不少反驳。
为什么经久不衰：它把一条容易被绝对化的设计经验摆出来，引发关于对比度、可读性和媒介差异的长期讨论，今天做 UI、写 CSS 和调阴影时仍值得当作反思起点。
HN 评论精选
批评文章论证薄弱，真正的问题是对比度而非黑色本身。
我有摄影专业经验和设计学硕士背景，我认为这篇文章严重欠缺。首先，文中用作“证据”的照片明显处理或曝光不当，没有黑场，这对图像并不好；不能因此泛化说黑色总是坏的，一位波普艺术家的作品加一张糟糕照片并不构成有力证明。若想真正有意义，应强调对比度过强才是问题：黑色本身不坏，强对比可能坏。根源在于人眼更易察觉颜色或亮度的差异而非绝对值，所以问题不是某一种颜色，而是对比。可参考 Jeff Johnson 和 Colin Ware 的书，它们更好地解释了普通人的视觉感知。
incongruity查看英文原文
As 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 or Colin Ware's Visual Thinking for Design: http://www.amazon.com/Visual-Thinking-Kaufmann-Interactive-Technologies/dp/0123708966/ Both of those do a much better job at explaining the hows and whys of the average person's visual perception.
纯黑对文本可读性最佳，不能一刀切地禁用。
除非你想要高度可读的文本——那种情况下，纯黑作为文字色或背景色都是最好的（但拜托别同时都用纯黑）。
dsr_查看英文原文
Unless, 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.)
规则是给初学者的警告，真正理解后可有意打破；黑色有适用场景。
我做了约二十年职业艺术家，我认为给初学者的任何“规则”其实都是警告：违反这条规则会让好看变难很多，所以最好确保你没有在不知情的情况下违反其他规则。如果你很清楚自己在违反多条规则，那就去做——破坏透视、填满切线、用黑色画阴影等，把这些规则破个够，也可能做出不错的东西。但要做到这点，你得对门道烂熟于心；看看毕加索立体主义之前的作品有多扎实。选择用黑有充分理由，避免用黑也有充分理由；本文谈到几个。据我所知，绘画老师传统上喜欢让你避免用黑，一个原因是常见黑色颜料会迅速破坏与之混合的颜色的饱和度，得到难看的灰色阴影。但如果你做的是更图形化、把每种颜色当作相对独立实体的工作，大量纯黑反而能让东西发光。
egypturnash查看英文原文
I have been a professional artist for about twenty years and it is my considered opinion that any "rule" given out to beginners is actually a warning: violate this rule and making something that looks good becomes a lot harder, so you should probably better make sure you're not violating any other "rules" unknowingly. If you know damn well that you're violating multiple rules then sure, go for it - break your perspective, fill the drawing with tangents, shade with black, etc, break the fuck out of these rules, and you can end up with something pretty good. You have to know your shit backwards and forwards to really pull this off; go look at how solid Picasso's pre-Cubist stuff was, for instance. There are good reasons to choose to use black and there are good reasons to avoid using it; this article talks about several. IIRC, one of the reasons painting teachers traditionally like to tell you to avoid it is because most commonly available black pigments can very quickly ruin the saturation of any other color you mix it with, ending up with unpleasantly grey shadows. But if you do more graphic work that treats each color as a largely separate entity then a lot of solid black can make stuff positively glow.
实用 CSS 经验：黑色是下限、白色也有问题、阴影应带色，设计无法取悦所有人。
我有设计背景，写了很多 CSS，也有观点，请把以下当作个人偏好。第一，这是地板与天花板的基本问题：一旦用了 #000000，就不能更深了；你 100% 确定这个设成 #000000 的东西会是你网站或应用里需要声明的最暗的东西吗？反过来，永远别用白色！现代 macOS 这点很糟，浅色模式下 Mail.app 的大窗口很刺眼。如果你想在白底上给按钮边框加一点高光呢？#fafafa 一直是我的白色首选，因为好记。第二，阴影真的从来不是黑色，CSS 阴影不要默认用黑会更好看；在 Josh Comeau 的阴影调色板生成器里打开“tint shadows”玩一下背景色就明白。第三，你的设计永远不可能让所有人满意，尤其是在某些科技新闻聚合站上接近多数人。
efields查看英文原文
I have a design background and have written a lot of CSS, and I have opinions so just interpret this all as a personal preference if you want. * It's basic floor/ceiling stuff. Once you go #000000, you can't go any darker. Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare? * Conversely, never use white! Modern macOS sucks at this! A large window of Mail.app in light mode is pretty blinding. What if you want to add a subtle highlight to a button border on a white background? #fafafa was always a go-to white for me because its easy to remember. * Shadows are really never black and your CSS shadows will look better if you don't default to black. Toggle 'tint shadows' on the _excellent_ css shadow palette generator: https://www.joshwcomeau.com/shadow-palette/. Play with background colors, you'll see. * Your design will never please everyone, especially anything close to a majority on certain tech news aggregators.
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com在抽象阶梯上上下下
Up and Down the Ladder of Abstraction
Bret Victor 的交互式长文，以“抽象阶梯”为隐喻，讲如何在不同抽象层级之间上下移动来理解、设计和可视化复杂系统。
设计与产品上首页 4 次 · 2011–2021worrydream.com编辑精选