白烟色

如轻烟薄雾般的浅灰白,柔和朦胧的中性底色

HEX#F5F5F5
RGBrgb(245, 245, 245)
HSLhsl(0, 0%, 96%)
HSVhsv(0, 0%, 96%)
CMYKcmyk(0%, 0%, 0%, 4%)
HEXA#F5F5F5FF
RGBArgba(245, 245, 245, 1)
HSLAhsla(0, 0%, 96%, 1)
OKLCHoklch(98.7%, 0, 90)
LCHlch(98.5%, 10, 214)

🎨 配色方案

相似色2-3个相邻色相(≤60°)
复制
#F5F5F5
复制
#F5F5F5
复制
#F5F5F5
三色系3个间隔120°的色相
复制
#F5F5F5
复制
#F5F5F5
复制
#F5F5F5
分裂互补色主色 + 互补色两侧的颜色
复制
#F5F5F5
复制
#F5F5F5
复制
#F5F5F5
互补色2个间隔180°的色相
复制
#F5F5F5
复制
#F5F5F5
矩形双互补色4个形成矩形的色相
复制
#F5F5F5
复制
#F5F5F5
复制
#F5F5F5
复制
#F5F5F5
单色系单一色相,变化饱和度和亮度
复制
#8F8F8F
复制
#C2C2C2
复制
#F5F5F5
复制
#FFFFFF
复制
#FFFFFF

♿ WCAG 对比度配色

深入了解 →
Aa14px 正文
高对比文字
#545454对比度 6.9:1AA
适合正文、标题等主要内容,确保所有用户都能清晰阅读
Aa14px 正文
标准文字
#707070对比度 4.5:1AA
适合普通正文内容,满足 WCAG AA 标准
Aa14px 正文
大文字/UI组件
#8F8F8F对比度 3:1AA Large
适合大号文字(≥18px 粗体或 ≥24px)、图标、UI 组件边界
Aa14px 正文
装饰/分割线
#B0B0B0对比度 2:1Fail
适合装饰性元素、分割线、非必要信息文字
明度变化 (Lightness)固定色相与饱和度,明度按比例缩放 30%→100%
#4A4A4A复制
#666666复制
#828282复制
#9E9E9E复制
#BDBDBD复制
#D9D9D9复制
#F5F5F5复制
饱和度变化 (Saturation)固定色相与明度,饱和度按比例缩放 40%→100%
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制
明度 + 饱和度混合变化明度与饱和度同时按比例缩放 30%→100%
#4A4A4A复制
#666666复制
#828282复制
#9E9E9E复制
#BDBDBD复制
#D9D9D9复制
#F5F5F5复制
色相微调 (Hue Shift)固定饱和度与明度,步进微调色相 ±15°
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制
#F5F5F5复制

💡 适用场景

🖥️

网页背景

各类网站的默认底色,在不干扰内容的前提下提供柔和的视觉衬托

📄

文档排版

电子文档与PPT的页面基础色,减少长时间阅读带来的眼睛干涩感

🧱

极简墙面

北欧风格住宅的墙面色彩,通过微妙的灰调增加空间的纵深层次感

👕

基础服饰

T恤与休闲服装的百搭底色,可以轻松搭配任何风格的配饰

📜 起源与历史

白烟色White Smoke首次作为CSS标准色名出现在W3C的色彩规范中,是万维网早期确立的16种基本色彩之一,也是网页设计的基础色板成员。

在数字界面设计的发展历程中,白烟色逐渐成为UI设计师最常用的背景色之一,用于替代纯白以减轻用户在低光环境下的屏幕眩光感。

平面设计领域将白烟色大量应用于留白和底色处理,其在印刷品上呈现出的微妙灰调让纸张的质感成为设计的一部分。

北欧家居设计在21世纪初大量使用白烟色处理墙面和纺织品,以替代过度使用的纯白,创造出更加有层次感的极简空间。

如今白烟色已经成为数字时代最普遍的背景用色,它的中性特质让它成为各种色彩的最佳陪衬,是视觉设计中的无声英雄。

🧠 色彩心理学

朦胧柔和如烟雾般若有若无的灰色调,创造出边界模糊的柔和视觉感受
安静陪伴作为最不引人注意的背景色,默默地衬托主体而不争夺关注
留白意境东方水墨画中留白美学的数字延续,给视觉以充分的呼吸空间
平衡中庸白色的纯净与灰色的理性在此达成完美的平衡,不走极端
舒适护眼比纯白更温和的屏幕色让长时间阅读成为更舒适的体验
低调务实不抢眼不张扬,满足功能需求的同时保持谦逊的存在感