你是不是也遇到过这种情况：设计产品时，每次需要新颜色就随手添加一个，结果灰色越用越多，蓝色各有深浅，最后整个界面色彩失控，维护起来头疼不已？
今天就来分享一套实用的配色方法，帮你从根源解决这个问题。这套方法来自我们多次产品重构经验，特别适合需要建立设计系统的项目。
色彩问题的根源
通常，我们会在以下场景逐步引入颜色：
二级文本需要灰色？直接加一个灰色。
图标需要更浅的灰色？再加一个。
边框需要另一种灰色？继续添加。
这种临时补漏的方式，很快就会让颜色数量失控。比如，你需要一种灰色用于文本框边框，但这个灰色对分隔线太深，对文本又太浅。问题就像雪球一样越滚越大。
标准界面的色彩需求
其实，大多数界面需要的颜色是有规律的：
主文本和图标使用黑色
二级文本、图标和描边使用灰色
按钮等可点击元素使用强调色（通常是品牌色）
状态提示使用红色（负面）、绿色（正面）和橙色（警告）
浅色元素在深色背景上使用白色
图表和标签需要几种额外的颜色
界面色彩应用示例
从强调色开始构建色板
我习惯从强调色入手，这通常是品牌色，决定了产品的独特性。关键是创建这个颜色的不同深浅色调。
为了确保色调过渡自然，我使用渐变分割法：先创建一个从深到浅的渐变，然后分成9等份，从每段中间选取颜色，形成初始色板。
从强调色开始创建渐变
让色板更生动
有时候，同一色调的不同深浅会显得单调。这时候可以做一些调整：
把较浅的色调调得暖一些，让整体更活泼
调整渐变端点的色调，比如把深色调偏紫，浅色调偏绿
在渐变中添加额外控制点，微调亮度
调整色调让界面更生动
扩展其他颜色
对强调色满意后，用同样的方法为红色、绿色和橙色创建色板。需要注意的是，加深橙色时不要直接加黑色（会变暗淡），而是加点红色，这样效果更好。
为其他功能色创建色板
黑色、灰色与白色
黑色、灰色和白色虽然属于同一颜色家族，但我习惯分开处理，因为界面通常需要多种灰度和黑色，特别是在支持深色模式时。
黑色和灰色色板示例
即使界面中不使用纯黑色#000000，我也会把它加入色板，因为视频播放器或图片库背景可能会用到。
透明色的处理
实际设计中经常需要透明色，比如遮罩效果。这些通常是黑色和白色的透明变体。如果需要鲜艳颜色的透明元素，就选取该颜色的某个色调，以不同透明度添加到色板。
透明色的应用示例
深色模式适配
如果产品需要深色模式，可以为降低亮度后的鲜明色彩单独建立色板。黑色和灰色的色板通常在深色和浅色模式下都能适配。
深色模式下的色彩调整
色板的命名与使用
创建好色板后，给每个颜色命名很重要。我使用从100到900的编号系统，这样以后可以在中间插入更多色调（如550、950等）。
色板编号系统示例
现在，你有了一个完整的“色彩系统”，但先别急着直接用。下一步需要制定颜色使用准则，避免在实际应用中造成混乱。这就是语义层的引入，我们下次再详细聊。
来源：medium.com/design-bootcamp/creating-a-consistent-color-palette-for-your-interface-870e47a4206a
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
