发布时间：2026-05-04 · 最近更新：2026-05-04
颜色知识
品牌色如何扩展成 50-900 色板
一个品牌主色本身并不能支撑完整页面。真正能落地的品牌体系，需要把主色扩展成背景、边框、正文、按钮和状态都能稳定复用的层级色板。 这篇文章适合先理解概念，再回到相关工具完成转换、配色或可读性检查。
5 分钟3 条结论4 个相关工具
适合先抓重点，再补规则和场景，最后回到工具页验证。
可以直接从文章跳到颜色转换、配色、对比度和渐变工具继续处理。
先看结论
如果你只想先抓重点，可以先看这几条。
- 50-900 色板的价值不在于数字本身，而在于让每一档颜色都有明确职责。
- 浅层级更适合背景和弱提示，深层级更适合按钮、标题和高对比信息。
- 扩色板不能只靠降低透明度，必须同时控制明度、饱和度和实际可读性。
适合搭配使用的工具
读完概念后，直接回到这些工具页做实际转换和校对会更高效。
为什么品牌主色一定要扩层级
如果项目里只有一个主色，那么按钮、hover、标签、背景高亮、边框、链接和空状态都只能靠人工临时调色。时间一长，品牌色会在不同页面里慢慢变形。
把主色扩成 50-900 这样的层级，核心价值是让不同角色有固定落点。这样设计和开发都知道某一档该放在哪里，而不是每次重新猜。
不同色阶通常对应什么角色
通常来说，50 到 100 更适合大面积浅背景，200 到 300 更适合边框和弱强调底色，400 到 600 更适合按钮、标签和品牌主动作，700 到 900 更适合标题、深色文字或高对比区。
这套映射不必机械照搬，但一定要保证每一档颜色都承担稳定职责。否则就算你做了 10 档色板，实际项目依然会乱。
- 50-100：浅背景、提示底色、hover 背景。
- 200-300：边框、浅标签、辅助分区。
- 400-600：主按钮、品牌动作、强调标签。
- 700-900：标题、深色按钮、强对比区域。
扩色板时最常见的错误
第一类错误是只改透明度，不改颜色本身。这样得到的所谓‘浅色层级’，在真实页面里往往会发灰、发脏。第二类错误是每一档都很接近，肉眼几乎看不出职责差异。
真正稳定的做法，是在 HSL 或色板工具里同步控制明度和饱和度，再用对比度工具验证按钮、正文和浅底文字是否真的可读。
- 不要只靠透明度生成整套色板。
- 不要让 500、600、700 档几乎看不出差别。
- 上线前一定要把关键档位放回真实页面里看。
相关工具
这些工具可以把上面的规则直接落到颜色转换、配色和检查流程里。
品牌色板生成器
输入品牌主色后自动生成 50-900 色板层级、CSS 变量和设计系统常用 token。
品牌色板生成器品牌色板
色轮工具
基于主色生成互补色、邻近色、三角色等配色方案，实时输出 HEX、HSL 和 CSS 变量。
色轮工具color wheel
对比度检测
检测前景色与背景色的可读性，输出 WCAG 对比度结果。
对比度检测wcag color contrast
颜色选择器
在线选择颜色并实时查看 HEX、RGB、HSL 和 CSS 写法，支持原生色板和浏览器吸管取色。
颜色选择器color picker
常见问题
把最常被问到的疑问集中补齐，方便快速查找答案。
品牌色一定要做成 50-900 这种 10 档吗？
不一定，重点不是数字格式，而是层级是否清楚。只是 50-900 这种写法在设计系统和前端 token 里比较常见，也更容易协作。
如果主色本身很亮，还能做完整色板吗？
可以，但通常需要把中高档位适当压深，同时为浅背景和深文字单独准备更稳的层级。
品牌色板做完后，最先该检查什么？
优先检查按钮文字、正文文字和浅背景提示区的可读性，因为这些位置最容易在真实页面里暴露问题。
继续阅读
如果你还想继续了解颜色概念、配色方法和可读性规则，可以继续往下看。