Duotone 双色调（Duotone）
Duotone treats the entire interface as a two-ink printing job: photographs are remapped so shadows and midtones become one color and highlights become a second, while UI elements, type, and backgrounds are chosen from the same pair. The result is loud but controlled — a portrait, a product shot, or an album cover reduced to a high-contrast silhouette in, say, deep indigo and hot coral. It borrows from pre-digital commercial printing, but became a dominant web and app look in the mid-2010s when streaming and editorial brands used it to unify disparate photography into one graphic system.
双色调把整个界面当作两色印刷品来处理：照片被重新映射，阴影和中调变成一种颜色，高光变成第二种颜色，而 UI 元素、文字和背景也都从这对颜色里选取。最终效果响亮但受控——一张肖像、产品照或专辑封面被简化成深靛蓝加热珊瑚色的高对比剪影。它借用了前数字时代的商业印刷语言，但在 2010 年代中期成为主流网页和应用风格，当时流媒体和编辑品牌用它把纷繁的摄影素材统一进同一个视觉系统。
Scope: This entry covers the two-color photographic treatment and its extension into UI — the locked two-color palette, the remapped photo, and the editorial layout that lets that image dominate. It is not Pop Art's multi-primary comic vocabulary, nor is it a black-and-white photo with a simple color overlay; the tonal remapping is the defining gesture.
范围：本条覆盖双色调摄影处理及其向 UI 的延伸——锁定的双色板、重新映射的照片，以及让图像占据主导地位的编辑式布局。它不是波普艺术那种多原色漫画词汇，也不是简单叠了层颜色的黑白照片；色调重新映射才是决定性手势。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Two-color photo remapping双色调照片重映射 imagery defining定义特征
Every photograph is reduced to two ink colors: dark tones map to a base such as #0d1b2a or #1a1a2e, and light tones map to a single accent such as #ff6b6b or #00d9ff, preserving facial or object structure without full color.
每张照片都被缩减为两种墨色：暗部映射到 #0d1b2a 或 #1a1a2e 这类深色基色，亮部映射到 #ff6b6b 或 #00d9ff 这类单一强调色，在保留面部或物体结构的同时去掉全彩。
-
Locked two-color palette锁定双色板 color defining定义特征
The entire UI is built from one pair — for example deep navy #0d1b2a + hot coral #ff6b6b, black #0a0a0a + neon yellow #ccff00, or plum #2e003e + electric blue #00d9ff — with no third hue introduced.
整个 UI 只由一对颜色构建——例如深海蓝 #0d1b2a + 热珊瑚 #ff6b6b、纯黑 #0a0a0a + 霓虹黄 #ccff00，或梅子紫 #2e003e + 电光蓝 #00d9ff——不引入第三种色相。
-
Photographic source preserved保留摄影来源 imagery defining定义特征
The visual subject remains a recognizable photograph — a face, instrument, product, or street scene — not an illustration, comic strip, or abstract shape.
视觉主体仍是可识别的照片——人脸、乐器、产品或街景——而不是插画、漫画格或抽象形状。
-
Flat unshaded color fields平涂无阴影色块 surface supporting辅助特征
Buttons, panels, and type sit on solid fills from the two-color pair; depth is created by color contrast rather than gradients, shadows, or textures.
按钮、面板和文字都坐在来自双色板的纯色填充上；深度由颜色对比制造，而非渐变、阴影或纹理。
-
Bold condensed sans type粗重压缩无衬线字体 typography supporting辅助特征
Headlines and labels use a heavy condensed grotesk such as Oswald, Bebas Neue, or Impact, set uppercase with tight letter-spacing — treated as graphic shapes in the two-color system.
标题和标签使用 Oswald、Bebas Neue 或 Impact 这类厚重压缩 grotesk，大写、字距紧凑——在双色系统里被当作图形形状处理。
-
Editorial negative space编辑式负空间 layout supporting辅助特征
Large quiet margins let the duotone image dominate the composition, with the UI reading more like a magazine spread than a dense control panel.
大面积安静留白让双色调图像主导构图，UI 读起来更像杂志跨页，而非密集控制面板。
-
Comic-book outlines and halftones漫画描边与半色调 surface avoid避免
Thick black ink outlines, Ben-Day dots, starburst badges, and multi-primary palettes belong to Pop Art; their appearance breaks the duotone read.
粗黑墨线轮廓、本戴网点、星形爆炸徽标和多原色板都属于波普艺术；它们一出现就会破坏双色调的阅读。
Often confused with: Pop Art最容易混淆：波普艺术（Pop Art）
Duotone双色调（Duotone）
Pop Art波普艺术（Pop Art）
This is duotone because the image stays photographic — a portrait or object remapped to exactly two colors — and the palette is one high-contrast pair, with no thick black outlines, Ben-Day dots, or comic-panel grids.
这是双色调，因为图像保持摄影属性——肖像或物体被重新映射到恰好两种颜色——色板是一对高对比色，没有粗黑轮廓、本戴网点或漫画分格格子。
It would become Pop Art if the photo were redrawn as flat comic panels, the palette expanded to red/yellow/blue/neon, thick #000000 ink outlines were added, and shading was replaced with mechanical halftone dots.
如果把照片重绘成扁平漫画格，色板扩展到红/黄/蓝/霓虹，加上粗黑 #000000 墨线轮廓，并把阴影换成机械半色调网点，就变成波普艺术了。
In code — optional starting points代码写法 —— 可选起点
SVG filter duotone remap
<svg width="0" height="0"><filter id="duotone"><feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/><feComponentTransfer><feFuncR type="table" tableValues="0.05 1"/><feFuncG type="table" tableValues="0.11 0.42"/><feFuncB type="table" tableValues="0.16 0.42"/></feComponentTransfer></filter></svg>\n<img src="portrait.jpg" style="filter:url(#duotone);">CSS-only two-tone card
.card {\n background: #0d1b2a;\n color: #ff6b6b;\n}\n.card__media {\n filter: grayscale(100%) brightness(1.1) contrast(1.2);\n mix-blend-mode: screen;\n background: #ff6b6b;\n}Tailwind utility stack for a duotone hero
<div class="bg-[#0d1b2a] text-[#ff6b6b]">\n <img class="mix-blend-screen contrast-125 brightness-110 grayscale" src="photo.jpg" alt="" />\n <h1 class="font-[Oswald] uppercase tracking-tight text-5xl">DUOTONE</h1>\n</div>Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build this interface in Duotone. Start by locking the palette to exactly two colors: a dark photographic base such as #0d1b2a (deep navy) or #1a1a2e, and a bright accent such as #ff6b6b (hot coral), #00d9ff (electric blue), or #ccff00 (neon yellow). Remap every photograph to the pair using an SVG feColorMatrix + feComponentTransfer filter, or with CSS mix-blend-mode: screen on a grayscale image over a solid accent background. Layout: editorial, with large negative space and one dominant duotone image per screen. Typography: heavy condensed sans — Oswald, Bebas Neue, or Impact — set uppercase with tight letter-spacing (-0.02em to 0.02em); body text in a plain sans at 14–16px. UI surfaces: flat, unshaded color blocks pulled from the two-color pair; buttons can be solid accent on dark base or inverted, with no gradients, shadows, or blur. Use the accent sparingly so it remains the high note. Do not add thick black outlines, Ben-Day dots, starbursts, or a multi-primary palette — that drifts into Pop Art. Ensure the dark base and accent meet at least 3:1 for large UI and 4.5:1 for body text, and provide a reduced-motion alternative if any transitions are used.
用双色调（Duotone）创建这个界面。先把色板锁定为恰好两种颜色：深色摄影基色如 #0d1b2a（深海蓝）或 #1a1a2e，以及亮色强调色如 #ff6b6b（热珊瑚）、#00d9ff（电光蓝）或 #ccff00（霓虹黄）。用 SVG feColorMatrix + feComponentTransfer 滤镜，或把灰度图片以 mix-blend-mode: screen 叠在纯色强调背景上，把每张照片重映射到这对颜色。布局：编辑式，大量负空间，每屏一张主导双色调图。字体：厚重压缩无衬线——Oswald、Bebas Neue 或 Impact——大写、字距紧凑（-0.02em 到 0.02em）；正文用 14–16px 的朴素无衬线。UI 表面：来自双色板的平涂、无阴影色块；按钮可用深色底上的实心强调色或反色，禁止渐变、阴影或模糊。强调色要吝啬使用，才能保持高音效果。不要加粗黑轮廓、本戴网点、星形爆炸或多原色板——那会滑向波普艺术。确保深色基色与强调色在大号 UI 上达到 3:1、正文上达到 4.5:1，并在有过渡动效时提供 reduced-motion 替代。
Accessibility & misuse可访问性与误用
The two-color photo remap can erase information: skin tone, product color, and environmental cues disappear, so never rely on a duotone image alone to identify a person, product, or state. Pair every duotone photo with visible text labels or captions.
双色调照片重映射会抹去信息：肤色、产品颜色和环境线索都会消失，因此绝不要只靠双色调图像来识别人、产品或状态。每张双色调照片都要配可见的文字标签或说明。
Because the palette is deliberately narrow, text contrast can become brittle when the accent is the background color. Test every text-on-color combination for 4.5:1 body text and 3:1 large text, and avoid placing body copy directly over detailed photographic areas even when they are remapped.
由于色板被刻意收窄，当强调色作为背景时文字对比度容易变脆。每套文字与颜色的组合都要实测：正文 4.5:1、大号文字 3:1；也不要把正文直接压在细节丰富的摄影区域上，即使它们已被重映射。
Heavy condensed display type used for headlines reduces word-shape recognition and should be reserved for short words. All functional text — navigation, buttons, form labels, captions — must use a plain sans-serif at readable sizes, and focus indicators must be visible against both the dark base and the bright accent.
标题用的厚重压缩展示字体会破坏词形提示，应只用于短词。所有功能性文字——导航、按钮、表单标签、说明——都必须使用可读大小的朴素无衬线，且焦点指示器在深色基色和亮色强调色上都要可见。
Origin起源
The duotone printing technique — reproducing a photograph with two ink plates, usually black plus a spot color — dates back to early 20th-century commercial offset printing and was common in newspapers, posters, and album covers long before screens. As a digital UI style, it surged in the mid-2010s when editorial and streaming platforms began applying bold two-color treatments to unify large libraries of user-generated photography into one brand system; Spotify's 2015 Year in Music campaign and subsequent brand imagery are widely credited with popularizing the vibrant, high-contrast portrait look that now reads as 'Duotone' in interface design.
双色调印刷技术——用两块印版（通常是黑色加一种专色）复制照片——可追溯到 20 世纪初的商业胶印，在屏幕出现之前就已常见于报纸、海报和专辑封面。作为数字 UI 风格，它在 2010 年代中期兴起，当时编辑和流媒体平台开始用大胆的双色处理把大量用户上传照片统一进品牌系统；Spotify 2015 年的 Year in Music campaign 及其后续品牌视觉被广泛认为普及了这种鲜艳、高对比的人像观感，也就是如今界面设计里所说的「双色调」。