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

10 个颜色角色

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

主色 primary

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

#4c8df6rgb(76, 141, 246)hsl(217.1, 90.4%, 63.1%)

主色·深 primaryDark

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

#2f6bd4rgb(47, 107, 212)hsl(218.2, 65.7%, 50.8%)

主色·浅 primaryLight

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

#1e3a63rgb(30, 58, 99)hsl(215.7, 53.5%, 25.3%)

辅色 secondary

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

#8b7cf6rgb(139, 124, 246)hsl(247.4, 87.1%, 72.5%)

强调色 accent

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

#f2b33drgb(242, 179, 61)hsl(39.1, 87.4%, 59.4%)

成功 success

成功提示、完成状态

#3fbf7frgb(63, 191, 127)hsl(150, 50.4%, 49.8%)

警告 warning

警告提示、待处理状态

#e8b341rgb(232, 179, 65)hsl(41, 78.4%, 58.2%)

危险 danger

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

#f2685ergb(242, 104, 94)hsl(4.1, 85.1%, 65.9%)

文字 text

正文主文字色

#e8ecf4rgb(232, 236, 244)hsl(220, 35.3%, 93.3%)

页面背景 bg

页面底色

#12161frgb(18, 22, 31)hsl(221.5, 26.5%, 9.6%)

搭配建议

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

主色偏亮，适合大面积铺底，记得用更深的文字色与边框保证正文对比度。

适合适合需要长时间注视的界面，蓝色对眼睛最友好。

慎用冷蓝在需要热情与行动感的促销场景里偏冷静，激发力不足。

搭配与白、浅灰是安全组合，加一点暖色（橙或黄）做行动号召，对比更清晰。

主色色系：蓝

用在真实界面里是什么样

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

实时预览 · 点击切换端

9:41

今日推荐

推荐附近

周末去海边

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

查看详情 →

主要按钮

次要按钮

禁用状态

首页发现我的

无障碍对比度检查

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

前景 / 背景	对比度	文字场景	大字号场景
主文字 / 页面背景	15.29:1	AAA	AAA
主色 / 页面背景	5.56:1	AAA	AAA

用检查器验证这对颜色 →

导出到你的项目

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

CSS 变量

:root {
  --color-primary: #4c8df6; /* 主色 */
  --color-primaryDark: #2f6bd4; /* 主色·深 */
  --color-primaryLight: #1e3a63; /* 主色·浅 */
  --color-secondary: #8b7cf6; /* 辅色 */
  --color-accent: #f2b33d; /* 强调色 */
  --color-success: #3fbf7f; /* 成功 */
  --color-warning: #e8b341; /* 警告 */
  --color-danger: #f2685e; /* 危险 */
  --color-text: #e8ecf4; /* 文字 */
  --color-bg: #12161f; /* 页面背景 */
}

SCSS 变量

$color-primary: #4c8df6; // 主色
$color-primaryDark: #2f6bd4; // 主色·深
$color-primaryLight: #1e3a63; // 主色·浅
$color-secondary: #8b7cf6; // 辅色
$color-accent: #f2b33d; // 强调色
$color-success: #3fbf7f; // 成功
$color-warning: #e8b341; // 警告
$color-danger: #f2685e; // 危险
$color-text: #e8ecf4; // 文字
$color-bg: #12161f; // 页面背景

Tailwind 配置

// tailwind.config.js：墨蓝夜
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#4c8df6',
        'primaryDark': '#2f6bd4',
        'primaryLight': '#1e3a63',
        'secondary': '#8b7cf6',
        'accent': '#f2b33d',
        'success': '#3fbf7f',
        'warning': '#e8b341',
        'danger': '#f2685e',
        'text': '#e8ecf4',
        'bg': '#12161f',
      },
    },
  },
};

机器可读 JSON

{
  "name": "墨蓝夜",
  "platform": "app",
  "tags": [
    "暗黑",
    "商务",
    "高对比"
  ],
  "advice": {
    "family": "蓝",
    "depth": "主色偏亮，适合大面积铺底，记得用更深的文字色与边框保证正文对比度。",
    "muted": null,
    "suit": "适合需要长时间注视的界面，蓝色对眼睛最友好。",
    "avoid": "冷蓝在需要热情与行动感的促销场景里偏冷静，激发力不足。",
    "pair": "与白、浅灰是安全组合，加一点暖色（橙或黄）做行动号召，对比更清晰。"
  },
  "roles": {
    "primary": "#4c8df6",
    "primaryDark": "#2f6bd4",
    "primaryLight": "#1e3a63",
    "secondary": "#8b7cf6",
    "accent": "#f2b33d",
    "success": "#3fbf7f",
    "warning": "#e8b341",
    "danger": "#f2685e",
    "text": "#e8ecf4",
    "bg": "#12161f"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 15.29,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 5.56,
      "level": "AAA"
    }
  }
}

同端其他配色