Irodori彩り

#FFF0F5 白

生成颜色代码、变体、配色，并检查对比度。

撰文与审校 Steve 最近更新

颜色转换

#FFF0F5白

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

速览

名称白
读音转写白
文化体系数字色彩
色系灰
HEX#FFF0F5
RGBrgb(255,240,245)
HSLhsl(340 100% 97%)
HSVhsv(340, 6%, 100%)
OKLCHoklch(0.968 0.017 355.1)
LABlab(96.07 5.89 -0.59)
XYZ89,90,99
CMYKcmyk(0.0% 5.9% 3.9% 0.0%)
RAL#F7F9EF · Pure white · RAL 9010

关于此颜色

白灰数字色彩

安静的结构，清晰的精度

白 的色值是 #FFF0F5，属于 灰 色系，文化脉络清晰。单独看它归入 灰；沿着 数字色彩 的源流看，它又多了一层含义。

设计提示

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

最佳用途

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

中性精准结构化安静专业

心理学

感知方式

中性精准结构化安静专业

心理效应

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

情绪影响

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

象征

代表含义

稳定、中立与高级感

文化意义

在 数字色彩 语境中，这一色调自带本地参照，投放前请核对其象征含义。

正面联想

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

谨慎使用

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

应用场景

常见设计应用

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

设计指导

如何用好它

建议

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

避免

  • 不要与刺目的荧光绿或电光蓝并置。
  • 不要用它排长段白色正文。
  • 避免让色相偏移到别的色系的渐变。
品牌契合
建筑、科技、汽车、出版

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

趋势信号
安静的结构，清晰的精度

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

配色

与之相配的颜色

#E9F9F4需要单一温暖焦点的版式
#C4B6BA需要清晰点缀的界面
#F4F6E9想显得诱人又不喧哗的包装

历史

颜料与源流

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

标签

中性精准结构化安静专业稳定、中立与高级感灰

出处与考据

释义 / 词源: 「白」为未染色的素色；日本传统色里的白并非纯白，而是纸白、绢白这类略带暖调的浅色。

色彩物质: 日本画与唐卡的白色基底多用胡粉（煅烧贝壳所得的碳酸钙），覆盖力强、略带暖意。

读音转写: しろ / shiro

变化色阶

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

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

深色阶

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

0% #FFF0F5
10% #E6D8DD
20% #CCC0C4
30% #B3A8AC
40% #999093
50% #80787B
60% #666062
70% #4D484A
80% #333031
90% #191818
100% #000000

浅色阶

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

0% #FFF0F5
10% #FFF2F6
20% #FFF3F7
30% #FFF5F8
40% #FFF6F9
50% #FFF8FA
60% #FFF9FB
70% #FFFBFC
80% #FFFCFD
90% #FFFEFE
100% #FFFFFF

设计系统色阶 50–950

50#F8F4F5100#F1EBED200#E0D6D9300#CBBFC3400#B2A5AA500#94868B600#7C6F73700#64595D800#4D4347900#372F32950#241F21
深色模式适配值 (AA): #86797E · 4.53:1

使用场景

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

设计技巧

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

跨色彩体系对照

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

亚洲传统色

Цагаан MN ΔE 0.009
白云 TB ΔE 0.012
백 KR ΔE 0.013
显示全部 (6)
Trắng VN ΔE 0.013
雪白 CN ΔE 0.015
桜色 JP ΔE 0.018
Putih ID ΔE 0.030
สีเหลือง TH ΔE 0.177
पीला IN ΔE 0.189

设计系统色板

Magenta 1 Ant Design ΔE 0.001
Pink 50 Open Color ΔE 0.001
Violet 50 Tailwind ΔE 0.002
显示全部 (11)
Violet 50 UnoCSS ΔE 0.002
Violet 50 Panda ΔE 0.002
Rose 3 Polaris ΔE 0.003
Blue 50 Chakra ΔE 0.003
Neutral 96 Material ΔE 0.006
Violet 3 Radix ΔE 0.006
Web 160 Fluent ΔE 0.008
Canvas inset Primer ΔE 0.017
Light Bootstrap ΔE 0.021
Background StyleX ΔE 0.036
Brand (alternate) vanilla-extract ΔE 0.115

RAL 经典色

Pure white · RAL 9010 RAL ΔE 0.010
用任意颜色试试

同族三档能不能一起用

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

200#E0D6D9
500#94868B
800#4D4347
  • 200 ↔ 500：2.45:1（FAIL）
  • 500 ↔ 800：2.73:1（FAIL）
  • 200 ↔ 800：6.69:1（AA）

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

配色组合

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

如何使用

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

为何有效

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

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

互补色

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

#FFF0F5#E9F9F4

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

分裂互补

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

#FFF0F5#EEF8EE#E8F8FA

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

三角配色

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

#FFF0F5#F4F6E9#EAF7FF

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

类似色

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

#FBF1FB#FFF0F5#FFF0EF

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

单色

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

#B8ADB0#FFF0F5#FFF4F8

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

四色配色

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

#FFF0F5#FEF2EA#E9F9F4#EAF7FF

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

导出色阶

CSS

:root {
  --brand-50: #F8F4F5;
  --brand-100: #F1EBED;
  --brand-200: #E0D6D9;
  --brand-300: #CBBFC3;
  --brand-400: #B2A5AA;
  --brand-500: #94868B;
  --brand-600: #7C6F73;
  --brand-700: #64595D;
  --brand-800: #4D4347;
  --brand-900: #372F32;
  --brand-950: #241F21;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F8F4F5',
        100: '#F1EBED',
        200: '#E0D6D9',
        300: '#CBBFC3',
        400: '#B2A5AA',
        500: '#94868B',
        600: '#7C6F73',
        700: '#64595D',
        800: '#4D4347',
        900: '#372F32',
        950: '#241F21',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#F8F4F5"
    },
    "100": {
      "$type": "color",
      "$value": "#F1EBED"
    },
    "200": {
      "$type": "color",
      "$value": "#E0D6D9"
    },
    "300": {
      "$type": "color",
      "$value": "#CBBFC3"
    },
    "400": {
      "$type": "color",
      "$value": "#B2A5AA"
    },
    "500": {
      "$type": "color",
      "$value": "#94868B"
    },
    "600": {
      "$type": "color",
      "$value": "#7C6F73"
    },
    "700": {
      "$type": "color",
      "$value": "#64595D"
    },
    "800": {
      "$type": "color",
      "$value": "#4D4347"
    },
    "900": {
      "$type": "color",
      "$value": "#372F32"
    },
    "950": {
      "$type": "color",
      "$value": "#241F21"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#F8F4F5"/>
  <rect x="100" y="0" width="100" height="90" fill="#F1EBED"/>
  <rect x="200" y="0" width="100" height="90" fill="#E0D6D9"/>
  <rect x="300" y="0" width="100" height="90" fill="#CBBFC3"/>
  <rect x="400" y="0" width="100" height="90" fill="#B2A5AA"/>
  <rect x="500" y="0" width="100" height="90" fill="#94868B"/>
  <rect x="600" y="0" width="100" height="90" fill="#7C6F73"/>
  <rect x="700" y="0" width="100" height="90" fill="#64595D"/>
  <rect x="800" y="0" width="100" height="90" fill="#4D4347"/>
  <rect x="900" y="0" width="100" height="90" fill="#372F32"/>
  <rect x="1000" y="0" width="100" height="90" fill="#241F21"/>
  <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.973, green: 0.957, blue: 0.961, alpha: 1.0)
  static let brand100 = UIColor(red: 0.945, green: 0.922, blue: 0.929, alpha: 1.0)
  static let brand200 = UIColor(red: 0.878, green: 0.839, blue: 0.851, alpha: 1.0)
  static let brand300 = UIColor(red: 0.796, green: 0.749, blue: 0.765, alpha: 1.0)
  static let brand400 = UIColor(red: 0.698, green: 0.647, blue: 0.667, alpha: 1.0)
  static let brand500 = UIColor(red: 0.580, green: 0.525, blue: 0.545, alpha: 1.0)
  static let brand600 = UIColor(red: 0.486, green: 0.435, blue: 0.451, alpha: 1.0)
  static let brand700 = UIColor(red: 0.392, green: 0.349, blue: 0.365, alpha: 1.0)
  static let brand800 = UIColor(red: 0.302, green: 0.263, blue: 0.278, alpha: 1.0)
  static let brand900 = UIColor(red: 0.216, green: 0.184, blue: 0.196, alpha: 1.0)
  static let brand950 = UIColor(red: 0.141, green: 0.122, blue: 0.129, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#F8F4F5</color>
  <color name="brand_100">#F1EBED</color>
  <color name="brand_200">#E0D6D9</color>
  <color name="brand_300">#CBBFC3</color>
  <color name="brand_400">#B2A5AA</color>
  <color name="brand_500">#94868B</color>
  <color name="brand_600">#7C6F73</color>
  <color name="brand_700">#64595D</color>
  <color name="brand_800">#4D4347</color>
  <color name="brand_900">#372F32</color>
  <color name="brand_950">#241F21</color>
</resources>

原则

平衡

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

对比

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

和谐

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

颜色对比度检测

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

1.10 :1
FAIL
引用

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

WCAG 对比度
预览
Aa / Bb
#FFF0F5 · 白

WCAG 对比度标准

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

等级正文大号文字（18pt+ / 14pt 粗体）图标与界面元素
AAA7 : 14.5 : 1—
AA4.5 : 13 : 13 : 1
不通过< 4.5 : 1< 3 : 1< 3 : 1

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

技术格式

各色彩空间写法

HEX
#FFF0F5

CSS Color 4

RGB
255,240,245

sRGB / D65

HSL
340,100,97

HSL

OKLCH
oklch(0.968 0.017 355.1)

perceptual

LAB
96,6,-1

CIE Lab

LCH
96,6,354

CIE LCH

XYZ
89,90,99

CIE XYZ

LUV
96,8,-2

CIE LUV

HWB
340,94,0

CSS HWB

CMYK
0,6,4,0

print

实用格式

可直接使用的值

CSS
color: #FFF0F5;

custom properties

Tailwind
bg-[#FFF0F5] text-[#FFF]

arbitrary value

Android
#FFFFF0F5

ARGB

Flutter
Color(0xFFFFF0F5)

dart:ui

Photoshop
R 255 G 240 B 245 · C 0 M 6 Y 4 K 0

RGB / CMYK

Print
CMYK 0,6,4,0

FOGRA39

色彩分析

测量得到的色彩属性

明度
0.902

relative luminance · warm

对比
1.10 : 1

vs white · FAIL · warm

对比
17.12 : 1

vs black · AAA · warm

色相
340°

saturation 100% · warm

LCH
96,6,354

lightness 97% · warm

ΔE
7.4

雪白 #F0F3F1 · warm

相近色

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

桜色 #FCE9EEΔE 2.6 白 #FFFAFAΔE 5.1 白 #F8F8FFΔE 5.7 白 #F5F5F5ΔE 5.9 白 #F0F0F0ΔE 6.1 白 #F1F3F4ΔE 6.4

色盲模拟

色觉缺陷下的观感

预览
#FFF0F5
Protanopia
#F1F2F5
Deuteranopia
#F4F4F5
Tritanopia
#FFF0F2

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

创意维度

文化、情绪与故事

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

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

色系
灰 · oklch(0.968 0.017 355.1)

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

用法
营销落地页

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

风格
安静的结构，清晰的精度

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

灵感来源
数字色彩

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

常见问题

#FFF0F5 是什么颜色？
白 的色值是 #FFF0F5，大写写作 #FFF0F5。RGB 为 rgb(255,240,245)，HSL 约为 hsl(340 100% 97%)，OKLCH 为 oklch(0.968 0.017 355.1)。
设计中如何使用 白？
只给它一个视觉焦点，正文保持中性，并确认对白 1.10、对黑 17.12 的对比度。
白 具备无障碍性吗？
对白对比度为 1.10（FAIL），对黑为 17.12（AAA）。级别达到 AA 时才可用于大字号。