单色设计技能实战：从色板生成到CSS变量落地

最近设计圈讨论比较多的是妍妍老师发布的一套 Mono-color Design Skill也就是单色设计技能。这套方法的核心思路非常直接把设计方案从多色配色收敛到“单一色相 明度层级”用颜色数量换设计秩序。它不依赖某个特定软件不要求手绘能力也不吃显卡配置真正重要的是你对色相、明度、饱和度、面积比例的控制能力。本文不打算把 Mono-color Design Skill 当成一个概念来聊而是把它拆成一套可以落地的设计流程。你会看到单色设计为什么值得做、色板怎么生成、在 Figma / Photoshop 里怎么建样式、前端代码里怎么用 CSS 变量接住这套体系、批量产出单色素材时用什么思路以及常见的翻车原因怎么排查。如果你是 UI 设计师、前端工程师、做数据可视化或者经常要用 AI 出图统一风格的内容创作者这篇文章可以直接收藏。先给结论单色设计不是偷懒它是用约束换一致性用明度换层次。下面展开讲。1. 核心能力速览可以把 Mono-color Design Skill 理解成一套“单色设计方法论 实操流程”它输出的不是某个固定模板而是一套可以反复使用的色彩系统构建方式。能力项说明技能类型设计方法论配色体系、明度层级、界面应用核心原则固定单一色相用明度 / 饱和度 / 面积比例构建层次工具要求Figma、Photoshop、Illustrator 均可纯前端场景用 CSS 变量也能实现硬件门槛无特殊要求普通办公电脑即可主要输出单色色板、Design Token、界面组件配色方案、批量素材风格模板批量任务可通过脚本批量生成色阶、批量调整素材色相、批量输出预览图适合场景UI 设计、数据可视化、PPT 排版、暗黑模式、AI 出图统一风格难度中低关键是理解明度阶梯和对比度控制这套体系能不能用不看软件不看硬件看你对“色相固定之后层级从哪里来”这个问题的理解程度。想清楚这一点后面所有步骤都是执行层面的问题。2. 为什么单色设计会形成一套独立技能多色配色时设计师天然会依赖“颜色不同”来区分信息。标题用红色、正文用黑色、辅助信息用灰色、强调按钮用蓝色这是最常见的信息层级表达方式。但颜色一多问题也随之而来饱和度不一致、色相冲突、品牌色被淹没、不同屏显色差被放大。每次配色都要重新做平衡而且很难沉淀成可复用的规则。Mono-color Design Skill 的做法是反过来把颜色数量砍到只剩一个色相让层次完全由明度和饱和度承担。这样有几个明确好处第一决策成本降低。你不需要再反复思考“这个蓝色和这个橙色搭不搭”只需要控制同一个色相在不同明度下的表现。色板生成可以半自动化后面第三部分会给具体脚本。第二一致性天然成立。单一色相本身就是最强的风格统一点。品牌色、背景、正文、边框、图表全都来自同一个色相阶梯界面会天然形成“一个整体”的感觉而不是多个孤立色块的拼接。第三信息层级没有被削弱只是换了表达方式。多色设计里用“色相差异”区分信息单色设计里用“明度差异”区分信息。深浅对比、面积对比、留白对比都能承担层级划分。对于数据可视化、后台看板这类高信息密度场景单色体系尤其适合用来建立“主层次 次层次 辅助信息”的阅读顺序。第四技术实现更简单。前端落地时一套色阶可以映射成一组 CSS 变量暗黑模式切换只需要整体调整色阶的亮度范围。相比多色系统单色系统的 Token 数量更少交接更顺畅。当然单色不是万能的。需要强语义区分的地图、多分类对比报表、儿童向大面积多彩设计这些场景不适合强行单色。更准确的说法是单色设计适合拿来建立品牌感和秩序感不适合拿来表达复杂分类信息。3. 建立可复用的单色色板Mono-color Design Skill 的第一步通常是确定一个主色相然后围绕这个色相生成完整的明度阶梯。这里不建议全部手工调色推荐用 HSL 模型来做把色相固定只调整饱和度和亮度。以蓝色系为例主色相 H 固定在 210 附近从接近黑色的深蓝到接近白色的浅蓝生成一组 10 级色阶。表意色只是为了演示实际项目中你可以替换成自己的品牌色。色阶名称HS%L%预期用途Primary/950210708近似黑背景、深色底Primary/9002107514深色文字、深色区块Primary/8002107522标题、侧边栏Primary/7002107032主要文字、图标Primary/6002106545主按钮、强调文本Primary/5002106055品牌主色、链接Primary/4002105566次级强调、图标底Primary/3002105076边框、分隔线Primary/2002104586浅底色、标签底Primary/1002104094页面浅背景Primary/502103598极浅背景、悬停底这里的关键点不是记住某个具体数值而是理解“0 - 100 的 L 值分布决定了整体画面是明亮还是沉稳”。如果产品走清爽风格背景层应该集中在 L 值 90 到 98 的区间如果走沉稳风格背景层可以拉到 L 值 15 到 25 的区间。同一个色相靠调整明度分布就能得到气质完全不同的两套界面。想快速生成这类色阶可以用一段简单的 Python 脚本通过colorsys输出 CSS 变量或者 JSON 色版。下面这段脚本可以帮你快速产出一套从深到浅的单色阶import colorsys def hsl_to_hex(h, s, l): r, g, b colorsys.hls_to_rgb(h / 360, l / 100, s / 100) return #{:02X}{:02X}{:02X}.format( int(r * 255), int(g * 255), int(b * 255) ) def generate_scale(hue, saturations, lights): scale {} for name, s, l in zip( [950, 900, 800, 700, 600, 500, 400, 300, 200, 100, 50], saturations, lights ): scale[name] hsl_to_hex(hue, s, l) return scale hue 210 saturations [70, 75, 75, 70, 65, 60, 55, 50, 45, 40, 35] lights [8, 14, 22, 32, 45, 55, 66, 76, 86, 94, 98] scale generate_scale(hue, saturations, lights) for name, hex_color in scale.items(): print(fPrimary/{name}: {hex_color})这段代码不依赖第三方库直接用 Python 自带的colorsys就能跑。你需要做的只是把 H 值换成品牌色对应的色相再根据界面气质调整 S 和 L 的分布。生成结果可以直接粘进 Figma、导出到 CSS或者作为后续批量出图的统一色板。4. 在 Figma / Photoshop 里落地单色色板拿到色阶之后下一步是把它变成设计工具里可复用的“样式系统”而不是每次手动填色。4.1 Figma 中建立颜色样式Figma 里推荐把色阶建成 Color Style并采用清晰命名方便后续组件引用和前端对齐。操作路径是右侧面板选中一个矩形设置填充色后在“Style”区域点击“Create style”然后命名为Primary/500这样的格式。重复操作直到整个色阶都进入样式库。命名规范很关键。建议使用“语义 数值”的方式比如Text/Strong、Text/Secondary、Border/Default、Background/Page、Brand/Primary。不要使用“浅蓝”“深蓝”这类容易产生歧义的名称因为色阶数字是唯一的团队协作时不会出现“你用的蓝和我用的蓝不一样”的争议。建好色板之后直接把组件的填充、边框、文字颜色引用到这些 Style 上。这样后续想微调色相只需要改 Color Style所有引用到该样式的地方会同步更新。4.2 Photoshop 中制作单色调色板Photoshop 里的做法更偏素材处理。如果要做单色风格的海报、Banner 或封面建议先建立色板预设。打开“色板”面板点击右上角菜单选择“预设管理器”把上面生成的一组色阶以.aco格式导入这样在整张画布上都能取到同一套颜色。处理图片素材时可以先用“色相/饱和度”调整图层把“色相”滑块拖到目标色相区间再降低“饱和度”到合理范围。这样做比直接“去色 蒙版”更可控因为你能保留一定的色彩冷暖变化而不是完全变成灰度图。更稳妥的判断是先把饱和度降到 15 到 25再统一色相最后用曲线压出明度层次。批量处理时这些操作可以录制成 Photoshop 动作批量应用到整个文件夹的素材图上。4.3 导出 Design Token为了让设计和前端协作顺畅建议把色板导出成 JSON 格式的 Design Token。Figma 目前原生支持变量的导出你也可以手动维护一份 JSON。下面是一份最小示例{ color: { primary: { 50: #F0F7FE, 100: #D9E9FA, 200: #B3D2F5, 300: #85B5EE, 400: #5595E5, 500: #2E73D6, 600: #1F5FB8, 700: #194B91, 800: #13396C, 900: #0C2649, 950: #071731 } } }4.4 局部调整与导出格式除了整组导入也可以按需抽取局部色板直接用于项目。上方 JSON 是通用结构不同工具导入时字段格式可能不同实际使用中可在 Figma 变量面板里花少量时间建立映射或导出后再按目标结构做一次转换。这个转换用脚本做最省事后面第 7 节会给出批量替换的思路。5. 界面设计的完整执行流程色板就位后真正体现 Mono-color Design Skill 价值的是“应用到界面”的过程。建议按以下步骤走每一步都对应一个明确的验证点。5.1 确定主色相和基础明度范围先确认品牌主色是什么色相。如果项目没有品牌色可以从产品气质反推科技感产品可以落在蓝紫色相区间偏温暖的产品可以落在橙褐色相区间内容社区类产品常用蓝绿色相区间。主色相确定之后整套色阶就固定了。5.2 生成 10 级明度阶梯这里补充说明一下不同工具和设计系统里色阶的分级数量不太一样。常见的有 50/100/200 这种 11 级分法也有 100/200/300 这种独立色阶分法。对于 Mono-color Design Skill 来说建议按实际项目的 Token 规模选择小项目 6 级够用复杂组件库可以铺到 11 级。关键指标是相邻色阶之间要有可感知的明度差尤其在使用文字和背景时一定要保证对比度达标。5.3 分层背景 / 内容 / 强调把界面布局拆成四类元素页面背景、内容卡片、主要文字、强调操作。页面背景用最浅的那一两级比如 Primary/50 或 Primary/100内容卡片用白色或 Primary/50文字层级用 Primary/900 做标题Primary/700 做正文Primary/500 做辅助信息强调按钮用 Primary/600 或 Primary/500配合白色文字。也可以用一层背景色快速查看整体气质不需要把所有层都铺完。验证方法是只看颜色不出线稿看能否通过深浅快速分辨出标题、正文、按钮和背景。如果不能说明明度差不够需要把文字色阶往下压或者把背景色阶往上提。5.4 验证对比度和可读性单色设计最容易出现的硬伤是浅色背景上使用浅色文字或者深色背景上的辅助文字明度不够。写正文颜色之前建议先用对比度检查工具过一遍。按照通用无障碍标准正文文字和背景的对比度尽量不低于 4.5:1大号文字和图形元素可以适当放宽但如果要做达标方案尽量也往 3:1 以上靠。这个环节不建议凭感觉因为不同显示器上同一组色阶的观感差异会很大。5.5 素材统一处理配图、图标、插画如果是从外部拿到的颜色大概率不统一。Mono-color 思路下建议对这类素材做统一处理图标改成单色填充配图加一层半透明主色蒙版或者在“色相/饱和度”里统一色相。这不是把图片变成灰度图而是把图片的色相拉向主色相的邻近区间同时保留明度细节。这一步做完整个页面的“同源感”会立刻提升。5.6 评审与输出最后做一轮完整评审。重点是看三点最深色和最浅色之间是否有足够的跨度强调元素是否在页面中“跳”出来整套界面在不同屏幕亮度下是否出现大面积死黑或死白。确认没有问题后再输出设计标注文件或者上传到 Figma 组件库。6. 在代码层面实现单色主题单色设计交付到前端时最合适的载体是 CSS 变量。C 端的做法是把整个色阶映射成--primary-50到--primary-950这样的变量然后在组件里引用这些变量。这样后续换肤、暗黑模式、局部强调色都能通过改变量实现不需要大范围改动组件代码。下面是一份可运行的 CSS 示例适合直接放在项目根样式中:root { --primary-50: #F0F7FE; --primary-100: #D9E9FA; --primary-200: #B3D2F5; --primary-300: #85B5EE; --primary-400: #5595E5; --primary-500: #2E73D6; --primary-600: #1F5FB8; --primary-700: #194B91; --primary-800: #13396C; --primary-900: #0C2649; --primary-950: #071731; } .page { background: var(--primary-50); color: var(--primary-900); } .card { background: #FFFFFF; border: 1px solid var(--primary-200); } .button { background: var(--primary-600); color: #FFFFFF; } .muted { color: var(--primary-500); }如果是暗黑模式不需要重新设计整套配色只需要把明度阶梯“反转”一下。简单做法是定义一套暗黑模式下的变量覆盖把背景改为 Primary/950文字改为 Primary/50卡片背景改为 Primary/900边框改为 Primary/700。这样界面还是同一套色相体系只是明度分布从“上浅下深”变成“上深下浅”。SVG 图表和图标也建议引入变量控制。图表的主柱、折线、面积填充尽量只用两到三个变量--primary-600做主数据--primary-300做次级数据--primary-50做背景网格。数据多了之后优先用不同明度区分而不是重新引入新色相。这样既保证风格统一也不影响信息读取。7. 批量生成与团队复用单色体系的好处之一是特别适合批量操作。把色板确定下来之后批量生成色板卡片、批量调整素材色相、批量输出不同主题预览图都很容易实现。如果你需要给一组物料的封面批量替换成统一单色风格可以用一段简单的 Python 脚本结合 Pillow 库对整张图片做色相统一处理。下面是思路示例from PIL import Image def apply_mono_tint(input_path, output_path, target_hue210, saturation_factor0.4): 将图片统一到目标色相降低原始饱和度保留明度信息。 img Image.open(input_path).convert(L).convert(RGB) overlay Image.new(RGB, img.size, fhsl({target_hue}, 100%, 50%)) blended Image.blend(img, overlay, alphasaturation_factor) blended.save(output_path)convert(L).convert(RGB)先把图片变成灰度图再叠加一层目标色相saturation_factor控制叠加强度。实际应用到真实项目时建议保留原始图层和设置参数先处理两到三张素材确认效果再批量跑整个目录。批量处理常见的坑是有的图片本身明暗反差很小统一色相后层次感不足这时候需要额外做一次色阶拉伸而不是一味用蒙版。在团队协作层面Mono-color Design Skill 的落地可以拆成三层设计侧维护 Figma Color Style工程侧维护 CSS 变量或 Design Token JSON产物通过 Storybook、文档站点或者简单的静态页面展示。建议在项目启动阶段就把这三层映射关系建立好不要等设计全部做完再补 Token。前端写代码时如果要用 Tailwind 这类原子化框架也可以把色板装进 config 文件。下面是一个 Tailwind 风格的配置片段/** type {import(tailwindcss).Config} */ module.exports { theme: { extend: { colors: { primary: { 50: #F0F7FE, 100: #D9E9FA, 200: #B3D2F5, 300: #85B5EE, 400: #5595E5, 500: #2E73D6, 600: #1F5FB8, 700: #194B91, 800: #13396C, 900: #0C2649, 950: #071731 } } } } }注意这里的色值只是演示用的示意色值实际项目需要用自己生成的那组色板替换。配置好之后页面里写bg-primary-600、text-primary-900就能直接引用单色体系。8. 常见问题与排查方法问题现象可能原因排查方式解决方案文字和背景对比度不足明度差太小用对比度检查工具量化把文字色阶往深压一级或把背景色阶往浅提一级页面层次感弱所有内容挤在一起色阶跨度不够缺少最浅色和最深色观察页面最浅背景与最深文字之间的跨度在色板中增加 50 和 950 两级拉开首尾明度强调按钮不够“跳”按钮色与背景色相相同且明度接近检查按钮色与背景色之间的明度差用 Primary/600 做按钮背景保持 Primary/50导出的颜色和设计稿不一致色彩模式或色域差异检查设计稿是否为 sRGB导出格式是否支持颜色配置统一在 sRGB 模式下设计导出前预览图片素材和整体风格不融合素材本身明暗对比不足或色调过重在统一色相前先做灰度预览先压饱和度和色相再叠加主色蒙版暗黑模式下某些元素看不清暗色背景上使用了过深的文字色在暗黑模式预览下检查文字层级把暗黑模式下的文字色阶切换到 100 到 300 区间色板在 Windows 和 macOS 显示差异大显示器色彩管理不一致在不同设备上做预览对比设计、开发统一使用 sRGB避免使用广色域作为基准单色设计中还有一个很隐蔽的问题同一组色阶在浅色背景上做标题时表现很好但放到深色背景上会显得有点“飘”因为色块周围的亮度变化会影响人对明度的感知。针对这个情况建议在暗黑模式切换时单独微调文字色阶和背景色阶不要直接复用同一套明度值。9. 适用场景与使用边界Mono-color Design Skill 的高频适用场景包括这几类UI 界面设计后台管理、SaaS 产品、移动端工具类 App单色体系能让界面显得干净统一。数据可视化看板、图表、报表用明度区分数据层级比多色图表更容易聚焦。品牌物料Logo 延展、名片、海报单色体系在打印和电子屏上的一致性更高。演示文档PPT 和 Keynote 里使用单色色板页面风格更统一不容易出现花里胡哨的拼接感。暗黑模式单色体系天然适合暗黑模式因为只是明度范围的翻转。不建议强行使用单色的场景主要是这些地图和地理信息可视化多个分类区域往往需要通过色相区分单色会让相邻区域难以辨认。多分类强语义的数据报表比如风险等级、状态变化、涨跌趋势这类场景需要颜色本身承担语义单色做不到。面向低龄用户的界面儿童产品通常需要高饱和、多色相来吸引注意力单色体系容易显得过于冷静。合规方面有一点需要提醒。做单色设计并不意味着对素材使用可以放松商业用途的图片、字体、图标、插画都要确认授权范围AI 生成素材时需要记录生成参数和所用工具涉及真实人物肖像、品牌 Logo、内部数据元件的使用更要先取得授权。单色只能统一视觉风格不能规避版权和隐私问题。10. 总结与下一步妍妍老师发布的这套 Mono-color Design Skill真正值得吸收的部分不是“只用一种颜色”这个结论而是背后的执行逻辑固定色相 - 生成明度阶梯 - 分层应用 - 批量复用 - 代码对接。这个流程把“配色好不好看”这种主观问题拆解成了“明度差够不够、色阶跨度够不够、对比度达不达标”这些可以验证的客观问题。建议你拿到这套方法后先做三件事第一确定一个主色相生成一套不少于 8 级的明度色阶第二在 Figma 或 CSS 变量里建立色板映射第三把目前手头最常用的一个页面按单色体系重新套一遍看差异在哪里。先跑通最小闭环再考虑铺开做组件库和暗黑模式这样不至于一开始就陷入“哪种蓝更好看”的纠结里。最容易踩的坑有两个一是色阶跨度不够导致整页灰蒙蒙一片二是背景和文字的明度差控制不住对比度不过关。这两个问题都可以通过量化检查来规避不需要靠感觉反复调。后续如果想把这套单色体系做得更深入可以继续扩充的方向包括把色板接入 Design Token 自动同步链路、在暗黑模式下做明度阶梯的自动反转、以及配合 AI 绘图工具批量生成同一色相风格的内容素材。单色设计的上限不在于颜色多少而在于你对明度和层次的掌控能力这套能力在任何设计工具里都能复用。