frontend-ui-design-morandi-color-scheme

name	frontend-ui-design-morandi-color-scheme
description	前端UI设计莫兰迪配色方案。在界面中形成低饱和、偏灰、层级清晰的统一观感，兼顾阅读性与氛围感，适用于品牌型与内容型产品界面。

前端UI设计莫兰迪配色

关键特征

1. 灰度统一

所有颜色加入灰度后再入场，避免高纯度色造成跳脱。

2. 明度分层优先于色相对比

以“浅底、浅卡、分割、正文、强调、深色锚点”建立层级，再用少量暖冷点缀增强识别。

3. 暖冷均衡

蓝灰系负责理性秩序，粉棕系负责温润情绪，灰绿系负责自然稳定，深灰黑负责收束与权重。

---

配色流程

步骤 1：先定“灰白底盘”

选 2–3 个近白与浅灰作为页面背景与卡片底色，保证内容承载能力。

步骤 2：建立“中灰结构”

选 2–3 个中灰用于边框、分割线、禁用态、次级文字，使界面有骨架。

步骤 3：加入“冷主色”与“暖强调”

冷主色用于主按钮、链接、选中态；暖强调用于高亮、提醒、标签点缀。

步骤 4：补齐“深色锚点”

深蓝灰或深炭灰用于标题、关键数值、导航选中，稳定视觉重心。

---

UI Token 映射

中性色

用于背景、卡片、分割、文字层级

• BG 页面底色：近白、奶灰
• Surface 卡片底：更暖的浅米灰
• Border 分割线：浅中灰
• Text 主文字：深蓝灰或深炭灰
• Text 次文字：中灰蓝或中灰

品牌与状态色

用于主操作、提示、标签

• Primary 冷主色：雾霾蓝、钢蓝
• Accent Warm 暖强调：粉橘、陶土
• Success 温和成功：鼠尾草绿、苔绿
• Warning 温和警示：沙米、卡其灰
• Danger 温和错误：低饱和砖红棕

---

推荐色板（从给定样本抽取的稳定组合）

Neutral 底盘

#eeebe6 #e1d3ca #e0e2e8 #d7dddd #c0c2bd

Text 文字与锚点

#61728d #768393 #6a5d57 #4d423e #332d2d

Primary 冷主色

#aec1e3 #aab7c8 #8592a3 #61728d

Accent Warm 暖强调

#f0af92 #daab9f #c88a7b #b7715f

Success 灰绿系

#b0c2bb #99b0a0 #697b6d #5c7561

---

组件使用要点

按钮

主按钮使用 Primary；悬停与按下优先通过明度变化实现，色相变化幅度保持克制。 次按钮使用浅底 + 边框中灰，文字采用深色锚点。

标签与提示

标签底色使用暖强调的浅阶，文字使用深炭灰；提示条使用灰绿或灰蓝的浅阶更耐看。

图表

网格线与辅助线使用 Border 中灰；主曲线使用 Primary；对比曲线使用灰绿或暖强调，数量控制在少量。

---

交付检查清单

层级：背景、卡片、分割、正文、标题、强调均可一眼区分 统一性：页面中高饱和色占比极低，整体灰度一致 对比度：关键文字与底色对比清晰，深色锚点覆盖标题与核心数值 点缀：暖强调仅用于关键信息与引导，面积占比保持轻量

---

可直接落到代码的变量示例

:root{
  /* Neutral */
  --bg: #eeebe6;
  --surface: #e1d3ca;
  --border: #c0c2bd;

  /* Text */
  --text: #332d2d;
  --text-muted: #61728d;

  /* Brand */
  --primary: #61728d;
  --primary-soft: #aec1e3;

  /* Accents */
  --accent-warm: #f0af92;
  --accent-warm-deep: #b7715f;

  /* Status */
  --success: #697b6d;
  --success-soft: #b0c2bb;
}