伪拟态化颜色(Neumorphism)核心配色方案-资讯论坛-小武站

伪拟态化颜色(Neumorphism)核心配色方案

伪拟态化(新拟态)UI 的核心是利用柔和的阴影与高光模拟凸起 / 凹陷的物理质感,颜色搭配遵循「低对比度、同色系渐变」原则,以下是适配子比主题的实用配置:
 

 

1. 基础色值(推荐)

 
  • 主背景色#f0f2f5(浅灰,模拟磨砂塑料 / 纸张质感)
  • 主色 / 强调色#6c63ff(柔和紫,作为按钮 / 链接主色)
  • 文字色#333333(深灰,避免纯黑的生硬感)
  • 次要文字#666666(中灰,用于辅助信息
 

2. 阴影与高光(关键)

 
伪拟态化的立体感完全依赖阴影,而非颜色本身:
 
  • 凸起元素(按钮、卡片)
    • 亮部阴影:#ffffff(左上,模拟光源)
    • 暗部阴影:#d1d9e6(右下,模拟投影)
    • 示例:box-shadow: 5px 5px 10px #d1d9e6, -5px -5px 10px #ffffff;
     
  • 凹陷元素(输入框、开关)
    • 亮部阴影:#d1d9e6(右下)
    • 暗部阴影:#ffffff(左上)
    • 示例:box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff;
热评
加载中...
随便看看