墨野青 · APP 端配色方案（10 色 + 可复制色值）

10 个颜色角色

每个颜色都有明确用途，点右侧按钮即可复制对应格式。

主色 primary

品牌主色，用于主要按钮、选中态、强调元素

#2f8f83rgb(47, 143, 131)hsl(172.5, 50.5%, 37.3%)

主色·深 primaryDark

主色按下态 / 深色背景上的主色

#1f6b62rgb(31, 107, 98)hsl(172.9, 55.1%, 27.1%)

主色·浅 primaryLight

主色浅底、标签背景、选中弱化态

#a8dad2rgb(168, 218, 210)hsl(170.4, 40.3%, 75.7%)

辅色 secondary

与主色搭配的次要色，用于次级按钮、图标

#4a6fa5rgb(74, 111, 165)hsl(215.6, 38.1%, 46.9%)

强调色 accent

点缀色，用于角标、高亮提示

#e8604crgb(232, 96, 76)hsl(7.7, 77.2%, 60.4%)

成功 success

成功提示、完成状态

#2fa36brgb(47, 163, 107)hsl(151, 55.2%, 41.2%)

警告 warning

警告提示、待处理状态

#e0a63crgb(224, 166, 60)hsl(38.8, 72.6%, 55.7%)

危险 danger

错误提示、删除操作、失败状态

#d9443ergb(217, 68, 62)hsl(2.3, 67.1%, 54.7%)

文字 text

正文主文字色

#1f2a2ergb(31, 42, 46)hsl(196, 19.5%, 15.1%)

页面背景 bg

页面底色

#f7faf9rgb(247, 250, 249)hsl(160, 23.1%, 97.5%)

搭配建议

依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。

这套配色的主色偏深、分量感强，适合深色主题，或需要传递专业、稳重印象的界面。

适合适合做数据可视化的中性主色，不抢数据本身的语义色。

慎用青色太弱会显得没有立场，需要靠辅色补足个性。

搭配与深蓝、石墨灰搭配稳妥，点缀一点暖橙能立刻提神。

主色色系：青

用在真实界面里是什么样

同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。

实时预览 · 点击切换端

9:41

今日推荐

推荐附近

周末去海边

这是一段正文示例，用来检验次级文字色在卡片背景上的可读性。

查看详情 →

主要按钮

次要按钮

禁用状态

首页发现我的

无障碍对比度检查

按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。

前景 / 背景	对比度	文字场景	大字号场景
主文字 / 页面背景	13.99:1	AAA	AAA
主色 / 页面背景	3.72:1	AA	AA

用检查器验证这对颜色 →

同端其他配色

按色系与标签相近度排序，挑出最值得接着看的几套。

导出到你的项目

四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。

CSS 变量

:root {
  --color-primary: #2f8f83; /* 主色 */
  --color-primaryDark: #1f6b62; /* 主色·深 */
  --color-primaryLight: #a8dad2; /* 主色·浅 */
  --color-secondary: #4a6fa5; /* 辅色 */
  --color-accent: #e8604c; /* 强调色 */
  --color-success: #2fa36b; /* 成功 */
  --color-warning: #e0a63c; /* 警告 */
  --color-danger: #d9443e; /* 危险 */
  --color-text: #1f2a2e; /* 文字 */
  --color-bg: #f7faf9; /* 页面背景 */
}

SCSS 变量

$color-primary: #2f8f83; // 主色
$color-primaryDark: #1f6b62; // 主色·深
$color-primaryLight: #a8dad2; // 主色·浅
$color-secondary: #4a6fa5; // 辅色
$color-accent: #e8604c; // 强调色
$color-success: #2fa36b; // 成功
$color-warning: #e0a63c; // 警告
$color-danger: #d9443e; // 危险
$color-text: #1f2a2e; // 文字
$color-bg: #f7faf9; // 页面背景

Tailwind 配置

// tailwind.config.js：墨野青
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#2f8f83',
        'primaryDark': '#1f6b62',
        'primaryLight': '#a8dad2',
        'secondary': '#4a6fa5',
        'accent': '#e8604c',
        'success': '#2fa36b',
        'warning': '#e0a63c',
        'danger': '#d9443e',
        'text': '#1f2a2e',
        'bg': '#f7faf9',
      },
    },
  },
};

机器可读 JSON

{
  "name": "墨野青",
  "platform": "app",
  "tags": [
    "科技",
    "冷静",
    "低饱和"
  ],
  "advice": {
    "family": "青",
    "depth": "这套配色的主色偏深、分量感强，适合深色主题，或需要传递专业、稳重印象的界面。",
    "muted": null,
    "suit": "适合做数据可视化的中性主色，不抢数据本身的语义色。",
    "avoid": "青色太弱会显得没有立场，需要靠辅色补足个性。",
    "pair": "与深蓝、石墨灰搭配稳妥，点缀一点暖橙能立刻提神。"
  },
  "roles": {
    "primary": "#2f8f83",
    "primaryDark": "#1f6b62",
    "primaryLight": "#a8dad2",
    "secondary": "#4a6fa5",
    "accent": "#e8604c",
    "success": "#2fa36b",
    "warning": "#e0a63c",
    "danger": "#d9443e",
    "text": "#1f2a2e",
    "bg": "#f7faf9"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 13.99,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.72,
      "level": "AA"
    }
  }
}