10 个颜色角色
每个颜色都有明确用途，点右侧按钮即可复制对应格式。
主色
primary品牌主色，用于主要按钮、选中态、强调元素
#9e8b21rgb(158, 139, 33)hsl(50.9, 65.4%, 37.5%)主色·深
primaryDark主色按下态 / 深色背景上的主色
#655813rgb(101, 88, 19)hsl(50.5, 68.3%, 23.5%)主色·浅
primaryLight主色浅底、标签背景、选中弱化态
#d9cd89rgb(217, 205, 137)hsl(51, 51.3%, 69.4%)辅色
secondary与主色搭配的次要色，用于次级按钮、图标
#38479crgb(56, 71, 156)hsl(231, 47.2%, 41.6%)强调色
accent点缀色，用于角标、高亮提示
#28aef6rgb(40, 174, 246)hsl(201, 92%, 56.1%)成功
success成功提示、完成状态
#22a559rgb(34, 165, 89)hsl(145.2, 65.8%, 39%)警告
warning警告提示、待处理状态
#e69d0argb(230, 157, 10)hsl(40.1, 91.7%, 47.1%)危险
danger错误提示、删除操作、失败状态
#e22518rgb(226, 37, 24)hsl(3.9, 80.8%, 49%)文字
text正文主文字色
#2d2b1frgb(45, 43, 31)hsl(51.4, 18.4%, 14.9%)页面背景
bg页面底色
#fbfbf9rgb(251, 251, 249)hsl(60, 20%, 98%)编辑点评 · APP 端
按这一端最常踩的坑逐条核对，结论由色值算出，不是套话。
主色按钮上的文字留意
余量偏小，界面元素密集时会吃力，建议只用在大字号或加粗处。
主色的按下态是否够深稳妥
这一项没问题，可以直接用。
点缀色会不会抢主色稳妥
这一项没问题，可以直接用。
主色在深色模式下的余量稳妥
这一项没问题，可以直接用。
搭配建议
依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。
这套配色的主色偏深、分量感强，适合深色主题，或需要传递专业、稳重印象的界面。
适合明度高、亲和力强，适合儿童、创意、零售场景的辅助色。
慎用纯黄放在白底上对比度通常不达标，绝不能用来做小字号正文。
搭配配黑色能做出强烈的警示感，配棕或咖色则更复古。
用在真实界面里是什么样
同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。
实时预览 · 点击切换端
9:41
今日推荐
周末去海边
这是一段正文示例，用来检验次级文字色在卡片背景上的可读性。
查看详情 →主要按钮
次要按钮
禁用状态
无障碍对比度检查
按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 13.72:1 | AAA | AAA |
| 主色 / 页面背景 | 3.29:1 | AA | AA |
同端其他配色
按色系与标签相近度排序，挑出最值得接着看的几套。
导出到你的项目
四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。
CSS 变量
:root {
--color-primary: #9e8b21; /* 主色 */
--color-primaryDark: #655813; /* 主色·深 */
--color-primaryLight: #d9cd89; /* 主色·浅 */
--color-secondary: #38479c; /* 辅色 */
--color-accent: #28aef6; /* 强调色 */
--color-success: #22a559; /* 成功 */
--color-warning: #e69d0a; /* 警告 */
--color-danger: #e22518; /* 危险 */
--color-text: #2d2b1f; /* 文字 */
--color-bg: #fbfbf9; /* 页面背景 */
}SCSS 变量
$color-primary: #9e8b21; // 主色
$color-primaryDark: #655813; // 主色·深
$color-primaryLight: #d9cd89; // 主色·浅
$color-secondary: #38479c; // 辅色
$color-accent: #28aef6; // 强调色
$color-success: #22a559; // 成功
$color-warning: #e69d0a; // 警告
$color-danger: #e22518; // 危险
$color-text: #2d2b1f; // 文字
$color-bg: #fbfbf9; // 页面背景Tailwind 配置
// tailwind.config.js：月色黄
module.exports = {
theme: {
extend: {
colors: {
'primary': '#9e8b21',
'primaryDark': '#655813',
'primaryLight': '#d9cd89',
'secondary': '#38479c',
'accent': '#28aef6',
'success': '#22a559',
'warning': '#e69d0a',
'danger': '#e22518',
'text': '#2d2b1f',
'bg': '#fbfbf9',
},
},
},
};机器可读 JSON
{
"name": "月色黄",
"platform": "app",
"tags": [
"高级灰",
"黄"
],
"advice": {
"family": "黄",
"depth": "这套配色的主色偏深、分量感强，适合深色主题，或需要传递专业、稳重印象的界面。",
"muted": null,
"suit": "明度高、亲和力强，适合儿童、创意、零售场景的辅助色。",
"avoid": "纯黄放在白底上对比度通常不达标，绝不能用来做小字号正文。",
"pair": "配黑色能做出强烈的警示感，配棕或咖色则更复古。"
},
"roles": {
"primary": "#9e8b21",
"primaryDark": "#655813",
"primaryLight": "#d9cd89",
"secondary": "#38479c",
"accent": "#28aef6",
"success": "#22a559",
"warning": "#e69d0a",
"danger": "#e22518",
"text": "#2d2b1f",
"bg": "#fbfbf9"
},
"contrast": {
"textOnBg": {
"ratio": 13.72,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 3.29,
"level": "AA"
}
}
}