库里的紫罗兰配色
卡片标了主色与正文对比度。紫做主色最常见的问题是「看着深、实际不够深」,对比度那个数字能直接验证。
#8f35b5饱和 55%14.72:1 · AAA#833ebb饱和 50%14.72:1 · AAA#63249e饱和 63%14.76:1 · AAA#4e2e9f饱和 55%15.30:1 · AAA#6418a3饱和 74%14.72:1 · AAA#653d76饱和 32%14.72:1 · AAA#5b3d76饱和 32%14.76:1 · AAA#8755a5饱和 32%14.72:1 · AAA#8028d2饱和 68%14.76:1 · AAA#8d55a5饱和 32%14.72:1 · AAA#ac1dc9饱和 75%15.00:1 · AAA紫罗兰在界面里指什么
紫罗兰原本是花名,在色彩语境里指紫里带蓝的一段。红紫偏暖、蓝紫偏冷,紫罗兰属于后者。判断标准是色相,不是深浅。
在界面里它常被当成科技感的替身,因为蓝紫在深色下仍保持饱和,做渐变与暗底都成立。但对比度问题也来自同一处:蓝紫压深之后,与深色文字的区分会下降。
三条使用规则
一、不要用紫做正文色
紫在白底上看着够深,实际亮度不低。这 11 套的正文对比度在 14.72:1 到 15.30:1 之间,靠的是深中性文字,不是紫色文字。
二、配一个中性色做地基
紫做主色时,页面容易整体偏冷。用一个暖中性色(米白、浅灰褐)做底色,比再叠一层浅紫更稳。
三、面积控制在三成以内
紫的视觉重量大。全页紫底会让内容显得轻飘,主色用在按钮、图标与强调块上就够。
紫罗兰和紫色标签不是一批
「紫」是色相大类,紫罗兰只取其中偏蓝的一段。库里带「紫」标签的有 15 套,其中一部分更偏洋红或偏灰,所以不在这 11 套里。这就是这一页按数值选片的原因。
什么时候别用紫罗兰
- 需要暖调与亲和感的场景。紫自带距离感,做儿童、餐饮、生活服务时容易显冷。
- 需要「便宜、快速」的促销。紫在中文语境里与高贵、神秘绑定,压价感立不住。
- 小面积区分紫与灰的界面。两者在低亮度屏幕上容易混,状态不要只靠颜色区分。
常见问题
- 紫罗兰和薰衣草紫有什么区别?
- 明度与饱和度。薰衣草是高明度低饱和,接近淡紫灰;紫罗兰明度更低、饱和度更高。库里前者更接近莫兰迪,后者是这一页的区间。
- 为什么紫罗兰的主色都偏深?
- 因为要压得住白字。浅紫做主色时白字过不了 4.5:1,压深之后才是这些颜色。这是对比度门槛的结果,不是审美偏好。
- 紫罗兰适合做深色模式吗?
- 很适合,紫在深底上仍保持饱和,但深底上的紫往往要提亮一档,否则与背景分不开。用深色模式转换器跑一遍看实测值。