10 个颜色角色
每个颜色都有明确用途，点右侧按钮即可复制对应格式。
主题色
theme小程序全局主题色（navigationBar / tabBar 选中）
#b3701frgb(179, 112, 31)hsl(32.8, 70.5%, 41.2%)按钮色
btn主要按钮背景
#b3701frgb(179, 112, 31)hsl(32.8, 70.5%, 41.2%)按钮禁用
btnDisabled禁用态按钮背景
#e1be94rgb(225, 190, 148)hsl(32.7, 56.2%, 73.1%)页面背景
bg页面 backgroundColor
#fbfaf9rgb(251, 250, 249)hsl(30, 20%, 98%)卡片背景
card商品卡 / 内容卡背景
#f7f5f3rgb(247, 245, 243)hsl(30, 20%, 96.1%)主文字
textMain标题与正文
#2d271frgb(45, 39, 31)hsl(34.3, 18.4%, 14.9%)次文字
textSub辅助说明、时间戳
#857560rgb(133, 117, 96)hsl(34.1, 16.2%, 44.9%)分割线
divider列表分割线
#eae6e1rgb(234, 230, 225)hsl(33.3, 17.6%, 90%)价格色
price价格 / 促销数字，通常暖色系
#a01818rgb(160, 24, 24)hsl(0, 73.9%, 36.1%)标签色
tag标签 / 优惠券底色
#39a8adrgb(57, 168, 173)hsl(182.6, 50.4%, 45.1%)编辑点评 · 小程序端
按这一端最常踩的坑逐条核对，结论由色值算出，不是套话。
主题色在胶囊按钮上的可读性留意
余量偏小，界面元素密集时会吃力，建议只用在大字号或加粗处。
价格色与主题色会不会混稳妥
这一项没问题，可以直接用。
禁用态按钮的提示是否清楚稳妥
这一项没问题，可以直接用。
卡片色与页面底色的区分度留意
两者差距偏小，最好再靠明度或图标拉开一层，别只依赖色相。
搭配建议
依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。
主色明度居中，兼容性最好，浅色与深色主题都容易适配。
适合适合活力与亲和力优先的场景：外卖、社区、教育、生活服务类产品。
慎用大面积使用容易显廉价，需要专业感的 B 端产品里要克制。
搭配同色系里用深浅橙做层次，比再混入第三种彩色更耐看。
用在真实界面里是什么样
同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。
实时预览 · 点击切换端
9:41
小程序商城•••
商品名称示例规格 · 500g
¥39.9
商品名称示例规格 · 1kg
¥68.0
立即购买已售罄
无障碍对比度检查
按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 14.17:1 | AAA | AAA |
| 主文字 / 卡片背景 | 13.58:1 | AAA | AAA |
| 主色 / 页面背景 | 3.83:1 | AA | AA |
同端其他配色
按色系与标签相近度排序，挑出最值得接着看的几套。
导出到你的项目
四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。
CSS 变量
:root {
--color-theme: #b3701f; /* 主题色 */
--color-btn: #b3701f; /* 按钮色 */
--color-btnDisabled: #e1be94; /* 按钮禁用 */
--color-bg: #fbfaf9; /* 页面背景 */
--color-card: #f7f5f3; /* 卡片背景 */
--color-textMain: #2d271f; /* 主文字 */
--color-textSub: #857560; /* 次文字 */
--color-divider: #eae6e1; /* 分割线 */
--color-price: #a01818; /* 价格色 */
--color-tag: #39a8ad; /* 标签色 */
}SCSS 变量
$color-theme: #b3701f; // 主题色
$color-btn: #b3701f; // 按钮色
$color-btnDisabled: #e1be94; // 按钮禁用
$color-bg: #fbfaf9; // 页面背景
$color-card: #f7f5f3; // 卡片背景
$color-textMain: #2d271f; // 主文字
$color-textSub: #857560; // 次文字
$color-divider: #eae6e1; // 分割线
$color-price: #a01818; // 价格色
$color-tag: #39a8ad; // 标签色Tailwind 配置
// tailwind.config.js：南瓜橙
module.exports = {
theme: {
extend: {
colors: {
'theme': '#b3701f',
'btn': '#b3701f',
'btnDisabled': '#e1be94',
'bg': '#fbfaf9',
'card': '#f7f5f3',
'textMain': '#2d271f',
'textSub': '#857560',
'divider': '#eae6e1',
'price': '#a01818',
'tag': '#39a8ad',
},
},
},
};机器可读 JSON
{
"name": "南瓜橙",
"platform": "miniapp",
"tags": [
"暗黑",
"橙"
],
"advice": {
"family": "橙",
"depth": "主色明度居中，兼容性最好，浅色与深色主题都容易适配。",
"muted": null,
"suit": "适合活力与亲和力优先的场景：外卖、社区、教育、生活服务类产品。",
"avoid": "大面积使用容易显廉价，需要专业感的 B 端产品里要克制。",
"pair": "同色系里用深浅橙做层次，比再混入第三种彩色更耐看。"
},
"roles": {
"theme": "#b3701f",
"btn": "#b3701f",
"btnDisabled": "#e1be94",
"bg": "#fbfaf9",
"card": "#f7f5f3",
"textMain": "#2d271f",
"textSub": "#857560",
"divider": "#eae6e1",
"price": "#a01818",
"tag": "#39a8ad"
},
"contrast": {
"textOnBg": {
"ratio": 14.17,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 3.83,
"level": "AA"
},
"textOnSurface": {
"ratio": 13.58,
"level": "AAA"
}
}
}