10 个颜色角色
每个颜色都有明确用途，点右侧按钮即可复制对应格式。
主题色
theme小程序全局主题色（navigationBar / tabBar 选中）
#97891drgb(151, 137, 29)hsl(53.1, 67.8%, 35.3%)按钮色
btn主要按钮背景
#97891drgb(151, 137, 29)hsl(53.1, 67.8%, 35.3%)按钮禁用
btnDisabled禁用态按钮背景
#d8ce7frgb(216, 206, 127)hsl(53.3, 53.3%, 67.3%)页面背景
bg页面 backgroundColor
#fbfbf9rgb(251, 251, 249)hsl(60, 20%, 98%)卡片背景
card商品卡 / 内容卡背景
#f7f7f3rgb(247, 247, 243)hsl(60, 20%, 96.1%)主文字
textMain标题与正文
#2d2c1frgb(45, 44, 31)hsl(55.7, 18.4%, 14.9%)次文字
textSub辅助说明、时间戳
#858160rgb(133, 129, 96)hsl(53.5, 16.2%, 44.9%)分割线
divider列表分割线
#eae9e1rgb(234, 233, 225)hsl(53.3, 17.6%, 90%)价格色
price价格 / 促销数字，通常暖色系
#cc3c1frgb(204, 60, 31)hsl(10.1, 73.6%, 46.1%)标签色
tag标签 / 优惠券底色
#337095rgb(51, 112, 149)hsl(202.7, 49%, 39.2%)编辑点评 · 小程序端
按这一端最常踩的坑逐条核对，结论由色值算出，不是套话。
主题色在胶囊按钮上的可读性留意
余量偏小，界面元素密集时会吃力，建议只用在大字号或加粗处。
价格色与主题色会不会混稳妥
这一项没问题，可以直接用。
禁用态按钮的提示是否清楚稳妥
这一项没问题，可以直接用。
卡片色与页面底色的区分度留意
两者差距偏小，最好再靠明度或图标拉开一层，别只依赖色相。
搭配建议
依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。
这套配色的主色偏深、分量感强，适合深色主题，或需要传递专业、稳重印象的界面。
适合适合做高亮与提示，是深色背景上最醒目的点缀色。
慎用大量使用会显得刺眼廉价，偏绿味的黄尤其要小心。
搭配与深灰、藏青搭配最稳，在深色主题里它反而可以承担主要强调。
用在真实界面里是什么样
同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。
实时预览 · 点击切换端
9:41
小程序商城•••
商品名称示例规格 · 500g
¥39.9
商品名称示例规格 · 1kg
¥68.0
立即购买已售罄
无障碍对比度检查
按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 13.59:1 | AAA | AAA |
| 主文字 / 卡片背景 | 13.11:1 | AAA | AAA |
| 主色 / 页面背景 | 3.43:1 | AA | AA |
同端其他配色
按色系与标签相近度排序，挑出最值得接着看的几套。
导出到你的项目
四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。
CSS 变量
:root {
--color-theme: #97891d; /* 主题色 */
--color-btn: #97891d; /* 按钮色 */
--color-btnDisabled: #d8ce7f; /* 按钮禁用 */
--color-bg: #fbfbf9; /* 页面背景 */
--color-card: #f7f7f3; /* 卡片背景 */
--color-textMain: #2d2c1f; /* 主文字 */
--color-textSub: #858160; /* 次文字 */
--color-divider: #eae9e1; /* 分割线 */
--color-price: #cc3c1f; /* 价格色 */
--color-tag: #337095; /* 标签色 */
}SCSS 变量
$color-theme: #97891d; // 主题色
$color-btn: #97891d; // 按钮色
$color-btnDisabled: #d8ce7f; // 按钮禁用
$color-bg: #fbfbf9; // 页面背景
$color-card: #f7f7f3; // 卡片背景
$color-textMain: #2d2c1f; // 主文字
$color-textSub: #858160; // 次文字
$color-divider: #eae9e1; // 分割线
$color-price: #cc3c1f; // 价格色
$color-tag: #337095; // 标签色Tailwind 配置
// tailwind.config.js：柠月黄
module.exports = {
theme: {
extend: {
colors: {
'theme': '#97891d',
'btn': '#97891d',
'btnDisabled': '#d8ce7f',
'bg': '#fbfbf9',
'card': '#f7f7f3',
'textMain': '#2d2c1f',
'textSub': '#858160',
'divider': '#eae9e1',
'price': '#cc3c1f',
'tag': '#337095',
},
},
},
};机器可读 JSON
{
"name": "柠月黄",
"platform": "miniapp",
"tags": [
"活力",
"黄"
],
"advice": {
"family": "黄",
"depth": "这套配色的主色偏深、分量感强，适合深色主题，或需要传递专业、稳重印象的界面。",
"muted": null,
"suit": "适合做高亮与提示，是深色背景上最醒目的点缀色。",
"avoid": "大量使用会显得刺眼廉价，偏绿味的黄尤其要小心。",
"pair": "与深灰、藏青搭配最稳，在深色主题里它反而可以承担主要强调。"
},
"roles": {
"theme": "#97891d",
"btn": "#97891d",
"btnDisabled": "#d8ce7f",
"bg": "#fbfbf9",
"card": "#f7f7f3",
"textMain": "#2d2c1f",
"textSub": "#858160",
"divider": "#eae9e1",
"price": "#cc3c1f",
"tag": "#337095"
},
"contrast": {
"textOnBg": {
"ratio": 13.59,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 3.43,
"level": "AA"
},
"textOnSurface": {
"ratio": 13.11,
"level": "AAA"
}
}
}