宣纸黄

物业缴费与报修 · 质量分 86 ·优选

宣纸黄是一套面向 APP 的 10 色方案：主色 #8a8f2a，画布 #fbfbf9。正文与画布对比度 13.49:1，达到 WCAG AAA，正文与画布之间留有余量，长时间阅读不吃力；主色与画布对比度 3.35:1，主色够做大字与控件边界，正文不要压在上面。

低饱和黄

查看 JSON

10 个颜色角色

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

主色 primary

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

#8a8f2argb(138, 143, 42)hsl(63, 54.6%, 36.3%)

主色·深 primaryDark

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

#575a18rgb(87, 90, 24)hsl(62.7, 57.9%, 22.4%)

主色·浅 primaryLight

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

#cccf8ergb(204, 207, 142)hsl(62.8, 40.4%, 68.4%)

辅色 secondary

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

#3f638frgb(63, 99, 143)hsl(213, 38.8%, 40.4%)

强调色 accent

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

#3e35e9rgb(62, 53, 233)hsl(243, 80.4%, 56.1%)

成功 success

成功提示、完成状态

#26a159rgb(38, 161, 89)hsl(144.9, 61.8%, 39%)

警告 warning

警告提示、待处理状态

#e69d0argb(230, 157, 10)hsl(40.1, 91.7%, 47.1%)

危险 danger

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

#dd2a1drgb(221, 42, 29)hsl(4.1, 76.8%, 49%)

文字 text

正文主文字色

#2c2d1frgb(44, 45, 31)hsl(64.3, 18.4%, 14.9%)

页面背景 bg

页面底色

#fbfbf9rgb(251, 251, 249)hsl(60, 20%, 98%)

编辑点评 · APP 端

按这一端最常踩的坑逐条核对，结论由色值算出，不是套话。

主色按钮上的文字留意

余量偏小，界面元素密集时会吃力，建议只用在大字号或加粗处。

主色的按下态是否够深稳妥

这一项没问题，可以直接用。

点缀色会不会抢主色稳妥

这一项没问题，可以直接用。

主色在深色模式下的余量稳妥

这一项没问题，可以直接用。

搭配建议

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

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

适合明度高、亲和力强，适合儿童、创意、零售场景的辅助色。

慎用大量使用会显得刺眼廉价，偏绿味的黄尤其要小心。

搭配与深灰、藏青搭配最稳，在深色主题里它反而可以承担主要强调。

主色色系：黄

用在真实界面里是什么样

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

实时预览 · 点击切换端

9:41

今日推荐

推荐附近

周末去海边

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

查看详情 →

主要按钮

次要按钮

禁用状态

首页发现我的

无障碍对比度检查

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

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

用检查器验证这对颜色 →和其他配色对比 →全站无障碍报告 →

同端其他配色

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

导出到你的项目

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

CSS 变量

:root {
  --color-primary: #8a8f2a; /* 主色 */
  --color-primaryDark: #575a18; /* 主色·深 */
  --color-primaryLight: #cccf8e; /* 主色·浅 */
  --color-secondary: #3f638f; /* 辅色 */
  --color-accent: #3e35e9; /* 强调色 */
  --color-success: #26a159; /* 成功 */
  --color-warning: #e69d0a; /* 警告 */
  --color-danger: #dd2a1d; /* 危险 */
  --color-text: #2c2d1f; /* 文字 */
  --color-bg: #fbfbf9; /* 页面背景 */
}

SCSS 变量

$color-primary: #8a8f2a; // 主色
$color-primaryDark: #575a18; // 主色·深
$color-primaryLight: #cccf8e; // 主色·浅
$color-secondary: #3f638f; // 辅色
$color-accent: #3e35e9; // 强调色
$color-success: #26a159; // 成功
$color-warning: #e69d0a; // 警告
$color-danger: #dd2a1d; // 危险
$color-text: #2c2d1f; // 文字
$color-bg: #fbfbf9; // 页面背景

Tailwind 配置

// tailwind.config.js：宣纸黄
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#8a8f2a',
        'primaryDark': '#575a18',
        'primaryLight': '#cccf8e',
        'secondary': '#3f638f',
        'accent': '#3e35e9',
        'success': '#26a159',
        'warning': '#e69d0a',
        'danger': '#dd2a1d',
        'text': '#2c2d1f',
        'bg': '#fbfbf9',
      },
    },
  },
};

机器可读 JSON

{
  "name": "宣纸黄",
  "platform": "app",
  "tags": [
    "低饱和",
    "黄"
  ],
  "advice": {
    "family": "黄",
    "depth": "这套配色的主色偏深、分量感强，适合深色主题，或需要传递专业、稳重印象的界面。",
    "muted": null,
    "suit": "明度高、亲和力强，适合儿童、创意、零售场景的辅助色。",
    "avoid": "大量使用会显得刺眼廉价，偏绿味的黄尤其要小心。",
    "pair": "与深灰、藏青搭配最稳，在深色主题里它反而可以承担主要强调。"
  },
  "roles": {
    "primary": "#8a8f2a",
    "primaryDark": "#575a18",
    "primaryLight": "#cccf8e",
    "secondary": "#3f638f",
    "accent": "#3e35e9",
    "success": "#26a159",
    "warning": "#e69d0a",
    "danger": "#dd2a1d",
    "text": "#2c2d1f",
    "bg": "#fbfbf9"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 13.49,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 3.35,
      "level": "AA"
    }
  }
}

10 个颜色角色

编辑点评 · APP 端

搭配建议

用在真实界面里是什么样

用这套配色构建你的产品

无障碍对比度检查

同端其他配色

导出到你的项目

CSS 变量

SCSS 变量

Tailwind 配置

机器可读 JSON