10 个颜色角色
每个颜色都有明确用途，点右侧按钮即可复制对应格式。
主色
primary品牌主色，用于主要按钮、选中态、强调元素
#3e8e5argb(62, 142, 90)hsl(141, 39.2%, 40%)主色·深
primaryDark主色按下态 / 深色背景上的主色
#2a6b41rgb(42, 107, 65)hsl(141.2, 43.6%, 29.2%)主色·浅
primaryLight主色浅底、标签背景、选中弱化态
#bcdfc7rgb(188, 223, 199)hsl(138.9, 35.4%, 80.6%)辅色
secondary与主色搭配的次要色，用于次级按钮、图标
#c9a227rgb(201, 162, 39)hsl(45.6, 67.5%, 47.1%)强调色
accent点缀色，用于角标、高亮提示
#e06b3crgb(224, 107, 60)hsl(17.2, 72.6%, 55.7%)成功
success成功提示、完成状态
#43a854rgb(67, 168, 84)hsl(130.1, 43%, 46.1%)警告
warning警告提示、待处理状态
#dfa626rgb(223, 166, 38)hsl(41.5, 74.3%, 51.2%)危险
danger错误提示、删除操作、失败状态
#d0453brgb(208, 69, 59)hsl(4, 61.3%, 52.4%)文字
text正文主文字色
#1e2a22rgb(30, 42, 34)hsl(140, 16.7%, 14.1%)页面背景
bg页面底色
#f6fbf7rgb(246, 251, 247)hsl(132, 38.5%, 97.5%)搭配建议
依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。
主色明度居中，兼容性最好，浅色与深色主题都容易适配。
适合绿色的确认语义几乎是通用的，适合成功态与正向反馈。
慎用在强调稀缺与促销的场合不够抓眼，别拿它做促销主色。
搭配点缀一点暖橘能打破绿色的冷感，让画面活起来。
用在真实界面里是什么样
同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。
实时预览 · 点击切换端
9:41
今日推荐
周末去海边
这是一段正文示例，用来检验次级文字色在卡片背景上的可读性。
查看详情 →主要按钮
次要按钮
禁用状态
无障碍对比度检查
按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 14.23:1 | AAA | AAA |
| 主色 / 页面背景 | 3.84:1 | AA | AA |
同端其他配色
同一端里色系或标签相近的几套，接着往下看。
导出到你的项目
四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。
CSS 变量
:root {
--color-primary: #3e8e5a; /* 主色 */
--color-primaryDark: #2a6b41; /* 主色·深 */
--color-primaryLight: #bcdfc7; /* 主色·浅 */
--color-secondary: #c9a227; /* 辅色 */
--color-accent: #e06b3c; /* 强调色 */
--color-success: #43a854; /* 成功 */
--color-warning: #dfa626; /* 警告 */
--color-danger: #d0453b; /* 危险 */
--color-text: #1e2a22; /* 文字 */
--color-bg: #f6fbf7; /* 页面背景 */
}SCSS 变量
$color-primary: #3e8e5a; // 主色
$color-primaryDark: #2a6b41; // 主色·深
$color-primaryLight: #bcdfc7; // 主色·浅
$color-secondary: #c9a227; // 辅色
$color-accent: #e06b3c; // 强调色
$color-success: #43a854; // 成功
$color-warning: #dfa626; // 警告
$color-danger: #d0453b; // 危险
$color-text: #1e2a22; // 文字
$color-bg: #f6fbf7; // 页面背景Tailwind 配置
// tailwind.config.js：松林绿
module.exports = {
theme: {
extend: {
colors: {
'primary': '#3e8e5a',
'primaryDark': '#2a6b41',
'primaryLight': '#bcdfc7',
'secondary': '#c9a227',
'accent': '#e06b3c',
'success': '#43a854',
'warning': '#dfa626',
'danger': '#d0453b',
'text': '#1e2a22',
'bg': '#f6fbf7',
},
},
},
};机器可读 JSON
{
"name": "松林绿",
"platform": "app",
"tags": [
"自然",
"清新",
"森林"
],
"advice": {
"family": "绿",
"depth": "主色明度居中，兼容性最好，浅色与深色主题都容易适配。",
"muted": null,
"suit": "绿色的确认语义几乎是通用的，适合成功态与正向反馈。",
"avoid": "在强调稀缺与促销的场合不够抓眼，别拿它做促销主色。",
"pair": "点缀一点暖橘能打破绿色的冷感，让画面活起来。"
},
"roles": {
"primary": "#3e8e5a",
"primaryDark": "#2a6b41",
"primaryLight": "#bcdfc7",
"secondary": "#c9a227",
"accent": "#e06b3c",
"success": "#43a854",
"warning": "#dfa626",
"danger": "#d0453b",
"text": "#1e2a22",
"bg": "#f6fbf7"
},
"contrast": {
"textOnBg": {
"ratio": 14.23,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 3.84,
"level": "AA"
}
}
}