MD Palette Generator

MD Palette Generator官网

MD Palette Generator（全称 Material Design Color Generator，简称 MCG）是一款开源的 Material Design 配色生成工具，在线地址为 mcg.mbitson.com，项目代码托管在 GitHub。与只能从固定色板中挑选的配色网站不同，MCG 的核心能力是”以任意自定义颜色为基色，自动展开为完整的 Material 色板”：输入一个品牌色或主色，工具会按 50 到 900 的标准梯度生成全部明暗层次，并自动计算文字对比色。更突出的是它的工程化导出能力——支持将生成的色板一键导出为 Android XML、Material UI（React）、AngularJS、Vue.js、Flutter、Ember、Material Design Lite 等十余种框架的代码格式，直接粘贴进项目即可使用。工具还内置多种色彩计算算法可供切换，并支持色板的导入与分享。对前端与移动端开发者来说，它是把”设计配色”翻译成”工程代码”的高效桥梁，与站内的 Coolors 或 MaterialUI 色彩体系搭配使用效果更佳。

MD Palette Generator的主要功能

1. 自定义基色生成色板：输入任意 Hex 颜色，自动生成 50—900 及 A100—A700 全梯度 Material 色板。
2. 多框架代码导出：支持 Android XML、Material UI、AngularJS 2、Vue.js、Flutter、Ember Paper、Material Design Lite 等格式的直接导出。
3. 色板导入与分享：可通过 MCG 专有格式重新导入色板，URL 也会随配色实时更新，方便协作分享。
4. 多算法切换：提供 Traditional（低对比、原版逻辑）、Constantin（高对比）、Buckner（侧重 A100—A700）三种色彩生成算法。
5. 自动对比色计算：根据背景明暗自动推导文字前景色，保证可读性。
6. 主题实时预览：内置 Material 组件演示界面，可在真实控件上查看主题效果。

如何使用MD Palette Generator

1. 访问 mcg.mbitson.com，打开在线生成器（站点访问不稳定时可从 GitHub 项目页面进入）。
2. 点击色板区域的选择器，输入或拾取你的基色，工具立即展开完整梯度色板。
3. 如对生成效果不满意，切换 Traditional、Constantin 或 Buckner 算法对比结果。
4. 逐个调整不满意的单色，观察文字对比色是否随之更新。
5. 在导出面板中选择目标框架（如 Android XML 或 Material UI），复制生成的代码。
6. 将代码粘贴到项目配置中，或使用 MCG Reimport 格式保存色板以便日后修改。

MD Palette Generator的使用场景

1. 品牌色落地：拿到品牌 VI 的标准色后，快速展开成可在 App 中使用的完整色板。
2. 跨平台开发：同一套配色需同时输出到 Android、Flutter、React 等多个技术栈时，一次生成多格式导出。
3. 主题系统搭建：为组件库或设计系统批量定义标准色值与对比文字色。
4. 设计工程协作：设计师与开发者之间通过链接或导出码传递精确配色。

MD Palette Generator：产品价格与版本

MD Palette Generator 是完全免费的开源项目，采用 MIT 许可证发布，无付费版本与广告。网页版可直接使用；由于项目多年未频繁更新，最新代码可从 GitHub 仓库获取，也支持本地部署运行，适合对稳定性有要求的团队自行托管。

MD Palette Generator的常见问题解答

mcg.mbitson.com 打不开怎么办？

该站点偶尔会出现访问不稳定的情况。可以稍后重试，或前往 GitHub 上的 mbitson/mcg 仓库查看项目说明，按文档将工具部署到本地运行。

导入第三方工具生成的代码为什么经常失败？

MCG 的导入功能主要识别自己导出的格式。外部工具生成的代码格式可能不兼容，建议统一使用 MCG 生成再导出的流程。

生成的色板可以直接用于商业项目吗？

可以。工具采用 MIT 开源许可，生成的颜色值与代码均可在商业项目中使用。

MD Palette Generator官网网址

MD Palette Generator官网入口网址：http://mcg.mbitson.com/#

OpenI AI时代点评

在众多 Material 配色工具中，MD Palette Generator 是工程化程度最高的一款：它不只帮你”选颜色”，而是直接产出可编译、可复用的框架代码，覆盖 Android、Flutter、React、Vue 等主流技术栈，这在当年几乎是独一份的能力，至今仍有很高的实用价值。算法可切换与对比色自动计算也让它在专业性上领先同类工具。它的短板同样清晰：界面停留在 AngularJS 时代，视觉与交互已显陈旧；项目更新停滞多年，站点偶有无法访问的情况；对非 Material 体系的设计风格并不适用。适合人群很明确——需要把品牌色快速落成多端代码的前端与移动端开发者。若你只想要灵感式配色，站内的 ColorHunt 或 AI配色 类工具可能更轻快；但论”配色到代码”的完整链路，MCG 依然值得收藏。