暖橙屿 · APP 端配色方案（10 色 + 可复制色值）

10 个颜色角色

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

主色 primary

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

#d96a24rgb(217, 106, 36)hsl(23.2, 71.5%, 49.6%)

主色·深 primaryDark

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

#a34d14rgb(163, 77, 20)hsl(23.9, 78.1%, 35.9%)

主色·浅 primaryLight

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

#fbd4b6rgb(251, 212, 182)hsl(26.1, 89.6%, 84.9%)

辅色 secondary

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

#2f6e80rgb(47, 110, 128)hsl(193.3, 46.3%, 34.3%)

强调色 accent

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

#4c6fe0rgb(76, 111, 224)hsl(225.8, 70.5%, 58.8%)

成功 success

成功提示、完成状态

#2a8a50rgb(42, 138, 80)hsl(143.8, 53.3%, 35.3%)

警告 warning

警告提示、待处理状态

#c8860frgb(200, 134, 15)hsl(38.6, 86%, 42.2%)

危险 danger

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

#b8332brgb(184, 51, 43)hsl(3.4, 62.1%, 44.5%)

文字 text

正文主文字色

#2b2118rgb(43, 33, 24)hsl(28.4, 28.4%, 13.1%)

页面背景 bg

页面底色

#fff9f4rgb(255, 249, 244)hsl(27.3, 100%, 97.8%)

搭配建议

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

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

适合比红更放松、比黄更沉稳，适合需要亲近感又不想太跳的界面。

慎用与高饱和的红、黄同场会互相抢戏，暖色最好只留一个主角。

搭配配深蓝能立刻变得稳重，配浅木色、米白则更有生活气息。

主色色系：橙

用在真实界面里是什么样

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

实时预览 · 点击切换端

9:41

今日推荐

推荐附近

周末去海边

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

查看详情 →

主要按钮

次要按钮

禁用状态

首页发现我的

无障碍对比度检查

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

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

用检查器验证这对颜色 →

导出到你的项目

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

CSS 变量

:root {
  --color-primary: #d96a24; /* 主色 */
  --color-primaryDark: #a34d14; /* 主色·深 */
  --color-primaryLight: #fbd4b6; /* 主色·浅 */
  --color-secondary: #2f6e80; /* 辅色 */
  --color-accent: #4c6fe0; /* 强调色 */
  --color-success: #2a8a50; /* 成功 */
  --color-warning: #c8860f; /* 警告 */
  --color-danger: #b8332b; /* 危险 */
  --color-text: #2b2118; /* 文字 */
  --color-bg: #fff9f4; /* 页面背景 */
}

SCSS 变量

$color-primary: #d96a24; // 主色
$color-primaryDark: #a34d14; // 主色·深
$color-primaryLight: #fbd4b6; // 主色·浅
$color-secondary: #2f6e80; // 辅色
$color-accent: #4c6fe0; // 强调色
$color-success: #2a8a50; // 成功
$color-warning: #c8860f; // 警告
$color-danger: #b8332b; // 危险
$color-text: #2b2118; // 文字
$color-bg: #fff9f4; // 页面背景

Tailwind 配置

// tailwind.config.js：暖橙屿
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#d96a24',
        'primaryDark': '#a34d14',
        'primaryLight': '#fbd4b6',
        'secondary': '#2f6e80',
        'accent': '#4c6fe0',
        'success': '#2a8a50',
        'warning': '#c8860f',
        'danger': '#b8332b',
        'text': '#2b2118',
        'bg': '#fff9f4',
      },
    },
  },
};

机器可读 JSON

{
  "name": "暖橙屿",
  "platform": "app",
  "tags": [
    "活力",
    "治愈",
    "暖色"
  ],
  "advice": {
    "family": "橙",
    "depth": "主色明度居中，兼容性最好，浅色与深色主题都容易适配。",
    "muted": null,
    "suit": "比红更放松、比黄更沉稳，适合需要亲近感又不想太跳的界面。",
    "avoid": "与高饱和的红、黄同场会互相抢戏，暖色最好只留一个主角。",
    "pair": "配深蓝能立刻变得稳重，配浅木色、米白则更有生活气息。"
  },
  "roles": {
    "primary": "#d96a24",
    "primaryDark": "#a34d14",
    "primaryLight": "#fbd4b6",
    "secondary": "#2f6e80",
    "accent": "#4c6fe0",
    "success": "#2a8a50",
    "warning": "#c8860f",
    "danger": "#b8332b",
    "text": "#2b2118",
    "bg": "#fff9f4"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 15.08,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.33,
      "level": "AA"
    }
  }
}

同端其他配色