10 个颜色角色
每个颜色都有明确用途，点右侧按钮即可复制对应格式。
主色
primary品牌主色，用于主要按钮、选中态、强调元素
#4a27cbrgb(74, 39, 203)hsl(252.8, 67.8%, 47.5%)主色·深
primaryDark主色按下态 / 深色背景上的主色
#331992rgb(51, 25, 146)hsl(252.9, 70.8%, 33.5%)主色·浅
primaryLight主色浅底、标签背景、选中弱化态
#bbaee7rgb(187, 174, 231)hsl(253.7, 54.3%, 79.4%)辅色
secondary与主色搭配的次要色，用于次级按钮、图标
#c04769rgb(192, 71, 105)hsl(343.1, 49%, 51.6%)强调色
accent点缀色，用于角标、高亮提示
#f6bc28rgb(246, 188, 40)hsl(43.1, 92%, 56.1%)成功
success成功提示、完成状态
#24b25frgb(36, 178, 95)hsl(144.9, 66.4%, 42%)警告
warning警告提示、待处理状态
#f5a70argb(245, 167, 10)hsl(40.1, 92.2%, 50%)危险
danger错误提示、删除操作、失败状态
#e92e20rgb(233, 46, 32)hsl(4.2, 82%, 52%)文字
text正文主文字色
#221f2drgb(34, 31, 45)hsl(252.9, 18.4%, 14.9%)页面背景
bg页面底色
#f9f9fbrgb(249, 249, 251)hsl(240, 20%, 98%)编辑点评 · APP 端
按这一端最常踩的坑逐条核对，结论由色值算出，不是套话。
主色按钮上的文字稳妥
这一项没问题，可以直接用。
主色的按下态是否够深稳妥
这一项没问题，可以直接用。
点缀色会不会抢主色稳妥
这一项没问题，可以直接用。
主色在深色模式下的余量留意
该色在背景上偏亮，深色文字压不住它，建议降低明度或只作大面积填充。
搭配建议
依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。
主色明度居中，兼容性最好，浅色与深色主题都容易适配。
适合适合需要长时间注视的界面，蓝色对眼睛最友好。
慎用用得实在太普遍，容易没个性，需要靠辅色和排版做出差异。
搭配配深蓝做层次、配白做通透，是最不容易出错的两条路。
用在真实界面里是什么样
同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。
实时预览 · 点击切换端
9:41
今日推荐
周末去海边
这是一段正文示例，用来检验次级文字色在卡片背景上的可读性。
查看详情 →主要按钮
次要按钮
禁用状态
无障碍对比度检查
按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 15.34:1 | AAA | AAA |
| 主色 / 页面背景 | 8.17:1 | AAA | AAA |
同端其他配色
按色系与标签相近度排序，挑出最值得接着看的几套。
导出到你的项目
四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。
CSS 变量
:root {
--color-primary: #4a27cb; /* 主色 */
--color-primaryDark: #331992; /* 主色·深 */
--color-primaryLight: #bbaee7; /* 主色·浅 */
--color-secondary: #c04769; /* 辅色 */
--color-accent: #f6bc28; /* 强调色 */
--color-success: #24b25f; /* 成功 */
--color-warning: #f5a70a; /* 警告 */
--color-danger: #e92e20; /* 危险 */
--color-text: #221f2d; /* 文字 */
--color-bg: #f9f9fb; /* 页面背景 */
}SCSS 变量
$color-primary: #4a27cb; // 主色
$color-primaryDark: #331992; // 主色·深
$color-primaryLight: #bbaee7; // 主色·浅
$color-secondary: #c04769; // 辅色
$color-accent: #f6bc28; // 强调色
$color-success: #24b25f; // 成功
$color-warning: #f5a70a; // 警告
$color-danger: #e92e20; // 危险
$color-text: #221f2d; // 文字
$color-bg: #f9f9fb; // 页面背景Tailwind 配置
// tailwind.config.js：雪岭蓝
module.exports = {
theme: {
extend: {
colors: {
'primary': '#4a27cb',
'primaryDark': '#331992',
'primaryLight': '#bbaee7',
'secondary': '#c04769',
'accent': '#f6bc28',
'success': '#24b25f',
'warning': '#f5a70a',
'danger': '#e92e20',
'text': '#221f2d',
'bg': '#f9f9fb',
},
},
},
};机器可读 JSON
{
"name": "雪岭蓝",
"platform": "app",
"tags": [
"复古",
"蓝"
],
"advice": {
"family": "蓝",
"depth": "主色明度居中，兼容性最好，浅色与深色主题都容易适配。",
"muted": null,
"suit": "适合需要长时间注视的界面，蓝色对眼睛最友好。",
"avoid": "用得实在太普遍，容易没个性，需要靠辅色和排版做出差异。",
"pair": "配深蓝做层次、配白做通透，是最不容易出错的两条路。"
},
"roles": {
"primary": "#4a27cb",
"primaryDark": "#331992",
"primaryLight": "#bbaee7",
"secondary": "#c04769",
"accent": "#f6bc28",
"success": "#24b25f",
"warning": "#f5a70a",
"danger": "#e92e20",
"text": "#221f2d",
"bg": "#f9f9fb"
},
"contrast": {
"textOnBg": {
"ratio": 15.34,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 8.17,
"level": "AAA"
}
}
}