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

10 个颜色角色

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

主色 primary

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

#f02b45rgb(240, 43, 69)hsl(352.1, 86.8%, 55.5%)

主色·深 primaryDark

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

#c90a24rgb(201, 10, 36)hsl(351.8, 90.5%, 41.4%)

主色·浅 primaryLight

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

#f6c8cergb(246, 200, 206)hsl(352.2, 71.9%, 87.5%)

辅色 secondary

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

#57d986rgb(87, 217, 134)hsl(141.7, 63.1%, 59.6%)

强调色 accent

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

#28f6dargb(40, 246, 218)hsl(171.8, 92%, 56.1%)

成功 success

成功提示、完成状态

#1fc163rgb(31, 193, 99)hsl(145.2, 72.3%, 43.9%)

警告 warning

警告提示、待处理状态

#f5aa14rgb(245, 170, 20)hsl(40, 91.8%, 52%)

危险 danger

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

#f22f21rgb(242, 47, 33)hsl(4, 88.9%, 53.9%)

文字 text

正文主文字色

#2d1f21rgb(45, 31, 33)hsl(351.4, 18.4%, 14.9%)

页面背景 bg

页面底色

#fbf9f9rgb(251, 249, 249)hsl(0, 20%, 98%)

搭配建议

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

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

适合适合做强调色，而不是大面积主色：价格、促销、错误提示，还有需要第一眼就被看到的地方。

慎用不要拿它做大块背景或长文本底色，大面积红会让人视觉疲劳。

搭配搭配低饱和的暖米色或深灰，能把红压住，保有分量又不吵闹。

主色色系：红

用在真实界面里是什么样

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

实时预览 · 点击切换端

9:41

今日推荐

推荐附近

周末去海边

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

查看详情 →

主要按钮

次要按钮

禁用状态

首页发现我的

无障碍对比度检查

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

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

用检查器验证这对颜色 →

同端其他配色

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

导出到你的项目

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

CSS 变量

:root {
  --color-primary: #f02b45; /* 主色 */
  --color-primaryDark: #c90a24; /* 主色·深 */
  --color-primaryLight: #f6c8ce; /* 主色·浅 */
  --color-secondary: #57d986; /* 辅色 */
  --color-accent: #28f6da; /* 强调色 */
  --color-success: #1fc163; /* 成功 */
  --color-warning: #f5aa14; /* 警告 */
  --color-danger: #f22f21; /* 危险 */
  --color-text: #2d1f21; /* 文字 */
  --color-bg: #fbf9f9; /* 页面背景 */
}

SCSS 变量

$color-primary: #f02b45; // 主色
$color-primaryDark: #c90a24; // 主色·深
$color-primaryLight: #f6c8ce; // 主色·浅
$color-secondary: #57d986; // 辅色
$color-accent: #28f6da; // 强调色
$color-success: #1fc163; // 成功
$color-warning: #f5aa14; // 警告
$color-danger: #f22f21; // 危险
$color-text: #2d1f21; // 文字
$color-bg: #fbf9f9; // 页面背景

Tailwind 配置

// tailwind.config.js：山茶红
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#f02b45',
        'primaryDark': '#c90a24',
        'primaryLight': '#f6c8ce',
        'secondary': '#57d986',
        'accent': '#28f6da',
        'success': '#1fc163',
        'warning': '#f5aa14',
        'danger': '#f22f21',
        'text': '#2d1f21',
        'bg': '#fbf9f9',
      },
    },
  },
};

机器可读 JSON

{
  "name": "山茶红",
  "platform": "app",
  "tags": [
    "莓果",
    "红"
  ],
  "advice": {
    "family": "红",
    "depth": "主色偏亮，适合大面积铺底，记得用更深的文字色与边框保证正文对比度。",
    "muted": null,
    "suit": "适合做强调色，而不是大面积主色：价格、促销、错误提示，还有需要第一眼就被看到的地方。",
    "avoid": "不要拿它做大块背景或长文本底色，大面积红会让人视觉疲劳。",
    "pair": "搭配低饱和的暖米色或深灰，能把红压住，保有分量又不吵闹。"
  },
  "roles": {
    "primary": "#f02b45",
    "primaryDark": "#c90a24",
    "primaryLight": "#f6c8ce",
    "secondary": "#57d986",
    "accent": "#28f6da",
    "success": "#1fc163",
    "warning": "#f5aa14",
    "danger": "#f22f21",
    "text": "#2d1f21",
    "bg": "#fbf9f9"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 15.06,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.9,
      "level": "AA"
    }
  }
}