10 个颜色角色
每个颜色都有明确用途，点右侧按钮即可复制对应格式。
主色
primary品牌主色，用于主要按钮、选中态、强调元素
#b3766brgb(179, 118, 107)hsl(9.2, 32.1%, 56.1%)主色·深
primaryDark主色按下态 / 深色背景上的主色
#915146rgb(145, 81, 70)hsl(8.8, 34.9%, 42.2%)主色·浅
primaryLight主色浅底、标签背景、选中弱化态
#e6dddbrgb(230, 221, 219)hsl(10.9, 18%, 88%)辅色
secondary与主色搭配的次要色，用于次级按钮、图标
#7cb6a2rgb(124, 182, 162)hsl(159.3, 28.4%, 60%)强调色
accent点缀色，用于角标、高亮提示
#57b6c7rgb(87, 182, 199)hsl(189.1, 50%, 56.1%)成功
success成功提示、完成状态
#31af66rgb(49, 175, 102)hsl(145.2, 56.3%, 43.9%)警告
warning警告提示、待处理状态
#eba71ergb(235, 167, 30)hsl(40.1, 83.7%, 52%)危险
danger错误提示、删除操作、失败状态
#db4439rgb(219, 68, 57)hsl(4.1, 69.2%, 54.1%)文字
text正文主文字色
#292423rgb(41, 36, 35)hsl(10, 7.9%, 14.9%)页面背景
bg页面底色
#fafaf9rgb(250, 250, 249)hsl(60, 9.1%, 97.8%)搭配建议
依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。
主色偏亮，适合大面积铺底，记得用更深的文字色与边框保证正文对比度。
适合适合做强调色，而不是大面积主色：价格、促销、错误提示，还有需要第一眼就被看到的地方。
慎用金融、医疗等需要稳定与信任感的场景要慎用，容易显得激进、有攻击性。
搭配与中性灰、白搭配最稳；把蓝色留给确认状态，红色只留给危险和重点。
用在真实界面里是什么样
同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。
实时预览 · 点击切换端
9:41
今日推荐
周末去海边
这是一段正文示例，用来检验次级文字色在卡片背景上的可读性。
查看详情 →主要按钮
次要按钮
禁用状态
无障碍对比度检查
按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 14.67:1 | AAA | AAA |
| 主色 / 页面背景 | 3.51:1 | AA | AA |
同端其他配色
同一端里色系或标签相近的几套，接着往下看。
导出到你的项目
四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。
CSS 变量
:root {
--color-primary: #b3766b; /* 主色 */
--color-primaryDark: #915146; /* 主色·深 */
--color-primaryLight: #e6dddb; /* 主色·浅 */
--color-secondary: #7cb6a2; /* 辅色 */
--color-accent: #57b6c7; /* 强调色 */
--color-success: #31af66; /* 成功 */
--color-warning: #eba71e; /* 警告 */
--color-danger: #db4439; /* 危险 */
--color-text: #292423; /* 文字 */
--color-bg: #fafaf9; /* 页面背景 */
}SCSS 变量
$color-primary: #b3766b; // 主色
$color-primaryDark: #915146; // 主色·深
$color-primaryLight: #e6dddb; // 主色·浅
$color-secondary: #7cb6a2; // 辅色
$color-accent: #57b6c7; // 强调色
$color-success: #31af66; // 成功
$color-warning: #eba71e; // 警告
$color-danger: #db4439; // 危险
$color-text: #292423; // 文字
$color-bg: #fafaf9; // 页面背景Tailwind 配置
// tailwind.config.js：霜叶丹
module.exports = {
theme: {
extend: {
colors: {
'primary': '#b3766b',
'primaryDark': '#915146',
'primaryLight': '#e6dddb',
'secondary': '#7cb6a2',
'accent': '#57b6c7',
'success': '#31af66',
'warning': '#eba71e',
'danger': '#db4439',
'text': '#292423',
'bg': '#fafaf9',
},
},
},
};机器可读 JSON
{
"name": "霜叶丹",
"platform": "app",
"tags": [
"莫兰迪",
"红"
],
"advice": {
"family": "红",
"depth": "主色偏亮，适合大面积铺底，记得用更深的文字色与边框保证正文对比度。",
"muted": null,
"suit": "适合做强调色，而不是大面积主色：价格、促销、错误提示，还有需要第一眼就被看到的地方。",
"avoid": "金融、医疗等需要稳定与信任感的场景要慎用，容易显得激进、有攻击性。",
"pair": "与中性灰、白搭配最稳；把蓝色留给确认状态，红色只留给危险和重点。"
},
"roles": {
"primary": "#b3766b",
"primaryDark": "#915146",
"primaryLight": "#e6dddb",
"secondary": "#7cb6a2",
"accent": "#57b6c7",
"success": "#31af66",
"warning": "#eba71e",
"danger": "#db4439",
"text": "#292423",
"bg": "#fafaf9"
},
"contrast": {
"textOnBg": {
"ratio": 14.67,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 3.51,
"level": "AA"
}
}
}