Material Palette

颜色选择界面

首页将颜色选项铺在整页色块网格中，并标出 RED、PINK、PURPLE、DEEP PURPLE、INDIGO、BLUE、LIGHT BLUE、CYAN、TEAL、GREEN、LIGHT GREEN、LIME、YELLOW、AMBER、ORANGE、DEEP ORANGE、BROWN、GREY 和 BLUE GREY 等颜色类别。页面中央提示选择两种颜色。每个色块都有清晰的名称和颜色背景，用户可以直接比较相邻颜色，再选出希望搭配的两种基础色。

这种呈现方式把颜色选择和预览放在同一个界面里。用户不需要先填写十六进制色值，也不必先建立完整的设计稿，就能从常见色系开始浏览。适合从两种不同色相试起，观察整体明暗和视觉重心，再根据品牌色、页面主题或按钮用途调整选择。首页展示的是可选色系目录，具体生成效果会随所选的两种颜色变化。

组合预览与颜色角色

选择 RED 与 BLUE 后，页面地址变为 /red/blue，并在右侧呈现 Palette preview 卡片。预览上方显示深红色背景和“Palette preview”标题，下方展示完整色板区域；左侧仍保留颜色选择网格，已选的两个色块带有明显的选中标记。页面同时显示“Full Palette colors below”等提示，并提供返回和更多菜单入口。这个状态有助于在选色后继续比较整组搭配，而不只是孤立地查看两个颜色。

该组合页面列出 DARK PRIMARY COLOR、LIGHT PRIMARY COLOR、PRIMARY COLOR、TEXT / ICONS、ACCENT COLOR、PRIMARY TEXT、SECONDARY TEXT 与 DIVIDER COLOR 等角色。当前 RED 与 BLUE 示例显示的色值包括主色 #F44336、深主色 #D32F2F、浅主色 #FFCDD2、强调色 #448AFF、文本与图标色 #FFFFFF、主文字色 #212121、次级文字色 #757575 和分隔线色 #BDBDBD。这些值对应页面展示的红蓝搭配示例。选择其他色系会生成相应的不同色值。

在界面设计中的用法

在界面草图阶段，可以先确定主色想表达的整体感觉，再选择一个配合颜色，通过预览观察颜色在主区域、强调区域、文字与分隔线上的分工。把这组颜色放入设计稿前，仍需要结合实际背景、图标和文字内容检查对比度与可读性。生成器提供的是一组便于继续尝试的色彩方案，不代表它能替代针对具体界面进行的无障碍或品牌规范检查。

如果已经有明确的品牌色，可以从接近的色块开始，比较第二种颜色对页面风格的影响；如果仍在寻找方向，可以从不同色系中依次选择，查看页面生成的预览和角色色值。设计者也可以把显示的十六进制颜色记录到自己的原型或设计规范中，再按实际项目所需调整。页面上的颜色角色名称让结果更容易被理解和讨论，尤其适合用来快速确定界面主色、强调色和常用文字色的大致方向。

结果保存与分享入口

组合预览下方显示 Your Palette 区域，并出现 DOWNLOAD、分享和 TWEET 等入口。它们位于已生成的色板附近，方便用户继续处理结果。红蓝组合页提供 Your Palette 区域，以及下载与分享入口。实际使用时，可根据项目需要查看按钮对应的当前行为，再决定是否保存或分享色板。

颜色挑选本身不需要先完成账户登录：公开首页可直接显示色彩网格，选择两种颜色后也能打开结果预览。对于日常使用者，这使它适合在构思过程中快速试出若干方向，并将页面中的颜色角色作为后续沟通的参考。若团队拥有正式的设计系统、品牌手册或对比度要求，应以这些规范为最终依据，把在线预览作为探索与参考工具。

适合的用户与任务

Material Palette 面向需要快速探索界面配色的人。网页设计者可以用它先确定页面的主色和辅助色，前端开发者可以根据色板中的名称与色值将初步组合写入样式，产品团队则可以通过预览讨论不同颜色组合的视觉倾向。它的核心交互是从预置色系中选择两种颜色并查看生成结果，适合早期尝试和轻量参考。

如果项目需要从任意自定义色值出发、建立多页面设计令牌、自动检查色彩对比度，或管理复杂的品牌颜色系统，当前公开页面所展示的功能不足以证明它覆盖这些工作。因此可以把 Material Palette 用作一个快速的配色起点：先找到可能的主次颜色，再在专业设计工具或项目样式中完成验证与落地。用户也可以把不同搭配分别预览，挑选更符合页面内容和目标受众的方案。

总体来说，Material Palette 把一组预设色系、双颜色选择和角色化色板展示整合在一个公开网页中。它让颜色探索过程更直观，也提供可以复制到后续设计工作的十六进制色值。对于需要快速提出几种界面配色方案的个人和团队，这是一个轻量的在线参考工具；最终采用哪些颜色，仍应结合产品风格、内容层级和可读性进行判断。