10 个颜色角色
每个颜色都有明确用途，点右侧按钮即可复制对应格式。
主题色
theme小程序全局主题色（navigationBar / tabBar 选中）
#cd4254rgb(205, 66, 84)hsl(352.2, 58.2%, 53.1%)按钮色
btn主要按钮背景
#cd4254rgb(205, 66, 84)hsl(352.2, 58.2%, 53.1%)按钮禁用
btnDisabled禁用态按钮背景
#eac8cdrgb(234, 200, 205)hsl(351.2, 44.7%, 85.1%)页面背景
bg页面 backgroundColor
#fbf9f9rgb(251, 249, 249)hsl(0, 20%, 98%)卡片背景
card商品卡 / 内容卡背景
#f7f3f3rgb(247, 243, 243)hsl(0, 20%, 96.1%)主文字
textMain标题与正文
#2d1f21rgb(45, 31, 33)hsl(351.4, 18.4%, 14.9%)次文字
textSub辅助说明、时间戳
#856065rgb(133, 96, 101)hsl(351.9, 16.2%, 44.9%)分割线
divider列表分割线
#eae1e3rgb(234, 225, 227)hsl(346.7, 17.6%, 90%)价格色
price价格 / 促销数字，通常暖色系
#b41e1ergb(180, 30, 30)hsl(0, 71.4%, 41.2%)标签色
tag标签 / 优惠券底色
#64c085rgb(100, 192, 133)hsl(141.5, 42.2%, 57.3%)编辑点评 · 小程序端
按这一端最常踩的坑逐条核对，结论由色值算出，不是套话。
主题色在胶囊按钮上的可读性稳妥
这一项没问题，可以直接用。
价格色与主题色会不会混稳妥
这一项没问题，可以直接用。
禁用态按钮的提示是否清楚稳妥
这一项没问题，可以直接用。
卡片色与页面底色的区分度留意
两者差距偏小，最好再靠明度或图标拉开一层，别只依赖色相。
搭配建议
依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。
主色明度居中，兼容性最好，浅色与深色主题都容易适配。
适合适合做强调色，而不是大面积主色：价格、促销、错误提示，还有需要第一眼就被看到的地方。
慎用金融、医疗等需要稳定与信任感的场景要慎用，容易显得激进、有攻击性。
搭配与中性灰、白搭配最稳；把蓝色留给确认状态，红色只留给危险和重点。
用在真实界面里是什么样
同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。
实时预览 · 点击切换端
9:41
小程序商城•••
商品名称示例规格 · 500g
¥39.9
商品名称示例规格 · 1kg
¥68.0
立即购买已售罄
无障碍对比度检查
按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 15.06:1 | AAA | AAA |
| 主文字 / 卡片背景 | 14.34:1 | AAA | AAA |
| 主色 / 页面背景 | 4.45:1 | AA | AA |
同端其他配色
按色系与标签相近度排序，挑出最值得接着看的几套。
导出到你的项目
四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。
CSS 变量
:root {
--color-theme: #cd4254; /* 主题色 */
--color-btn: #cd4254; /* 按钮色 */
--color-btnDisabled: #eac8cd; /* 按钮禁用 */
--color-bg: #fbf9f9; /* 页面背景 */
--color-card: #f7f3f3; /* 卡片背景 */
--color-textMain: #2d1f21; /* 主文字 */
--color-textSub: #856065; /* 次文字 */
--color-divider: #eae1e3; /* 分割线 */
--color-price: #b41e1e; /* 价格色 */
--color-tag: #64c085; /* 标签色 */
}SCSS 变量
$color-theme: #cd4254; // 主题色
$color-btn: #cd4254; // 按钮色
$color-btnDisabled: #eac8cd; // 按钮禁用
$color-bg: #fbf9f9; // 页面背景
$color-card: #f7f3f3; // 卡片背景
$color-textMain: #2d1f21; // 主文字
$color-textSub: #856065; // 次文字
$color-divider: #eae1e3; // 分割线
$color-price: #b41e1e; // 价格色
$color-tag: #64c085; // 标签色Tailwind 配置
// tailwind.config.js：蜜柿红
module.exports = {
theme: {
extend: {
colors: {
'theme': '#cd4254',
'btn': '#cd4254',
'btnDisabled': '#eac8cd',
'bg': '#fbf9f9',
'card': '#f7f3f3',
'textMain': '#2d1f21',
'textSub': '#856065',
'divider': '#eae1e3',
'price': '#b41e1e',
'tag': '#64c085',
},
},
},
};机器可读 JSON
{
"name": "蜜柿红",
"platform": "miniapp",
"tags": [
"治愈",
"红"
],
"advice": {
"family": "红",
"depth": "主色明度居中，兼容性最好，浅色与深色主题都容易适配。",
"muted": null,
"suit": "适合做强调色，而不是大面积主色：价格、促销、错误提示，还有需要第一眼就被看到的地方。",
"avoid": "金融、医疗等需要稳定与信任感的场景要慎用，容易显得激进、有攻击性。",
"pair": "与中性灰、白搭配最稳；把蓝色留给确认状态，红色只留给危险和重点。"
},
"roles": {
"theme": "#cd4254",
"btn": "#cd4254",
"btnDisabled": "#eac8cd",
"bg": "#fbf9f9",
"card": "#f7f3f3",
"textMain": "#2d1f21",
"textSub": "#856065",
"divider": "#eae1e3",
"price": "#b41e1e",
"tag": "#64c085"
},
"contrast": {
"textOnBg": {
"ratio": 15.06,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 4.45,
"level": "AA"
},
"textOnSurface": {
"ratio": 14.34,
"level": "AAA"
}
}
}