窑变红 · APP 端配色方案（10 色 + 可复制色值）

10 个颜色角色

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

主色 primary

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

#a1363frgb(161, 54, 63)hsl(355, 49.8%, 42.2%)

主色·深 primaryDark

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

#6d2228rgb(109, 34, 40)hsl(355.2, 52.4%, 28%)

主色·浅 primaryLight

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

#d5a5a9rgb(213, 165, 169)hsl(355, 36.4%, 74.1%)

辅色 secondary

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

#52a04brgb(82, 160, 75)hsl(115.1, 36.2%, 46.1%)

强调色 accent

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

#43db82rgb(67, 219, 130)hsl(144.9, 67.9%, 56.1%)

成功 success

成功提示、完成状态

#29a85ergb(41, 168, 94)hsl(145, 60.8%, 41%)

警告 warning

警告提示、待处理状态

#f0a30argb(240, 163, 10)hsl(39.9, 92%, 49%)

危险 danger

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

#e13023rgb(225, 48, 35)hsl(4.1, 76%, 51%)

文字 text

正文主文字色

#292324rgb(41, 35, 36)hsl(350, 7.9%, 14.9%)

页面背景 bg

页面底色

#faf9f9rgb(250, 249, 249)hsl(0, 9.1%, 97.8%)

搭配建议

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

主色明度居中，兼容性最好，浅色与深色主题都容易适配。

适合适合餐饮、零售、内容营销类场景，能有效刺激食欲与购买欲。

慎用金融、医疗等需要稳定与信任感的场景要慎用，容易显得激进、有攻击性。

搭配与中性灰、白搭配最稳；把蓝色留给确认状态，红色只留给危险和重点。

主色色系：红

用在真实界面里是什么样

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

实时预览 · 点击切换端

9:41

今日推荐

推荐附近

周末去海边

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

查看详情 →

主要按钮

次要按钮

禁用状态

首页发现我的

无障碍对比度检查

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

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

用检查器验证这对颜色 →

导出到你的项目

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

CSS 变量

:root {
  --color-primary: #a1363f; /* 主色 */
  --color-primaryDark: #6d2228; /* 主色·深 */
  --color-primaryLight: #d5a5a9; /* 主色·浅 */
  --color-secondary: #52a04b; /* 辅色 */
  --color-accent: #43db82; /* 强调色 */
  --color-success: #29a85e; /* 成功 */
  --color-warning: #f0a30a; /* 警告 */
  --color-danger: #e13023; /* 危险 */
  --color-text: #292324; /* 文字 */
  --color-bg: #faf9f9; /* 页面背景 */
}

SCSS 变量

$color-primary: #a1363f; // 主色
$color-primaryDark: #6d2228; // 主色·深
$color-primaryLight: #d5a5a9; // 主色·浅
$color-secondary: #52a04b; // 辅色
$color-accent: #43db82; // 强调色
$color-success: #29a85e; // 成功
$color-warning: #f0a30a; // 警告
$color-danger: #e13023; // 危险
$color-text: #292324; // 文字
$color-bg: #faf9f9; // 页面背景

Tailwind 配置

// tailwind.config.js：窑变红
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#a1363f',
        'primaryDark': '#6d2228',
        'primaryLight': '#d5a5a9',
        'secondary': '#52a04b',
        'accent': '#43db82',
        'success': '#29a85e',
        'warning': '#f0a30a',
        'danger': '#e13023',
        'text': '#292324',
        'bg': '#faf9f9',
      },
    },
  },
};

机器可读 JSON

{
  "name": "窑变红",
  "platform": "app",
  "tags": [
    "冷静",
    "红"
  ],
  "advice": {
    "family": "红",
    "depth": "主色明度居中，兼容性最好，浅色与深色主题都容易适配。",
    "muted": null,
    "suit": "适合餐饮、零售、内容营销类场景，能有效刺激食欲与购买欲。",
    "avoid": "金融、医疗等需要稳定与信任感的场景要慎用，容易显得激进、有攻击性。",
    "pair": "与中性灰、白搭配最稳；把蓝色留给确认状态，红色只留给危险和重点。"
  },
  "roles": {
    "primary": "#a1363f",
    "primaryDark": "#6d2228",
    "primaryLight": "#d5a5a9",
    "secondary": "#52a04b",
    "accent": "#43db82",
    "success": "#29a85e",
    "warning": "#f0a30a",
    "danger": "#e13023",
    "text": "#292324",
    "bg": "#faf9f9"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.69,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 6.42,
      "level": "AAA"
    }
  }
}

同端其他配色