无需登录 数据私有 本地保存

新拟态调色板 - 根据背景色自动生成凹凸色

11
0
0
0

新拟态调色板

选择背景色,自动生成新拟态(Neumorphism)风格的高光色与阴影色,实时预览凹凸效果。

#E0E5EC HSL(210,17%,88%)
预设背景色
数值越大,高光与阴影的对比越强
★ 经典新拟态光源(左上角)
凸起 Raised
凹陷 Sunken
凸起圆形
凹陷圆形
#FFFFFF
HSL(210,17%,98%)
#A3B1C6
HSL(210,17%,68%)
/* 凸起效果 (Raised) */ box-shadow: -8px -8px 16px 0px #ffffff, 8px 8px 16px 0px #a3b1c6; /* 凹陷效果 (Sunken) */ box-shadow: inset 8px 8px 16px 0px #a3b1c6, inset -8px -8px 16px 0px #ffffff;

常见问题与知识点

新拟态(Neumorphism,又称Soft UI)是一种UI设计风格,其核心特征是元素与背景使用相同或相近的颜色,通过浅色高光阴影深色凹陷阴影的组合来营造立体感。它介于扁平设计和拟物化设计之间,兼具柔和的视觉质感和现代简约风格。新拟态在2020年左右开始流行,特别适合仪表盘、计算器、音乐播放器等工具类应用界面。
高光色和阴影色是基于背景色在HSL颜色空间中调整亮度(Lightness)计算得出的:

高光色:保持色相(H)和饱和度(S)不变,将亮度(L)提高一定数值(如+15%~+25%),模拟光源照射产生的亮面;
阴影色:保持色相和饱和度不变,将亮度降低一定数值(如-15%~-25%),模拟背光面产生的暗面。

亮度变化的具体幅度取决于阴影强度设置。在极亮或极暗的背景色下,高光色可能接近纯白,阴影色可能接近纯黑,以保证足够的视觉对比度。
✅ 优点:
• 视觉柔和舒适,有独特的触感美学
• 适合暗色模式和浅色模式
• 在工具类、仪表盘类界面中表现突出
• 给人高级、精致的品牌感受

⚠️ 缺点:
• 对比度较低,可能影响无障碍访问(WCAG标准)
• 可点击元素与不可交互元素之间的区分不够明显
• 在老式低对比度屏幕上效果不佳
• 不适合信息密度高、需要快速扫描的界面

🎯 最佳场景:音乐播放器、计算器、智能家居控制面板、健康类App、创意工具等。
光源角度决定了高光阴影和暗阴影的偏移方向。经典的新拟态设计通常假设光源来自左上角(约225°),这使得:
• 凸起元素的亮面在左上,暗面在右下;
• 凹陷元素的暗面在左上(内阴影模拟光线被遮挡),亮面在右下。

改变光源角度可以创造不同的视觉效果,例如光源从正上方照来(0°)时阴影垂直分布,适合按钮按压效果。您可以通过本工具的角度滑块和预设按钮自由实验不同光源方向。
扁平化设计(Flat Design):完全去除阴影和纹理,使用纯色和简洁图形,强调内容和功能。代表:早期iOS 7、Windows 8 Metro。

Material Design:使用统一的阴影系统(elevation)来表现层次,阴影通常带有透明度且颜色偏黑灰,元素与背景色不同。代表:Google Android、Web应用。

新拟态(Neumorphism):阴影使用实色(不带透明度),高光和阴影色均从背景色衍生,元素与背景同色,仅通过明暗阴影表现立体感。它是三种风格中最为柔和细腻的。
新拟态的主要无障碍挑战是对比度不足。以下是一些改进建议:

增强阴影强度:使用更大的亮度差值,确保元素边界清晰可见;
添加文字标签:不要仅依赖形状和阴影来传达信息,为按钮添加清晰的文字;
使用额外的视觉线索:在悬停或焦点状态时增加边框、颜色变化或图标变化;
保证文字对比度:元素内部的文字颜色应与背景有足够对比度(建议满足WCAG AA标准,即对比度≥4.5:1);
测试多种设备:在低亮度屏幕、不同色温的显示器上测试效果。
已复制到剪贴板 ✓