也就是说，“不要使用黑色来制作彩色背景上的阴影”。 在我的设计教育的每一步，我都学到了这一点。 例如，在 Photoshop 中添加一个阴影作为图层样式时，不要只选择黑色或灰色，而是从背景中取样颜色，然后降低不透明度，直到看起来不错。 这是因为现实生活中的阴影不是黑色的。 它们是它们所处物体顶部的暗化版本，因为光线较少。 查看 这个阴影。 如果您想重现它，我认为任何不透明度的黑色都无法完全做到这一点。
现在，由于我们有了 CSS 工具箱中的 (很棒的) RGBa，我一直在听到和看到人们使用调暗的黑色（例如rgba(0,0,0,0.5)) 用于背景和阴影。 这种做法正在通过诸如“阴影颜色会因为不透明度而拾取背景颜色”之类的评论进行教授和鼓励。 的确，它会，但它会与黑色混合，而不是它自身的更深色调版本。
我曾听过 Dan Cederholm 在 An Event Apart 和 Bulletproof Web Design 中教授这一点。 Meagan Fischer 还有一篇 最近的教程，其中黑色是示例阴影颜色。 Dan 和 Meagan 是比我更好的设计师，比我更聪明的人，所以我不打算对他们指手画脚。 我认为他们的观点是，使用黑色更明智，更具未来性，因为黑色可以同样好地放置在任何背景颜色上，而色调阴影仅适用于该色调。
我的观点是，如果您要更改背景颜色，您就是在对 CSS 进行更改。 所以，当您这样做时，也更改阴影色调。 如果您无法控制文本/方框阴影将位于什么之上，那么是的，使用黑色。 如果可以，请使用色调阴影。
或者我疯了吗？ 使用黑色基本上与“它自身的更暗版本”相同吗？ 我之所以提出这一点，是因为我最近经常看到这一点，而且实际上在学校和我在各种工作中，我们始终被教导要调整阴影的色调。
由于“黑色”是一种色调，而不是一种颜色，因此将低于它的源的更暗版本，并更改黑色的不透明度应该会产生相同的结果。
将方框阴影更改为大约 .37，您几乎看不到区别。 如果仔细观察，您会看到颜色有细微差别，但快速扫视会产生相同的结果。 两者看起来都一样。
同上
在 Photoshop 中设计时，我会使用黑色并将叠加模式设置为正片叠底…
没错…
哈哈哈！
那么照片上的阴影呢？
在您的示例中，虽然黑色看起来还可以，但我认为彩色阴影看起来更自然。 我从未想过要像这样制作阴影。 我一直只使用黑色或灰色阴影。
我认为这是一个很棒的观点，我以前没有经常想到。 我同意，使用背景的不同色调是一种更自然的方法。
我期待着看到其他人的建议。
我更喜欢印刷的东西，但由黑色组成的阴影是那些会暴露它本身的东西之一。 在 PS 中，我会吸取我要投射的颜色，设置为正片叠底（如 Tom 所述）并根据需要变暗。
这是一个非常好的观点，但有时黑色是阴影颜色唯一的选择。
我同意 Tom 的观点。 但是，就像 Web 设计世界中的几乎所有其他事情一样，它都归结为每个设计师的喜好。 依我拙见，制作阴影并没有正确或错误的方法。
使用在给定情况下看起来最好的方法。
与印刷工作类似，您可能会发现“浓郁黑”或“冷/暖黑”更适合，具体取决于设计。
一般来说，我会避免使用 #000 黑色，因为我发现它有一种不必要的最终性。
Chris，观点很棒。 由于没有“正片叠底”设置，因此我们作为 Web 设计师必须在我们的投影中添加颜色，以更好地匹配它们周围的环境。 仅仅设置黑色的不透明度与色调阴影不同。 但有一点可以肯定……输入
rgba(0,0,0,0.5)比查找正确的颜色要快得多。 那么这意味着我们很懒吗？同意 Doug 的观点！ 您可以在设计中始终使用黑色，然后使用正片叠底或更改不透明度或叠加。
在 CSS 中您没有类似的功能。 只要阴影所在区域中存在单一色调，就可以使用非黑色，但只要区域中有多种颜色，就会变得混乱，而更简单或可能是唯一的解决方法是如 Doug 所示使用黑色。
我任何时候都更喜欢色调阴影而不是简单的黑色。 当然，黑色 rgba 方式更容易，但正如 Chris 指出的，如果您无论如何都要进行 CSS 更改，那么将阴影更改为匹配值就很简单。
细节是将优秀设计师与其他人区分开来的……而不是捷径。
我从未听说过哪种方法更好，但我发现自己经常使用特定颜色的更深色调。
我的一些设计师朋友也提到，实际上特定颜色的更深色调就是该颜色加上一点黑色。 通过这种说法，具有低不透明度的黑色阴影会具有接近相同的感受，尽管它可能需要更低的不透明度才能与它等效的彩色阴影匹配。
我不得不不同意：更深色调 = 只需添加黑色。
“在颜色中添加黑色”会使它变暗，但通常也会使它看起来更“脏”。
原因是添加黑色会降低饱和度和亮度，而添加相同颜色的更暗版本，饱和度的差异由设计师决定。
在大学里，我们了解到，如果您添加相反的颜色，您将获得自然的变暗阴影。 例如，如果您有一个部分处于阴影中的蓝色，请使用橙色（少量，直到达到所需的色调）将阴影区域变暗。 这是针对油漆的，仅供参考。
您对彩色阴影和黑色阴影使用相同的不透明度设置。 如果您使用更低的不透明度设置，它最终不会变成相同颜色的阴影吗？ 目前，我看到的唯一区别是“彩色”阴影更浅，更难看到。
这正是我看到示例后首先想到的。
黑色是所有颜色的最深色调，对吧？ 所以您只是说不要让阴影太暗，对吧？ 那么，让您的 RGBa 不透明度更透明，对吧？ 我在笑我的鼻子 BTW。
色调阴影更微妙/自然，但我认为普通用户甚至不会注意到它 =)…
访问演示页面，打开 Firebug，并修改黑色阴影框的 CSS，使用 .33 作为 RGBA 中的 alpha 值。
我在 Firefox 中很难区分它们。
这是一个很好的讨论。
我希望 CSS3 能添加混合模式。HAR!
我尝试了这个，得到了相同的结果，在我的眼中它们无法区分。
虽然我们可以争论使用色调阴影可以控制更精细的细节，但对于我们大部分日常工作来说，我认为黑色就可以了。
克里斯，很棒的文章，这绝对是需要讨论的事情！
作为一个艺术家，我永远不会用黑色来做阴影。这几乎是艺术中的一个经验法则。你会使用你正在使用的颜色的深色调，甚至与它的互补色（即色轮上的对面颜色）混合。因此，在使用 CS4 等时，我会坚持使用相同的规则。
名字应该是“Heather”。
完全同意。互补色是关键，这是很多人都不知道的。
因为现在我在设计时基本上一直使用黑色作为阴影。还没真正想过你的方法。
在看到你演示中的对比后，我不得不说色调阴影看起来确实好多了。
也非常喜欢阅读评论区里的讨论。
克里斯，好文章。所有设计师都应该知道这一点，但提醒一下也不错。另外，黑色可以使用，但只有在灰色背景时。我同意在 Photoshop 中使用“正片叠加”和黑色阴影可以达到类似的效果。
在我看来，克里斯，我认为使用黑色或深灰色更好，不仅仅是因为维护问题，还因为我相信你通过减少白色或增加黑色来使色调变暗，并调整其不透明度以适应。在 Photoshop 和 CSS 中，我们都可以很好地控制不透明度，因此我们可以根据需要使阴影变得微妙或鲜明。我并不反驳你的建议，只是我的意见不同。
从你的演示中，我必须说我确实更喜欢色调阴影的外观，但我相信调整黑色阴影的不透明度可以使结果更均匀？
不过这是一篇很棒的文章，我们需要更多能让我们思考的文章，而不是像 Smashing Magazine 那样被强加于我们。
从物理学的角度来说，黑色是光线（光子）的缺乏。
所以，无论谁告诉你“它们是它们所处之物变暗的版本，因为光线较少”，都是有点错误的。更准确的说法是“它们是位于顶部之物的黑色（无光）版本，但它们与背景颜色混合，因为有些光从侧面穿过，使黑色更柔和 - 更不透明”。
那么阴影到底是什么？它是一个黑色物体，是由物体后面的光线缺乏引起的，它阻止光子穿过，只是因为物体两侧的光线（纯白色）穿过而变得柔和，与黑色阴影混合使其看起来更不透明。
正如有人非常正确地指出的那样，在演示中，你为两种色调（黑色和背景阴影颜色）设置了相同的不透明度，这显然是错误的。尝试用 Firebug 修改它并降低黑色盒子阴影的不透明度，它应该 - 在某个较低的不透明度 - 具有完全相同的效果。
人们在艺术课上被教导不要用黑色来做阴影，因为在我看来，很难控制有形颜料的不透明度。
想想看，从硬核物理学的角度来说，使用黑色+不透明度来做阴影绝对更准确地反映了自然界是如何做到的。
Vassilis，你假设问题中的光线是纯白光，这在硬核物理模型中可能是真的，但在现实世界中很少如此。
看看阳光明媚的下午雪上的阴影。它们是黑色的吗？根本不是，它们通常是蓝色的。为什么？问问你自己阳光的颜色是什么，然后是什么颜色与它相反。
自然的阴影总是可以通过使用与光线颜色相反的颜色来实现，并与阴影落下的表面的颜色混合。
使用黑色做阴影是错误的吗？只要假设问题中的光源是纯白色的，那就没有错。这个假设的问题在于，在大自然中，我们很少遇到没有被过滤掉某些光谱区域的光线。
基于黑色的阴影并不错误，它们只是不自然。印象派发现了这个小窍门。比较雷诺阿和伦勃朗，你就会明白谁更了解自然光。
在设计中使用丰富的阴影可能是使你的设计占优势的关键因素；它是一个没有人会刻意指出但会让他们说“这个感觉更好”的小细节。
在网页设计中，我发现 RGB 可以很好地让黑色在任何颜色上看起来都很不错。而在印刷中，CMYK 就不喜欢这样！你有没有注意到那些看起来不自然的阴影？这就是原因所在，在印刷中，较浅的黑色调看起来不自然。
所以我想这取决于个人喜好，在网页中可以，但印刷应该始终使用比背景颜色更深的色调！
我做了其中一位评论者提到的：在 FB 中将不透明度更改为 .33。我可以看到区别。无论如何，色调阴影更逼真。问题是：我盯着它看，一边修改它，所以当然我会注意到。我是那个设计这个东西的时候很较真的人。大多数人呢？完全没有注意到这些，也永远不会注意到。如果你有几种颜色和几种阴影，那就使用色调。如果你有大量的阴影样式（那么你的设计就错了！），并且你必须做出大量 CSS 更改才能采用这种方法，而且你很懒，那么就使用低不透明度的黑色或深灰色（#2D2D2D）。
另一方面。我看到有些人评论说，仅仅向颜色中添加黑色就能使它变暗，因此使用黑色是完全可以的。理论上，这听起来很合理，但实际上，你希望尝试尽可能少地向颜色中添加黑色以使其变暗。在印刷中，添加黑色会使任何颜色看起来比电脑上暗得多，因此最佳做法是添加其他颜色来创建相同的色调，从而在打印时获得正确的颜色。
认为这对你们中只关注网页设计的人会有所帮助。
感谢你的这个有用的小贴士。我刚刚意识到一个错误。
在 Safari 中看不到任何阴影……看起来你添加了 -moz box-shadow 规则，但没有添加 -webkit 版本……
直到我启动 Firefox，我才明白到底是怎么回事……
这样更改黑色版本的不透明度
box-shadow: 0.36
background: 0.06
text-shadow: 0.5
我再也无法区分两者。这并不意味着黑色总是正确的选择，但我认为这并不是你正在寻找的证据。
我按照你的建议修改了 Ian 的值，我仍然可以明显地看到区别。
我用吸管工具在阴影的第一个像素（底部）拾取了两种阴影，得到了这些值（在我按照你的建议修改了不透明度之后）。
蓝色阴影：r80 g160 b156 – 黑色阴影 r92 g154 b154
色调阴影中明显更蓝。在 Photoshop 中并排比较，黑色阴影更“脏”。
有趣的是，我在文本阴影中没有看到那么大的区别。我认为这是因为它太小了。
在印刷中，我一直使用色调阴影，或者在黑色阴影上使用“正片叠加”混合模式 - 这实际上会改变阴影的颜色值以充当底层图层的色调。
我认为在网页上，你可以在像文本行这样的小东西上使用黑色阴影，但像那些 div 这样较大的东西需要色调阴影。
如果你要更改背景颜色，并且你正在使用黑色阴影，无论如何你都必须根据不同的颜色调整不透明度，所以为什么不也更改颜色呢。
只需使用黑色，设置为“正片叠加”，并降低不透明度以取悦眼睛。（有点押韵）
EasyPeacey！
:)
来自德国的问候，
Jo
我同意 Chris 的观点。在美术学校，我的色彩老师经常会因为有人用黑色来制作阴影而对他们大喊大叫。阴影通常是光源的互补色。例如，如果外面阳光明媚且温暖，阴影会呈现非常冷的颜色。然而，在网络上，实际上并没有特定的光源。黑色可能没问题。但是，如果你想为你的网站添加一些额外的氛围，使用暖色和冷色并完善阴影肯定会改变感觉。
嗯...
@Jo: 之前说过，css 中没有 'multiply' 属性。
我认为人们不能像自然界那样思考。自然界拥有所有颜色，而屏幕只拥有 R、G 和 B 三种颜色。屏幕只是将这些颜色组合得足够小，以至于人眼无法区分。对吧？也许我错了，我只是一个编码人员，对 css 并不了解。
那么，当你在屏幕上显示 0,0,0 时，屏幕到底做了什么？它显示的是“无红色”，“无绿色”，“无蓝色”。而不是“黑色”。如果它显示的是 255,255,255，那它也不是显示白色。
如果我添加一个 css 层，它的颜色为“无红色”，“无绿色”，“无蓝色”，并且带有任何不透明度，它会怎么做？坦率地说，我不完全清楚，但我只能改变这三个值。我想它们会以相同的方式改变，例如，200,200,100 与 0,0,0,0.5 的叠加会变成 100,100,50。
因此，如果你知道不透明度的算法，而这是设计师的工作，那么你应该能够用黑色设置阴影。深色阴影用黑色，浅色阴影用灰色。
灰色就像物体周围（或其后面）散射的光更多，因为来自其他方向的光更多，而不是来自光源的光。灰色会包含白色，因为灰色介于黑色和白色之间。
嗯。但这意味着灰色只是黑色不透明度的降低，对吧？好吧，我卡在这里了 :) 哦，不。100% 黑色是“下面所有像素都变为黑色”。50% 黑色可能是“一半像素变为黑色”，或者“所有像素下面失去 50% 的亮度”。127,127,127 黑色的 100%（也就是灰色）包含了 255,255,255 的 50% 和 0,0,0 像素的 50%。这可能是黑色阴影和灰色阴影之间的区别。
如果您发现我错了，或者您对此有更多想法，请告诉我。
哦，对了！
谢谢！
太棒了！
我通常会在 Photoshop 中先用黑色阴影，然后降低不透明度来获得背景色的深色阴影。然后采样该颜色，并获取 CSS 的十六进制代码 :-)
着色阴影只是另一种保持设计和谐的方式。上个月，我做了一个彩色投影阴影的小实验。它在我的首页上。很高兴看到我们这些网络头脑也同意这一点。不过，我期待阅读更多评论；这里的内容很棒！
对于网站，你会想使用黑色，对吧？CSS 的目的在于你无需为每个部分的每个图像设置自定义内容。如果你有不同的背景，并且想要一个可以快速打开和关闭的阴影，那么一次设置它，而不必担心它，将是最好的选择。
@Bianca
是的，就是这样，它就是互补色
例如：树干在闪闪发光的白色雪地上会投下什么颜色的阴影？
因为太阳是黄色的，所以它的互补色会呈现出一种 - 类似于？ - 蓝色。
还有：暖色光源 - 冷色阴影
冷色光源 - 暖色阴影
... 但这更适合绘画 :)
是的，计算机中没有冷色或暖色光源（准确地说），设计师能做的就是给它一种艺术的感觉。模仿我的窗户在白天投下的阴影，或是在几年中的阴影 - 冬天、夏天等等 - 会是一段令人兴奋的旅程，哈哈！
我一直使用黑色，但现在用色调来实现自然效果是有道理的。
如果更改了原始色调，而你没有使用 CSS3 来制作阴影，我可以理解这会很麻烦。
哇，我没想到这个主题会引发如此热烈（且科学的）讨论。Chris，又一篇很棒的博文。我喜欢能让人思考的主题。
我个人更喜欢浅色。所以我不会使用黑色背景。
虽然思考这个问题很有意思。
如果你想要在白色背景上添加投影，怎么办？我认为这种方法行不通，因此你必须使用黑色。
已经说了很多，但我还是想插一句（绘画学士学位/20 多年印刷设计经验/5 年网络经验）...
1) 使用 css 制作阴影没有对错之分。如果跨越一个多色元素，可以使用黑色%。如果在纯色背景上，可以使用阴影*。最终取决于你根据想要的样式和技术考虑做出选择。
2) 使用颜料时，（减色法颜色模型） 黄色、红色、蓝色被认为是原色。在颜色中添加白色会产生色调；添加黑色会产生阴影。混合互补色（色轮上的对立色）会降低颜色的饱和度/亮度/色度。现实的阴影会降低饱和度（色度）和亮度（明度）。现实的渲染还包括反射光。色彩和谐可以通过在每种颜色中混合少量的其他调色板颜色来实现。
3) 印刷类似于绘画，也是减色法。但是，除非使用自定义油墨，(例如 PMS) 颜色是视觉上混合在页面上的 CMYK 点，与原生艺术文件分离。根据艺术作品，阴影可以通过添加%黑色 (K) 或互补色等来构建。但它们仍然会在印刷时被分离成 CMYK 点。
4) 计算机颜色 RGB 是一种加色法模型，可以说它是最完整、最可控的……然而……最终还是取决于如何构建阴影；阴影覆盖什么；带有阴影的元素是否在其他地方使用等等。
我个人已经用两种方法创建了阴影：使用颜色的深色阴影和使用%黑色。我认为 PSD 默认的 75% 对于大多数应用来说太浓了（当我保存 PNG 文件时）。对于 CSS3，我设置了一个阴影类，可以将其应用于元素。在这种情况下，我使用%黑色，这样元素覆盖的颜色就不会成为一个因素。
Catherine，你阐述得很好，感谢你的意见！
我从这些精彩的评论中，确实改变了我的观点。我仍然不确定是否可以像有些人建议的那样，使用黑色不透明度复制出完全相同的阴影颜色。能够看到一些关于最终可能实现的 RGB 值的浏览器数学运算将很酷，这些值是从一个 RGB 值开始，然后在上面添加透明黑色。我仍然感觉，与使用阴影相比，颜色可能性范围仍然有限。（你在评论中没有反驳，我只是在这里想事情）。
谢谢，Chris。没有，我没有说。;-) 从数学上来说，当混合超出黑色的 RGB 值时，阴影颜色范围更广。也就是说，我们的眼睛无法区分所有 16 种以上的颜色，而这些颜色是我们可以用数学来描述的。
因此，这取决于感知，以及设计师如何选择描绘光线照射在三维物体上投下阴影的*模拟*。毕竟，我们都知道我们真正看到的是一个二维背光图像！
这有点像是野兽派与立体主义的现代等价物 - 使用十六进制数字。;-)
我在学校里学到的是一样的，但我认为对于网络来说，这有点太死板了。
如果你开始设置不同的阴影颜色，那么你就忘了为什么 CSS 如此强大。它让我们的生活（包括未来的维护）变得更容易。这与懒惰无关。
你只会让自己的生活更难一点，而 Joe Bloggs 真的不会注意到（或在意）它是黑色还是更深的蓝色阴影。
如果你的元素跨越两种不同的颜色怎么办？你选择什么阴影？你会选择黑色并降低不透明度；)
艺术是固定的，而网页设计不是。
顺便说一句，非常好的讨论 =)
Jenna：我会使用一种去饱和的深蓝色，并使用 alpha 来跨越两种不同的颜色。蓝色阴影总是会感觉更自然，因为它基于我们主要光源（太阳）投射的阴影。
哇，你说得真好。感谢你的总结，我之前并没有认真思考过阴影的着色问题。非常感谢，Chris。
那么网站右上角那个漂亮而闪亮的 RSS 按钮上的阴影呢？；)
哈哈，在现实生活中，黑色不是一种颜色。
由于光线不足，它变成了黑色，所以如果颜色变暗，你可以说它正在变黑，因此它是一样的。
使用黑色或原始颜色作为阴影的自由，是设计与现实生活相对立的地方。
在你的例子中，我不会说谁对谁错，它们只是不同类型的阴影，得益于技术 =D。
正如许多人已经说过的那样……油漆与不透明度层是不同的东西。在颜色上面添加一层低不透明度的黑色，更类似于在油漆颜色中添加一点黑色并混合在一起，以创建一个色调。油漆工不会储存所有已知的色调和色度，他们会选择自己喜欢的，并且乐于使用的颜色，如果这些颜色不适合工作，他们有时会将颜色混合在一起以创建一种新颜色，然后有时会调色或调暗以使其符合要求。
因此，如果我们将油漆作为类比，那就相当于说要获得逼真的阴影，油漆工需要手头有一管完全合适的色调。但事实并非如此，他们会使用他们正在使用的颜色并添加黑色。;-)
无论如何，添加黑色以使色调变深，或者恰好拥有一管完全“正确”的色调，最终结果都将相同。对于网页也是如此。使用色调的方法当然有效，但使用黑色也同样有效。
Greg
在第一段中，我的本意是在开头使用“色调”而不是“色度”。
Chris，有没有可能在你的评论区添加一个5分钟的自我编辑功能？哈哈
我个人只是将它保留为黑色，并在它位于颜色之上时使用叠加设置，这样可以创建完美的彩色阴影。当然，这并不总是有效，因为在白色上设置为叠加的黑色投影根本不会显示。
不知道这是否有效，但
如果不行，它就在这里
示例
因此，顶部的框只是一个简单的叠加混合模式，设置为阴影图层样式。但是，正如你所看到的，问题在于，如果它同时位于任何白色之上，它看起来会很奇怪。解决方法是创建图层的副本，将叠加更改为普通混合模式，然后将副本推到白色背景层之上，但位于彩色背景层之下。在更复杂的设置中，我实际上会将样式层与空白层合并，并剪切掉副本层中位于白色之上的部分以产生效果。
为什么不直接降低阴影区域中背景的亮度呢？
你有没有注意到主题和域名？
我想它只是需要说出来。
rgba 来帮助我们！
有时，对背景颜色进行采样会使它看起来更好。有时，我只需要纯黑色。
它看起来并没有好太多……但我喜欢黑色。试试纯黑色。
http://logodesignswork.com
新年快乐
对你来说有效的任何方法都很好。如果你使用光线追踪程序，你实际上会得到光源自动投射的阴影，而不是我们制造的“虚假”阴影。
然而，在现实生活中，阴影是缺乏光线，它是黑色的，除非有：来自其他方向的填充光线，物体上的反射，物体发出光线，或者物体半透明。
在 Photoshop/Gimp/Inkscape 中，使用图层对于大多数情况来说都很好。
Chris
我一直使用灰色来制作阴影。我必须尝试对背景颜色进行采样。感谢你的提示。
在现实生活中，阴影会受到环境光的照射。因此，这个星球上阴影最常见的颜色是略带蓝色的，因为它会被来自蓝天的一小部分光线填充。
然后，你会有部分直接光线反射在表面上，并再次反射在物体的背面，这也对阴影的颜色有所贡献。如果主光线特别亮，并且物体靠近后表面，这种效果甚至可能比环境光更强。
所以，这非常复杂。
你建议使用更暗、更饱和的背景颜色，这往往会给人一种周围环境光与表面颜色相同的强烈颜色印象。换句话说，感觉就像是在一个青绿色的房间里看一面青绿色的墙。
我认为你大多数观点都是错误的；阴影通常不会比周围表面更饱和。从一般意义上说，使用黑色是最真实的。但是，为了真正准确，你必须考虑许多其他因素。
很棒的文章，我之前从来没有想过这个问题……但当然，阴影并不完全是黑色的……;-)
谢谢
如果 CSS 是一门真正的语言，具有变量、对象、函数等，我们就可以根据阴影下方的实际内容动态定义阴影。
人们可以在 Javascript 中做到这一点，但它应该在 CSS 中，因为这是样式。
另一个选择是完全放弃 CSS，并用用 Javascript 编写的领域特定语言 (DSL) 替换它。一个 home.css.js 文件将由 DSL 解释以动态地为页面设置样式。