Film Noir 黑色电影（Film Noir）
Film Noir brings the lighting of 1940s detective cinema to the interface: pure black-and-white frames carved by hard shadows, venetian-blind light slats, and drifting smoke. Shadow is not decoration here — it is the subject, swallowing most of the canvas while one harsh source picks out a silhouette or a strip of pavement. On screens it surfaces in film-poster microsites and editorial features that want fatalistic, rain-slicked drama: extreme contrast, deep blacks, and not one drop of color.
黑色电影（Film Noir）把 1940 年代侦探片的打光搬进界面：纯黑白的画面被生硬的阴影、百叶窗投下的光栅和缓缓漂移的烟雾切割开。阴影在这里不是装饰 —— 它是主角，吞掉画面的大部分，只剩一道刺眼的硬光勾出一个剪影或一小段路面。在屏幕上，它出现在电影海报式微站和想要宿命感、雨夜戏剧张力的专题页里：极端对比、深黑，一滴颜色都不放。
Scope: This entry covers the cinematic monochrome lighting treatment — chiaroscuro, cast shadow shapes, smoke, and film grain — applied to web and app surfaces. It is not Duotone's two-ink print remap, not generic dark mode, and not broad 'vintage': a frame containing any hue, or soft even lighting, is not noir.
范围：本条涵盖电影化的单色打光处理 —— 明暗对照（chiaroscuro）、投影形状、烟雾和胶片颗粒 —— 在 Web 和应用界面上的应用。它不是双色调（Duotone）的双油墨印刷重映射，不是泛泛的深色模式，也不是宽泛的「复古」：画面里出现任何色相、或者柔和均匀的打光，都不是 noir。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Hard chiaroscuro lighting生硬的明暗对照打光 depth defining定义特征
One harsh directional source splits the frame into near-pure white (#f2f2f2) and near-pure black (#050505); shadows have crisp edges, almost no midtones, and swallow most of the canvas.
一道刺眼的定向光源把画面劈成接近纯白（#f2f2f2）和接近纯黑（#050505）两半；阴影边缘清晰，几乎没有中间调，并吞掉画面的大部分。
-
Venetian-blind light slats百叶窗光栅 imagery defining定义特征
Parallel bands of shadow rake diagonally across surfaces, faces, and type, cast by off-screen blinds or a window frame — the single most recognizable noir prop.
平行的阴影条带斜向扫过表面、人脸和文字，由画面外的百叶窗或窗框投下 —— 辨识度最高的 noir 道具。
-
Strictly black and white严格只用黑白 color defining定义特征
The palette is achromatic: blacks near #000000, whites near #ffffff, grays only as smoke or grain. A single hue anywhere — even in an accent or focus ring — disqualifies the frame.
配色是无彩色的：黑接近 #000000，白接近 #ffffff，灰色只出现在烟雾或颗粒里。任何地方出现一个色相 —— 哪怕是强调色或焦点框 —— 这个画面就不算了。
-
Silhouetted figures剪影人物 imagery defining定义特征
People and objects read as flat black cutouts against blown-out light — a figure under a lamppost, a profile in a doorway — with identity carried by outline, not surface detail.
人和物读作逆光前的扁平黑色剪影 —— 路灯下的人影、门口的侧脸 —— 身份靠轮廓传达，不靠表面细节。
-
Smoke and haze gradients烟雾与薄雾渐变 surface supporting辅助特征
A soft gray fog drifts through the light beams, softening a few edges and giving the hard shadows something to cut through; usually a slow, barely-moving gradient.
一层柔和的灰雾在光束里漂移，把少数边缘柔化，也给生硬的阴影留出有东西可切的对象；通常是一个缓慢、几乎不动的渐变。
-
Condensed caps serif type窄体大写衬线字 typography supporting辅助特征
Titles set in condensed uppercase serif or slab with tight, tall letterforms and letter-spacing around 0.08–0.14em — like a 1940s theatrical one-sheet or pulp novel cover.
标题用窄体大写衬线或 slab 字体，字形高而窄，letter-spacing 约 0.08–0.14em —— 像 1940 年代的影院海报或 pulp 小说封面。
-
Grain and vignette颗粒与暗角 surface variable可变特征
Fine monochrome film grain and darkened corners push the frame toward period photography; intensity ranges from clean digital to battered reprint.
细腻的单色胶片颗粒加上四角压暗，把画面推向那个年代的照片质感；强度从干净的数字化到翻印多次的旧拷贝不等。
-
Soft even lighting柔和均匀的打光 depth avoid避免
Diffuse shadows, pastel gradients, friendly rounded surfaces, or any color wash — evenly lit comfort is the opposite of noir's harsh directional light.
漫射阴影、粉彩渐变、亲和的圆角表面，或任何彩色罩染 —— 均匀照亮的舒适感，正是 noir 生硬定向光的反面。
Often confused with: Duotone最容易混淆：双色调（Duotone）
Film Noir黑色电影（Film Noir）
Duotone双色调（Duotone）
This is Film Noir because the drama comes from lighting — real cast shadows, light slats, and smoke carving a black-and-white scene — and the palette is strictly achromatic, not two chosen inks.
这是黑色电影，因为戏剧性来自打光 —— 真实的投影、光栅和烟雾把一个黑白场景切割出来 —— 而且配色严格无彩色，不是选定的两种油墨。
It would become Duotone if the shadows were flattened into a print-style tonal remap and the palette locked to two chromatic inks like navy and coral — a graphic print treatment instead of a lit scene.
如果把阴影压平成印刷式的影调重映射，配色锁定为两种彩色油墨（比如藏青加珊瑚红）—— 从「被照亮的场景」变成「图形印刷处理」—— 就变成双色调了。
In code — optional starting points代码写法 —— 可选起点
Venetian-blind shadow slats raking across a surface
.noir-panel { position: relative; background: #0a0a0a; }
.noir-panel::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background: repeating-linear-gradient(115deg,
rgba(0,0,0,.6) 0 14px, transparent 14px 46px);
}Force any photograph into noir
.noir-photo {
filter: grayscale(100%) contrast(160%) brightness(92%);
}Tailwind stack: remapped photo + slat overlay
<div class="relative bg-black">
<img class="grayscale contrast-[1.6] brightness-[.92]" src="photo.jpg" alt="">
<div class="absolute inset-0 pointer-events-none bg-[repeating-linear-gradient(115deg,rgba(0,0,0,.6)_0_14px,transparent_14px_46px)]"></div>
</div>Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build this interface in the spirit of 1940s Film Noir. Canvas: a deep-black stage (#050505–#0d0d0d) lit by a single harsh source — every surface carved into near-pure white (#f2f2f2) and near-pure black with crisp shadow edges and almost no midtones. Venetian-blind slats: overlay key areas with repeating-linear-gradient(115deg, rgba(0,0,0,.6) 0 14px, transparent 14px 46px) so light appears to fall through off-screen blinds. Palette: strictly achromatic — black, white, and smoke grays (#1a1a1a, #6b6b6b, #d9d9d9); zero hue anywhere, including accents and focus rings. Imagery: silhouetted black figures against blown-out light; force photographs through grayscale(100%) contrast(160%); add a slow-drifting smoke gradient plus optional grain and vignette. Type: condensed uppercase serif or slab for titles (letter-spacing 0.08–0.14em); plain light-weight sans for body. Corners 0–3px, no pills. Motion: slow smoke drift and fades only. Avoid: any color, soft diffuse shadows, glass blur, neon glow, rounded friendly shapes. Keep text 4.5:1 against its actual background and honor reduced motion.
按 1940 年代黑色电影（Film Noir）的精神构建这个界面。画布：深黑的舞台（#050505–#0d0d0d），只由一道刺眼的硬光源照亮 —— 每个表面都被切成接近纯白（#f2f2f2）和接近纯黑，阴影边缘清晰，几乎没有中间调。百叶窗光栅：在关键区域叠加 repeating-linear-gradient(115deg, rgba(0,0,0,.6) 0 14px, transparent 14px 46px)，让光看起来像从画面外的百叶窗透进来。配色：严格无彩色 —— 黑、白和烟灰（#1a1a1a、#6b6b6b、#d9d9d9）；任何地方都零色相，包括强调色和焦点框。图像：逆光前的黑色人物剪影；照片一律经过 grayscale(100%) contrast(160%) 处理；加一层缓慢漂移的烟雾渐变，可选颗粒和暗角。字体：标题用窄体大写衬线或 slab（letter-spacing 0.08–0.14em）；正文用朴素的细字重无衬线。圆角 0–3px，不要胶囊形。动效：只有缓慢的烟雾漂移和淡入。避免：任何颜色、柔和的漫射阴影、玻璃模糊、霓虹辉光、圆润亲和的形状。文字对其实际背景保持 4.5:1，并响应 reduced motion。
Accessibility & misuse可访问性与误用
Extreme contrast cuts both ways. White-on-black body text passes easily, but pure #000000 against pure #ffffff causes halation and eye strain for some readers (especially with astigmatism), and gray smoke or slat bands can silently drop local contrast below 4.5:1. Keep body copy on solid near-black, use #d9d9d9 rather than pure white for long text, and never run slat bands across paragraphs without re-testing contrast.
极端对比是把双刃剑。黑底白字的正文很容易达标，但纯 #000000 对纯 #ffffff 会让部分读者产生光晕和视疲劳（尤其有散光的人），而灰色的烟雾和光栅条带会悄悄把局部对比度拉到 4.5:1 以下。正文放在实的近黑底色上，长文用 #d9d9d9 而不是纯白，别让光栅条带扫过段落，除非重新测过对比度。
Silhouette imagery destroys information: faces, identities, and product details disappear into black cutouts. Never rely on a noir image alone to identify a person, product, or state — pair every image with a visible text label, and give icons real shapes instead of shadow abstractions.
剪影图像会摧毁信息：面孔、身份和产品细节全消失在黑色轮廓里。永远不要只靠 noir 图像来识别人物、产品或状态 —— 每张图都配上可见的文字标签，图标用真实的形状而不是阴影抽象。
Smoke drift, light flicker, and grain animation must honor prefers-reduced-motion with a static fallback. Decorative grain or slat overlays should carry pointer-events: none and aria-hidden, sit above imagery but below interactive controls where possible, and never intercept clicks or reduce the visibility of focus indicators.
烟雾漂移、灯光闪烁和颗粒动画必须响应 prefers-reduced-motion，提供静态兜底。装饰性的颗粒或光栅覆盖层要带 pointer-events: none 和 aria-hidden，尽量压在图像之上、交互控件之下，绝不拦截点击，也不降低焦点指示器的可见性。
Origin起源
Film noir's classic Hollywood cycle runs from The Maltese Falcon (1941) to Orson Welles's Touch of Evil (1958); the look itself descends from 1920s German Expressionist cinematography, carried to Hollywood by émigré directors and cameramen who fled Europe in the 1930s. French critic Nino Frank coined the term 'film noir' in 1946. As an interface style it never became a platform language — it recurs wherever cinema nostalgia is the brief: movie-poster microsites, streaming editorial, game splash screens, and award-season campaigns.
黑色电影的好莱坞经典周期从《马耳他之鹰》（1941）延伸到奥逊·威尔斯（Orson Welles）的《历劫佳人》（1958）；这套视觉语言源自 1920 年代的德国表现主义摄影，由 1930 年代逃离欧洲的流亡导演和摄影师带进好莱坞。法国评论家尼诺·弗兰克（Nino Frank）在 1946 年造出「film noir」一词。作为一种界面风格，它从未成为平台语言 —— 但只要命题是电影怀旧，它就会反复出现：电影海报式微站、流媒体专题、游戏启动页和颁奖季宣传活动。