# Frontend UI Design Morandi Color Scheme

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

- Skill: `dawnmoon1542/frontend-ui-design-morandi-color-scheme` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dawnmoon1542/frontend-ui-design-morandi-color-scheme`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dawnmoon1542/frontend-ui-design-morandi-color-scheme/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: DawnMoon1542 (https://skillmd.com/u/dawnmoon1542)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/dawnmoon1542/frontend-ui-design-morandi-color-scheme

---


# 前端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；对比曲线使用灰绿或暖强调，数量控制在少量。

---

### 交付检查清单

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

---

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

```css
: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;
}
```