#F5F2E8 Цагаан

Q: #F5F2E8 是什么颜色？

Цагаан 的色值是 #F5F2E8，大写写作 #F5F2E8。RGB 为 rgb(245,242,232)，HSL 约为 hsl(46 39% 94%)，OKLCH 为 oklch(0.961 0.014 93.0)。

Q: 设计中如何使用 Цагаан？

只给它一个视觉焦点，正文保持中性，并确认对白 1.12、对黑 16.86 的对比度。

Q: Цагаан 具备无障碍性吗？

对白对比度为 1.12（FAIL），对黑为 16.86（AAA）。级别达到 AA 时才可用于大字号。

颜色转换

CMYK profile: Coated FOGRA39 · 数值遵循 CSS Color 4 记法与 WCAG 2.2 对比度规则。

速览

名称	Цагаан
读音转写	tsagaan
文化体系	蒙古传统色
色系	灰
HEX	#F5F2E8
RGB	rgb(245,242,232)
HSL	hsl(46 39% 94%)
HSV	hsv(46, 5%, 96%)
OKLCH	oklch(0.961 0.014 93.0)
LAB	lab(95.47 -0.72 5.17)
XYZ	84,89,89
CMYK	cmyk(0.0% 1.2% 5.3% 3.9%)
RAL	#F7F9EF · Pure white · RAL 9010
备注	White · purity & milk · khadag

关于此颜色

tsagaan灰蒙古传统色

安静的结构，清晰的精度

Цагаан 的色值是 #F5F2E8，属于灰色系，文化脉络清晰。单独看它归入灰；沿着蒙古传统色的源流看，它又多了一层含义。

设计提示

先把 Цагаан（#F5F2E8）放在中性底色上测试；有了灰的点缀，整体才显得有意为之，而非随手添加。

最佳用途

把 Цагаан 留给最需要被第一眼看到的那一个元素，其余部分交给灰色系去衬托。

中性精准结构化安静专业

心理学

感知方式

中性精准结构化安静专业

心理效应

Цагаан 会提升灰画面的能量感，并把视线引向行动。

情绪影响

它给人的感受直接而温暖，因此能让克制的版面提亮，又不至于喧闹。

象征

代表含义

稳定、中立与高级感

文化意义

在蒙古传统色语境中，这一色调自带本地参照，投放前请核对其象征含义。

正面联想

正面联想偏向稳定、中立与高级感，这也是它常出现在请柬与季节主题中的原因。

谨慎使用

大面积使用容易被读成毫无缓解时显得冷漠或阴郁，因此请只用在点缀和小面积中。

应用场景

常见设计应用

营销落地页: 把 Цагаан 留给最需要被第一眼看到的那一个元素，其余部分交给灰色系去衬托。
杂志封面系统: 把 Цагаан 留给最需要被第一眼看到的那一个元素，其余部分交给灰色系去衬托。
产品包装标签: 把 Цагаан 留给最需要被第一眼看到的那一个元素，其余部分交给灰色系去衬托。
仪表盘状态提示: 把 Цагаан 留给最需要被第一眼看到的那一个元素，其余部分交给灰色系去衬托。
卖场导视标识: 把 Цагаан 留给最需要被第一眼看到的那一个元素，其余部分交给灰色系去衬托。

设计指导

如何用好它

建议

饱和填充占版面不超过两成。
只把它用在主行动按钮上。
在中性背景上检查小尺寸配色。

避免

不要与刺目的荧光绿或电光蓝并置。
不要用它排长段白色正文。
避免让色相偏移到别的色系的渐变。

品牌契合

建筑、科技、汽车、出版

以智者、统治者为原型的品牌，往往在开口之前就用它表明性格。

趋势信号

安静的结构，清晰的精度

灰色属于间隔与基础设施，把其他色相隔开而不与之竞争。暖灰有触感，冷灰像工程产物。

配色

与之相配的颜色

#EFF2FC需要单一温暖焦点的版式

#BAB8AE需要清晰点缀的界面

#E8F5F7想显得诱人又不喧哗的包装

历史

颜料与源流

在合成染料出现之前，Цагаан 依靠矿物与植物颜料调配，灰色系离不开赭石、茜草与靛蓝这类来源。如今屏幕的还原比任何单一颜料都更稳定。

出处与考据

释义 / 词源: 「Цагаан」是蒙古语「白」，在草原文化中与奶食、纯洁相关。

读音转写: tsagaan

变化色阶

深色阶变暗、浅色阶变亮，色相角始终不变。

专业提示: 深色阶变暗、浅色阶变亮，色相角始终不变。

深色阶

在同一色相上加深得到的色阶。

0% #F5F2E8

10% #DDDAD1

20% #C4C2BA

30% #ACA9A2

40% #93918B

50% #7B7974

60% #62615D

70% #4A4946

80% #31302E

90% #181817

100% #000000

浅色阶

用于表面与背景的提亮色阶。

0% #F5F2E8

10% #F6F3EA

20% #F7F5ED

30% #F8F6EF

40% #F9F7F1

50% #FAF9F4

60% #FBFAF6

70% #FCFBF8

80% #FDFCFA

90% #FEFEFD

100% #FFFFFF

设计系统色阶 50–950

50#F6F5F3100#EEEDE8200#DBD9D3300#C5C2BA400#ACA9A0500#8D8B82600#76736A700#5E5C55800#484640900#33322C950#21201D

深色模式适配值 (AA): #807D74 · 4.58:1

使用场景

深色阶 → 悬停、阴影、层次
浅色阶 → 高光、表面
平衡 → 统一的色彩系统

设计技巧

保留一个主色、一个辅助色和一个点缀色。

跨色彩体系对照

各传统色系与设计系统中最接近的具名颜色，按 OKLCH ΔE 计算，数值越小越接近。

亚洲传统色

Цагаан MN ΔE 0.000

白云 TB ΔE 0.003

雪白 CN ΔE 0.010

显示全部 (6)

桜色 JP ΔE 0.013

백 KR ΔE 0.016

Trắng VN ΔE 0.016

Putih ID ΔE 0.024

สีเหลือง TH ΔE 0.174

पीला IN ΔE 0.187

设计系统色板

Web 160 Fluent ΔE 0.001

Error 95 Material ΔE 0.002

Indigo 3 Radix ΔE 0.003

显示全部 (11)

Indigo 50 Tailwind ΔE 0.005

Indigo 50 UnoCSS ΔE 0.005

Indigo 50 Panda ΔE 0.005

Indigo 50 Open Color ΔE 0.005

Blue 3 Polaris ΔE 0.005

Gray 100 Chakra ΔE 0.005

Blue 1 Ant Design ΔE 0.007

Accent muted Primer ΔE 0.016

Gray 200 Bootstrap ΔE 0.021

Background StyleX ΔE 0.042

Brand (alternate) vanilla-extract ΔE 0.111

RAL 经典色

Pure white · RAL 9010 RAL ΔE 0.017

用任意颜色试试

在色库中的位置

下面的数字来自构建期对全站 116 个传统色的排序，不是人工描述。

明度 L* 95.5，在 116 个传统色中排第 5 位（偏亮）。
彩度 C 5.221，排第 102 位（低彩度）。
色相 46°，属于中性灰。
同色相族里最接近的是「Мөнгө」，ΔE OK 为 0.143。

同族三档能不能一起用

从「Цагаан」的 50–950 色阶里取 200 / 500 / 800 三档：同一个色相，只差明度。下面是它们互为文字与背景时的 WCAG 对比度。

200#DBD9D3

500#8D8B82

800#484640

200 ↔ 500：2.42:1（FAIL）
500 ↔ 800：2.76:1（FAIL）
200 ↔ 800：6.68:1（AA）

三对里达到 AA 正文（4.5:1）的有 1 对；达到 3:1（大字、图标、描边）的有 1 对。剩下的组合低于 3:1，不要用于文字。

配色组合

旋转色相环，同时保持明度稳定。

如何使用

三步让颜色保持可读且克制。

为何有效

这套配色背后的感知依据。

这六组都按色相旋转生成、明度接近，组内最高对比度落在 1.00:1–1.98:1 之间。它们适合做色块、图表与图形，不适合互相承载文字；需要文字时用中性色或同一色阶的深档。

互补色

位于色相环对面，用对比让主色更锐利。

#F5F2E8#EFF2FC

最佳用途: 行动按钮与单一功能强调

分裂互补

取对面色相的两侧邻色，比直接互补更柔和。

#F5F2E8#EBF3FB#F4F0FA

最佳用途: 带两个强调色的营销版面

三角配色

三个色相均分色环，活泼但需要一个主导。

#F5F2E8#E8F5F7#F8EFF6

最佳用途: 活动视觉与俏皮的杂志跨页

类似色

色环上的相邻色，安静、统一且易于扫读。

#F9F0E9#F5F2E8#F0F4EA

最佳用途: 背景、图表与平静的产品页

单色

同一色相贯穿明度阶梯，克制而高级。

#B0AEA7#F5F2E8#F8F6EE

最佳用途: 设计系统、包装与字体层级

四色配色

两组互补色，层次丰富但需要严格的比例。

#F5F2E8#ECF5EE#EFF2FC#F8EFF6

最佳用途: 复杂仪表盘与多业务品牌

导出色阶

CSS

:root {
  --brand-50: #F6F5F3;
  --brand-100: #EEEDE8;
  --brand-200: #DBD9D3;
  --brand-300: #C5C2BA;
  --brand-400: #ACA9A0;
  --brand-500: #8D8B82;
  --brand-600: #76736A;
  --brand-700: #5E5C55;
  --brand-800: #484640;
  --brand-900: #33322C;
  --brand-950: #21201D;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F6F5F3',
        100: '#EEEDE8',
        200: '#DBD9D3',
        300: '#C5C2BA',
        400: '#ACA9A0',
        500: '#8D8B82',
        600: '#76736A',
        700: '#5E5C55',
        800: '#484640',
        900: '#33322C',
        950: '#21201D',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#F6F5F3"
    },
    "100": {
      "$type": "color",
      "$value": "#EEEDE8"
    },
    "200": {
      "$type": "color",
      "$value": "#DBD9D3"
    },
    "300": {
      "$type": "color",
      "$value": "#C5C2BA"
    },
    "400": {
      "$type": "color",
      "$value": "#ACA9A0"
    },
    "500": {
      "$type": "color",
      "$value": "#8D8B82"
    },
    "600": {
      "$type": "color",
      "$value": "#76736A"
    },
    "700": {
      "$type": "color",
      "$value": "#5E5C55"
    },
    "800": {
      "$type": "color",
      "$value": "#484640"
    },
    "900": {
      "$type": "color",
      "$value": "#33322C"
    },
    "950": {
      "$type": "color",
      "$value": "#21201D"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#F6F5F3"/>
  <rect x="100" y="0" width="100" height="90" fill="#EEEDE8"/>
  <rect x="200" y="0" width="100" height="90" fill="#DBD9D3"/>
  <rect x="300" y="0" width="100" height="90" fill="#C5C2BA"/>
  <rect x="400" y="0" width="100" height="90" fill="#ACA9A0"/>
  <rect x="500" y="0" width="100" height="90" fill="#8D8B82"/>
  <rect x="600" y="0" width="100" height="90" fill="#76736A"/>
  <rect x="700" y="0" width="100" height="90" fill="#5E5C55"/>
  <rect x="800" y="0" width="100" height="90" fill="#484640"/>
  <rect x="900" y="0" width="100" height="90" fill="#33322C"/>
  <rect x="1000" y="0" width="100" height="90" fill="#21201D"/>
  <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text>
  <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text>
  <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text>
  <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text>
  <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text>
  <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text>
  <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text>
  <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text>
  <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text>
  <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text>
  <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text>
</svg>

iOS

extension UIColor {
  static let brand50 = UIColor(red: 0.965, green: 0.961, blue: 0.953, alpha: 1.0)
  static let brand100 = UIColor(red: 0.933, green: 0.929, blue: 0.910, alpha: 1.0)
  static let brand200 = UIColor(red: 0.859, green: 0.851, blue: 0.827, alpha: 1.0)
  static let brand300 = UIColor(red: 0.773, green: 0.761, blue: 0.729, alpha: 1.0)
  static let brand400 = UIColor(red: 0.675, green: 0.663, blue: 0.627, alpha: 1.0)
  static let brand500 = UIColor(red: 0.553, green: 0.545, blue: 0.510, alpha: 1.0)
  static let brand600 = UIColor(red: 0.463, green: 0.451, blue: 0.416, alpha: 1.0)
  static let brand700 = UIColor(red: 0.369, green: 0.361, blue: 0.333, alpha: 1.0)
  static let brand800 = UIColor(red: 0.282, green: 0.275, blue: 0.251, alpha: 1.0)
  static let brand900 = UIColor(red: 0.200, green: 0.196, blue: 0.173, alpha: 1.0)
  static let brand950 = UIColor(red: 0.129, green: 0.125, blue: 0.114, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#F6F5F3</color>
  <color name="brand_100">#EEEDE8</color>
  <color name="brand_200">#DBD9D3</color>
  <color name="brand_300">#C5C2BA</color>
  <color name="brand_400">#ACA9A0</color>
  <color name="brand_500">#8D8B82</color>
  <color name="brand_600">#76736A</color>
  <color name="brand_700">#5E5C55</color>
  <color name="brand_800">#484640</color>
  <color name="brand_900">#33322C</color>
  <color name="brand_950">#21201D</color>
</resources>

原则

平衡

保留一个主色、一个辅助色和一个点缀色。

对比

上线前分别用白色和黑色测试正文。

和谐

旋转色相环，同时保持明度稳定。

颜色对比度检测

上线前分别用白色和黑色测试正文。

文字颜色

背景色

1.12 :1

FAIL

引用

把 Цагаан 留给最需要被第一眼看到的那一个元素，其余部分交给灰色系去衬托。

WCAG 对比度

预览

Aa / Bb

#F5F2E8 · Цагаан

WCAG 对比度标准

WCAG 2.2 规定了文字与界面元素的对比度下限。#F5F2E8 对白色的对比度为 1.12:1（FAIL），对黑色为 16.86:1（AAA）。可用下表按字号选择阈值。

等级	正文	大号文字（18pt+ / 14pt 粗体）	图标与界面元素
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
不通过	< 4.5 : 1	< 3 : 1	< 3 : 1

大号文字指 18pt 常规或 14pt 粗体；界面元素与相邻色需达到 3:1。AA 是常见的合规基线，AAA 为增强级。

技术格式

各色彩空间写法

HEX

#F5F2E8

CSS Color 4

RGB

245,242,232

sRGB / D65

HSL

46,39,94

HSL

OKLCH

oklch(0.961 0.014 93.0)

perceptual

LAB

95,-1,5

CIE Lab

LCH

95,5,98

CIE LCH

XYZ

84,89,89

CIE XYZ

LUV

95,2,8

CIE LUV

HWB

46,91,4

CSS HWB

CMYK

0,1,5,4

实用格式

可直接使用的值

CSS

color: #F5F2E8;

custom properties

Tailwind

bg-[#F5F2E8] text-[#FFF]

arbitrary value

Android

#FFF5F2E8

ARGB

Flutter

Color(0xFFF5F2E8)

dart:ui

Photoshop

R 245 G 242 B 232 · C 0 M 1 Y 5 K 4

RGB / CMYK

CMYK 0,1,5,4

FOGRA39

色彩分析

测量得到的色彩属性

明度

0.887

relative luminance · warm

对比

1.12 : 1

vs white · FAIL · warm

对比

16.86 : 1

vs black · AAA · warm

色相

46°

saturation 39% · warm

LCH

95,5,98

lightness 94% · warm

ΔE

18.5

Мөнгө #BFC4C9 · warm

相近色

按 ΔE 排序，从 Irodori 全色库中找出最接近的颜色。

白云 #F4F1E8ΔE 0.6 白 #FAF0E6ΔE 2.5 白 #FFFAF0ΔE 3.0 백 #F7F7F2ΔE 3.2 Trắng #F7F7F2ΔE 3.2 白 #FFF5EEΔE 3.4

色盲模拟

色觉缺陷下的观感

预览

#F5F2E8

Protanopia

#F5F1E7

Deuteranopia

#F5F2E8

Tritanopia

#F8F0EF

色觉缺陷下的观感 · ΔE 18.5

创意维度

文化、情绪与故事

情绪

中性, 精准, 结构化, 安静, 专业

它常被读作能量、温暖、自信，并带一点仪式感。

色系

灰 · oklch(0.961 0.014 93.0)

它常被读作能量、温暖、自信，并带一点仪式感。

用法

营销落地页

它常被读作能量、温暖、自信，并带一点仪式感。

风格

安静的结构，清晰的精度

它常被读作能量、温暖、自信，并带一点仪式感。

灵感来源

蒙古传统色

它常被读作能量、温暖、自信，并带一点仪式感。

同色谱其他颜色

Ягаан#D96A8BУлаан#C0322BХүрэн#8A5A38Шар#E8B33CАлт#B99126Ногоон#3F8B5CМөнгө#BFC4C9Хөх#2C6DB5Хар#26262A

← Хөх ↻ 山吹 Улаан →

常见问题

#F5F2E8 是什么颜色？

Цагаан 的色值是 #F5F2E8，大写写作 #F5F2E8。RGB 为 rgb(245,242,232)，HSL 约为 hsl(46 39% 94%)，OKLCH 为 oklch(0.961 0.014 93.0)。

设计中如何使用 Цагаан？

只给它一个视觉焦点，正文保持中性，并确认对白 1.12、对黑 16.86 的对比度。

Цагаан 具备无障碍性吗？

对白对比度为 1.12（FAIL），对黑为 16.86（AAA）。级别达到 AA 时才可用于大字号。

颜色转换