Material Palette 怎么导出代码？双色调色板文本色背景色设置详解

? Material Palette 导出代码的详细步骤

1. 选择颜色方案
   打开 Material Palette 官网，页面左侧有一排颜色选项，像红色、蓝色、绿色等。你可以选一种或两种颜色作为主色和辅色，选好后右侧会实时生成对应的配色方案，包括主色、辅色、背景色、文本色等。
   
   
2. 查看颜色代码
   每种颜色块下方都有对应的十六进制代码，比如 #FF5722。点击颜色块，代码会自动复制到剪贴板，你可以直接粘贴到设计软件或代码中。
   
   
3. 导出多种格式
   点击页面右上角的「下载」按钮，会弹出多种格式选项，像 CSS、SCSS、SASS、Sketch、PSD 等。如果你是前端开发者，选 CSS 或 SCSS 格式就行；设计师可能更需要 Sketch 或 PSD 格式。
   
   
4. 生成代码片段
   页面底部还有一个「代码片段」区域，里面有不同平台的代码示例，比如 Android、iOS、Web。你可以根据自己的项目需求复制对应的代码。
   
   

? 双色调色板的创建与设置

1. 选择两种颜色
   在颜色选择区域，勾选两种颜色作为主色和辅色。比如选蓝色作为主色，黄色作为辅色，工具会自动生成这两种颜色的深浅变体。
   
   
2. 调整颜色比例
   选好颜色后，页面中间会出现一个颜色条，你可以拖动滑块调整两种颜色的比例。比如让主色占 70%，辅色占 30%，这样颜色过渡会更自然。
   
   
3. 设置文本和背景色
   双色调色板的文本和背景色需要根据颜色对比度来设置。如果背景色是深色，文本色就用浅色，比如白色；如果背景色是浅色，文本色就用深色，比如黑色。Material Palette 会自动生成推荐的文本和背景色，但你也可以手动调整。
   
   

? 文本色和背景色的设置技巧

1. 对比度要求
   根据 Material Design 规范，文本和背景色的对比度至少要达到 4.5:1（大文本 3:1）。你可以用在线对比度检查工具，比如 WebAIM Contrast Checker，来确保颜色组合符合要求。
   
   
2. 透明度设置
   文本色可以通过调整透明度来区分重要性。比如，主要文本用 100% 透明度，次要文本用 70% 透明度，禁用文本用 50% 透明度。背景色也可以适当调整透明度，营造出层次感。
   
   
3. 动态适配
   如果你的设计需要适配不同的主题（比如浅色和深色模式），可以使用 CSS 变量来动态设置文本和背景色。这样在切换主题时，颜色会自动调整。
   
   

? 常见问题解答

1. 导出的代码无法使用
   检查导出格式是否正确，比如 CSS 格式的代码需要放在样式表中，而 Sketch 格式的文件需要用 Sketch 软件打开。如果代码有问题，重新导出一次试试。
   
   
2. 双色调色板颜色过渡不自然
   调整颜色比例或更换颜色组合，直到找到满意的效果。也可以尝试使用不同的颜色搭配，比如互补色或类似色。
   
   
3. 文本色在背景色上不清晰
   检查对比度是否符合要求，调整文本色或背景色，直到清晰可读。也可以尝试调整文本的字体大小或粗细。