旧金箔 · APP 端配色方案（10 色 + 可复制色值）

10 个颜色角色

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

主色 primary

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

#ae7a24rgb(174, 122, 36)hsl(37.4, 65.7%, 41.2%)

主色·深 primaryDark

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

#845b18rgb(132, 91, 24)hsl(37.2, 69.2%, 30.6%)

主色·浅 primaryLight

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

#eed9a6rgb(238, 217, 166)hsl(42.5, 67.9%, 79.2%)

辅色 secondary

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

#a8574argb(168, 87, 74)hsl(8.3, 38.8%, 47.5%)

强调色 accent

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

#2e7d74rgb(46, 125, 116)hsl(173.2, 46.2%, 33.5%)

成功 success

成功提示、完成状态

#3f8a4ergb(63, 138, 78)hsl(132, 37.3%, 39.4%)

警告 warning

警告提示、待处理状态

#d99a27rgb(217, 154, 39)hsl(38.8, 70.1%, 50.2%)

危险 danger

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

#b4392crgb(180, 57, 44)hsl(5.7, 60.7%, 43.9%)

文字 text

正文主文字色

#33271ergb(51, 39, 30)hsl(25.7, 25.9%, 15.9%)

页面背景 bg

页面底色

#fbf5e9rgb(251, 245, 233)hsl(40, 69.2%, 94.9%)

搭配建议

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

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

适合适合活力与亲和力优先的场景：外卖、社区、教育、生活服务类产品。

慎用大面积使用容易显廉价，需要专业感的 B 端产品里要克制。

搭配同色系里用深浅橙做层次，比再混入第三种彩色更耐看。

主色色系：橙

用在真实界面里是什么样

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

实时预览 · 点击切换端

9:41

今日推荐

推荐附近

周末去海边

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

查看详情 →

主要按钮

次要按钮

禁用状态

首页发现我的

无障碍对比度检查

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

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

用检查器验证这对颜色 →

同端其他配色

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

导出到你的项目

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

CSS 变量

:root {
  --color-primary: #ae7a24; /* 主色 */
  --color-primaryDark: #845b18; /* 主色·深 */
  --color-primaryLight: #eed9a6; /* 主色·浅 */
  --color-secondary: #a8574a; /* 辅色 */
  --color-accent: #2e7d74; /* 强调色 */
  --color-success: #3f8a4e; /* 成功 */
  --color-warning: #d99a27; /* 警告 */
  --color-danger: #b4392c; /* 危险 */
  --color-text: #33271e; /* 文字 */
  --color-bg: #fbf5e9; /* 页面背景 */
}

SCSS 变量

$color-primary: #ae7a24; // 主色
$color-primaryDark: #845b18; // 主色·深
$color-primaryLight: #eed9a6; // 主色·浅
$color-secondary: #a8574a; // 辅色
$color-accent: #2e7d74; // 强调色
$color-success: #3f8a4e; // 成功
$color-warning: #d99a27; // 警告
$color-danger: #b4392c; // 危险
$color-text: #33271e; // 文字
$color-bg: #fbf5e9; // 页面背景

Tailwind 配置

// tailwind.config.js：旧金箔
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#ae7a24',
        'primaryDark': '#845b18',
        'primaryLight': '#eed9a6',
        'secondary': '#a8574a',
        'accent': '#2e7d74',
        'success': '#3f8a4e',
        'warning': '#d99a27',
        'danger': '#b4392c',
        'text': '#33271e',
        'bg': '#fbf5e9',
      },
    },
  },
};

机器可读 JSON

{
  "name": "旧金箔",
  "platform": "app",
  "tags": [
    "复古",
    "温暖",
    "日落"
  ],
  "advice": {
    "family": "橙",
    "depth": "主色明度居中，兼容性最好，浅色与深色主题都容易适配。",
    "muted": null,
    "suit": "适合活力与亲和力优先的场景：外卖、社区、教育、生活服务类产品。",
    "avoid": "大面积使用容易显廉价，需要专业感的 B 端产品里要克制。",
    "pair": "同色系里用深浅橙做层次，比再混入第三种彩色更耐看。"
  },
  "roles": {
    "primary": "#AE7A24",
    "primaryDark": "#845B18",
    "primaryLight": "#EED9A6",
    "secondary": "#A8574A",
    "accent": "#2E7D74",
    "success": "#3F8A4E",
    "warning": "#D99A27",
    "danger": "#B4392C",
    "text": "#33271E",
    "bg": "#FBF5E9"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 13.34,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.45,
      "level": "AA"
    }
  }
}