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

10 个颜色角色

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

主色 primary

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

#3d4076rgb(61, 64, 118)hsl(236.8, 31.8%, 35.1%)

主色·深 primaryDark

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

#232548rgb(35, 37, 72)hsl(236.8, 34.6%, 21%)

主色·浅 primaryLight

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

#9c9dbargb(156, 157, 186)hsl(238, 17.9%, 67.1%)

辅色 secondary

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

#7f6148rgb(127, 97, 72)hsl(27.3, 27.6%, 39%)

强调色 accent

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

#c78957rgb(199, 137, 87)hsl(26.8, 50%, 56.1%)

成功 success

成功提示、完成状态

#2c9b5argb(44, 155, 90)hsl(144.9, 55.8%, 39%)

警告 warning

警告提示、待处理状态

#dd9913rgb(221, 153, 19)hsl(39.8, 84.2%, 47.1%)

危险 danger

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

#d33227rgb(211, 50, 39)hsl(3.8, 68.8%, 49%)

文字 text

正文主文字色

#232329rgb(35, 35, 41)hsl(240, 7.9%, 14.9%)

页面背景 bg

页面底色

#f9f9fargb(249, 249, 250)hsl(240, 9.1%, 97.8%)

搭配建议

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

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

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

慎用用得实在太普遍，容易没个性，需要靠辅色和排版做出差异。

搭配配深蓝做层次、配白做通透，是最不容易出错的两条路。

主色色系：蓝

用在真实界面里是什么样

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

实时预览 · 点击切换端

9:41

今日推荐

推荐附近

周末去海边

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

查看详情 →

主要按钮

次要按钮

禁用状态

首页发现我的

无障碍对比度检查

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

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

用检查器验证这对颜色 →

导出到你的项目

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

CSS 变量

:root {
  --color-primary: #3d4076; /* 主色 */
  --color-primaryDark: #232548; /* 主色·深 */
  --color-primaryLight: #9c9dba; /* 主色·浅 */
  --color-secondary: #7f6148; /* 辅色 */
  --color-accent: #c78957; /* 强调色 */
  --color-success: #2c9b5a; /* 成功 */
  --color-warning: #dd9913; /* 警告 */
  --color-danger: #d33227; /* 危险 */
  --color-text: #232329; /* 文字 */
  --color-bg: #f9f9fa; /* 页面背景 */
}

SCSS 变量

$color-primary: #3d4076; // 主色
$color-primaryDark: #232548; // 主色·深
$color-primaryLight: #9c9dba; // 主色·浅
$color-secondary: #7f6148; // 辅色
$color-accent: #c78957; // 强调色
$color-success: #2c9b5a; // 成功
$color-warning: #dd9913; // 警告
$color-danger: #d33227; // 危险
$color-text: #232329; // 文字
$color-bg: #f9f9fa; // 页面背景

Tailwind 配置

// tailwind.config.js：初雪蓝
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3d4076',
        'primaryDark': '#232548',
        'primaryLight': '#9c9dba',
        'secondary': '#7f6148',
        'accent': '#c78957',
        'success': '#2c9b5a',
        'warning': '#dd9913',
        'danger': '#d33227',
        'text': '#232329',
        'bg': '#f9f9fa',
      },
    },
  },
};

机器可读 JSON

{
  "name": "初雪蓝",
  "platform": "app",
  "tags": [
    "森林",
    "蓝"
  ],
  "advice": {
    "family": "蓝",
    "depth": "这套配色的主色偏深、分量感强，适合深色主题，或需要传递专业、稳重印象的界面。",
    "muted": null,
    "suit": "适合需要长时间注视的界面，蓝色对眼睛最友好。",
    "avoid": "用得实在太普遍，容易没个性，需要靠辅色和排版做出差异。",
    "pair": "配深蓝做层次、配白做通透，是最不容易出错的两条路。"
  },
  "roles": {
    "primary": "#3d4076",
    "primaryDark": "#232548",
    "primaryLight": "#9c9dba",
    "secondary": "#7f6148",
    "accent": "#c78957",
    "success": "#2c9b5a",
    "warning": "#dd9913",
    "danger": "#d33227",
    "text": "#232329",
    "bg": "#f9f9fa"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.85,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 9.1,
      "level": "AAA"
    }
  }
}

同端其他配色