DawnMoon1542 前端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;
}