SaaS 蓝色板
适合产品站点和组件库里的主色层级生成。
输入
品牌主色
#1E88E5
风格模式
balanced
输出
代表层级
50: #F3F8FB 500: #1E88E5 700: #106CBC 900: #083E6E
颜色工具
品牌色板生成器在线工具
输入品牌主色后自动生成从 50 到 900 的色板层级、CSS 变量和语义 token，适合设计系统、组件库和品牌规范的前端落地。
实时生成
选定品牌主色后，系统会自动输出浅背景、描边、主按钮、hover 和深强调等常见层级，不需要再手工一档一档调色。
支持 3 位和 6 位 HEX。系统会自动生成从 50 到 900 的品牌色阶。
`平衡型` 更适合多数产品站点，`柔和型` 更适合内容站与背景模块，`鲜明型` 更适合营销活动与高强调品牌色。
品牌色板预览
品牌色已经生成可用层级
主色保持品牌识别，浅层色板适合背景和边框，深层色板适合按钮、强调标题和状态反馈。
SurfaceAccent
50#FDF7F6大面积背景
100#FCEBE9浅层背景
200#FBDBD5弱描边
300#FCBCB1次级描边
400#FD9481浅强调
500#FF6347品牌主色
600#FF4929Hover / 次按钮
700#FF2600Active / 强调标题
800#CC1F00深强调
900#941600深色块 / 反白场景
Primary#FF6347
Hover#FF4929
Active#FF2600
Surface#FDF7F6
Border#FBDBD5
Strong#CC1F00
- 主色 HEX
- #FF6347
- 色板风格
- 平衡型
- 色板概览
- 50: #FDF7F6 / 100: #FCEBE9 / 200: #FBDBD5 / 300: #FCBCB1 / 400: #FD9481 / 500: #FF6347 / 600: #FF4929 / 700: #FF2600 / 800: #CC1F00 / 900: #941600
- 主色 Token
- --brand-500
- Hover Token
- --brand-600
CSS 变量预览
--brand-50: #FDF7F6; --brand-100: #FCEBE9; --brand-200: #FBDBD5; --brand-300: #FCBCB1; --brand-400: #FD9481; --brand-500: #FF6347; --brand-600: #FF4929; --brand-700: #FF2600; --brand-800: #CC1F00; --brand-900: #941600; --brand-primary: var(--brand-500); --brand-hover: var(--brand-600); --brand-active: var(--brand-700); --brand-surface: var(--brand-50); --brand-surface-soft: var(--brand-100); --brand-border: var(--brand-200); --brand-strong: var(--brand-800);
为什么品牌色需要色板而不是单一主色
真实项目里，一个品牌色不够支撑按钮、背景、边框、标签和状态层级，必须扩展成一整套可复用色板。
- 主色适合品牌识别和主要 CTA，但浅层背景、描边和弱强调不能直接复用同一个色值。
- 如果没有固定色板，不同页面和不同同学会手工调出不一致的变体，最终品牌感会漂移。
- 把色板沉淀成 CSS 变量或设计 token 后，后续做主题升级和多端同步会更稳定。
适合哪些场景
品牌色板生成器最适合在站点建设、组件库搭建和品牌规范整理阶段使用。
- 为产品站点、营销官网和后台系统生成统一的品牌色层级。
- 在前端组件库里快速建立按钮、标签、卡片、边框和背景的语义 token。
- 把设计稿中的主色沉淀成一套更可维护的 50-900 级颜色体系。
常见品牌色板参考
下面这组预设可以帮助你快速观察不同品牌主色在不同风格模式下的层级表现。
名称主色风格层级片段适合场景
SaaS 品牌蓝#1E88E5平衡型50 #F3F8FB / 500 #1E88E5 / 700 #106CBC适合控制台、后台、B 端产品和信息密度较高的界面。
内容绿#2E7D32柔和型50 #F5F9F6 / 500 #2E7D32 / 700 #215924适合内容平台、知识产品和更柔和的浅色背景体系。
营销橙#FF6347鲜明型50 #FEF3F1 / 500 #FF6347 / 700 #FF2F0A适合活动页、营销专题和需要更强点击感的视觉重点。
品牌深蓝#1F2937平衡型50 #F0F2F5 / 500 #1F2937 / 700 #171F2B适合深色品牌、专业服务和高信任感产品页面。
使用建议
色板生成只是第一步，真正上线时还需要把它和组件、交互状态以及可读性规则一起落地。
- 先用品牌色板生成器拿到 50-900 层级，再配合对比度检测确认正文、按钮和背景组合是否可读。
- 如果品牌色需要更柔和或更强烈的视觉存在感，可以切换不同风格模式再比较结果。
- 最终建议把 `--brand-50` 到 `--brand-900` 和语义 token 一起沉淀到项目变量体系中统一管理。
示例输入输出
示例重点展示主色进入不同模式后会生成怎样的层级结果。
品牌橙色板
适合内容站和营销页里的柔和品牌色扩展。
输入
品牌主色
#D85B32
风格模式
soft
输出
代表层级
50: #FCF9F8 500: #D85B32 700: #A3401F 900: #602410
常见问题
品牌色板生成器常见问题主要围绕层级用途和 token 落地。
为什么品牌色板通常会做成 50 到 900 这样的层级？
因为真实项目里需要背景、边框、按钮、标题、hover、active 等不同强度的颜色，所以一组分层色板会比单一主色更好维护。
生成出来的色板能直接作为设计 token 使用吗？
可以作为很好的初稿，尤其适合快速建立 `--brand-50` 到 `--brand-900` 的变量体系，然后再按项目场景微调。
为什么生成结果和设计师手工调的颜色不完全一样？
因为工具是按统一规则生成层级，而设计稿有时会针对某个页面做更主观的视觉微调。实际项目里通常会在统一规则基础上再做小范围修正。
相关工具
你还可以继续使用其他已经可用的颜色转换和配色工具。