Home
Material You Colors
Primary
Secondary
Tertiary
Error
On Primary
On Secondary
On Tertiary
On Error
Primary Container
Secondary Container
Tertiary Container
Error Container
On Primary Container
On Secondary Container
On Tertiary Container
On Error Container
Surface Dim
Surface
Surface Bright
Inverse Surface
Surface Container Lowest
Surface Container Low
Surface Container
Surface Container High
Surface Container Highest
On Surface
On Surface Variant
Outline
Outline Variant
Scrim
Shadow
On Inverse Surface
Surface Variant
Inverse Primary
Color schemes 说明(由 Gemini 生成)

content (内容)

  • 场景：适用于需要突出内容本身，避免干扰的场景。例如，文章阅读界面、数据可视化图表（当颜色用于区分数据而非品牌时）、简单的信息展示。
  • 特点：颜色选择通常比较柔和、中性，不会抢占内容的视觉焦点。

expressive (表达性)

  • 场景：适用于需要传达情感、个性和活力的应用。例如，社交媒体应用、创意作品集、游戏界面、营销活动页面。
  • 特点：颜色可能更鲜艳、对比度更高，能够激发用户的情感反应，营造特定的氛围。

fidelity (保真度)

  • 场景：适用于需要精确还原某种风格或色彩真实性的场景。例如，产品原型设计（模拟最终产品外观）、摄影作品展示、对色彩精度要求极高的设计。
  • 特点：颜色会尽量贴近设计稿的原始色彩，或者模拟真实世界的色彩表现。

monochrome (单色)

  • 场景：适用于追求简洁、现代、高级感的设计。例如，高端品牌官网、设计工作室作品展示、需要突出结构和形式的设计。
  • 特点：主要使用一种颜色的不同深浅和明暗变化来构成界面，给人干净、统一的视觉感受。

neutral (中性)

  • 场景：适用于需要建立一个稳定、可靠、专业的基调的场景。例如，企业官网、后台管理系统、金融服务类应用、医疗健康应用。
  • 特点：使用大量的灰色、白色、黑色等中性色，配合少量强调色，整体感觉沉稳、不花哨，易于用户聚焦于核心功能。

tonalSpot (色调点)

  • 场景：适用于希望在保持整体色调统一的同时，用特定的色彩点来吸引用户注意力的场景。例如，需要引导用户进行特定操作的按钮、关键信息的提示、导航中的激活状态。
  • 特点：以一种或几种主要的色调为主，然后用一个鲜明的、对比度较高的颜色（"spot"）来突出重要的元素。

vibrant (鲜艳)

  • 场景：类似于 "expressive"，但可能更加强调色彩的活力和现代感。适用于年轻化、充满活力的产品。例如，潮流服饰电商、音乐播放器、健身应用。
  • 特点：大胆使用鲜艳、饱和度高的颜色，营造充满能量和吸引力的视觉效果。