10 个颜色角色
每个颜色都有明确用途，点右侧按钮即可复制对应格式。
主色
primary品牌主色，用于主要按钮、选中态、强调元素
#9c7c8crgb(156, 124, 140)hsl(330, 13.9%, 54.9%)主色·深
primaryDark主色按下态 / 深色背景上的主色
#78596argb(120, 89, 106)hsl(327.1, 14.8%, 41%)主色·浅
primaryLight主色浅底、标签背景、选中弱化态
#e2d3dargb(226, 211, 218)hsl(332, 20.5%, 85.7%)辅色
secondary与主色搭配的次要色，用于次级按钮、图标
#7e8fa6rgb(126, 143, 166)hsl(214.5, 18.3%, 57.3%)强调色
accent点缀色，用于角标、高亮提示
#c98a6brgb(201, 138, 107)hsl(19.8, 46.5%, 60.4%)成功
success成功提示、完成状态
#6fa07argb(111, 160, 122)hsl(133.5, 20.5%, 53.1%)警告
warning警告提示、待处理状态
#d2a75crgb(210, 167, 92)hsl(38.1, 56.7%, 59.2%)危险
danger错误提示、删除操作、失败状态
#c4665frgb(196, 102, 95)hsl(4.2, 46.1%, 57.1%)文字
text正文主文字色
#2e2830rgb(46, 40, 48)hsl(285, 9.1%, 17.3%)页面背景
bg页面底色
#faf7f8rgb(250, 247, 248)hsl(340, 23.1%, 97.5%)搭配建议
依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。
主色明度居中，兼容性最好，浅色与深色主题都容易适配。 这套配色的主色饱和度偏低、接近灰调，更耐看也更高级，但容易显得没精神，建议靠明度层次和排版把画面撑住。
适合适合需要温柔、年轻调性的产品。
慎用用量过大容易甜腻，高饱和时尤其明显。
搭配与灰、白搭配不会过于甜腻，点缀一点深莓紫能增加层次。
用在真实界面里是什么样
同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。
实时预览 · 点击切换端
9:41
今日推荐
周末去海边
这是一段正文示例，用来检验次级文字色在卡片背景上的可读性。
查看详情 →主要按钮
次要按钮
禁用状态
无障碍对比度检查
按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 13.49:1 | AAA | AAA |
| 主色 / 页面背景 | 3.48:1 | AA | AA |
同端其他配色
同一端里色系或标签相近的几套，接着往下看。
导出到你的项目
四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。
CSS 变量
:root {
--color-primary: #9c7c8c; /* 主色 */
--color-primaryDark: #78596a; /* 主色·深 */
--color-primaryLight: #e2d3da; /* 主色·浅 */
--color-secondary: #7e8fa6; /* 辅色 */
--color-accent: #c98a6b; /* 强调色 */
--color-success: #6fa07a; /* 成功 */
--color-warning: #d2a75c; /* 警告 */
--color-danger: #c4665f; /* 危险 */
--color-text: #2e2830; /* 文字 */
--color-bg: #faf7f8; /* 页面背景 */
}SCSS 变量
$color-primary: #9c7c8c; // 主色
$color-primaryDark: #78596a; // 主色·深
$color-primaryLight: #e2d3da; // 主色·浅
$color-secondary: #7e8fa6; // 辅色
$color-accent: #c98a6b; // 强调色
$color-success: #6fa07a; // 成功
$color-warning: #d2a75c; // 警告
$color-danger: #c4665f; // 危险
$color-text: #2e2830; // 文字
$color-bg: #faf7f8; // 页面背景Tailwind 配置
// tailwind.config.js：雾瑰灰
module.exports = {
theme: {
extend: {
colors: {
'primary': '#9c7c8c',
'primaryDark': '#78596a',
'primaryLight': '#e2d3da',
'secondary': '#7e8fa6',
'accent': '#c98a6b',
'success': '#6fa07a',
'warning': '#d2a75c',
'danger': '#c4665f',
'text': '#2e2830',
'bg': '#faf7f8',
},
},
},
};机器可读 JSON
{
"name": "雾瑰灰",
"platform": "app",
"tags": [
"莫兰迪",
"温柔",
"高级灰"
],
"advice": {
"family": "粉",
"depth": "主色明度居中，兼容性最好，浅色与深色主题都容易适配。",
"muted": "这套配色的主色饱和度偏低、接近灰调，更耐看也更高级，但容易显得没精神，建议靠明度层次和排版把画面撑住。",
"suit": "适合需要温柔、年轻调性的产品。",
"avoid": "用量过大容易甜腻，高饱和时尤其明显。",
"pair": "与灰、白搭配不会过于甜腻，点缀一点深莓紫能增加层次。"
},
"roles": {
"primary": "#9c7c8c",
"primaryDark": "#78596a",
"primaryLight": "#e2d3da",
"secondary": "#7e8fa6",
"accent": "#c98a6b",
"success": "#6fa07a",
"warning": "#d2a75c",
"danger": "#c4665f",
"text": "#2e2830",
"bg": "#faf7f8"
},
"contrast": {
"textOnBg": {
"ratio": 13.49,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 3.48,
"level": "AA"
}
}
}