首页 / 色系 / 紫罗兰色系配色方案

紫罗兰色系配色方案

紫罗兰是紫色里偏蓝的那一段:色相 257 到 290 度之间,饱和度中等到偏高,明度偏深。它比薰衣草沉,比洋红冷。全库 100 套里主色落在这个区间的有 11 套,饱和度从 32% 到 75%。

最后更新:2026-10-29

库里的紫罗兰配色

卡片标了主色与正文对比度。紫做主色最常见的问题是「看着深、实际不够深」,对比度那个数字能直接验证。

紫罗兰在界面里指什么

紫罗兰原本是花名,在色彩语境里指紫里带蓝的一段。红紫偏暖、蓝紫偏冷,紫罗兰属于后者。判断标准是色相,不是深浅。

在界面里它常被当成科技感的替身,因为蓝紫在深色下仍保持饱和,做渐变与暗底都成立。但对比度问题也来自同一处:蓝紫压深之后,与深色文字的区分会下降。

三条使用规则

一、不要用紫做正文色

紫在白底上看着够深,实际亮度不低。这 11 套的正文对比度在 14.72:1 到 15.30:1 之间,靠的是深中性文字,不是紫色文字。

二、配一个中性色做地基

紫做主色时,页面容易整体偏冷。用一个暖中性色(米白、浅灰褐)做底色,比再叠一层浅紫更稳。

三、面积控制在三成以内

紫的视觉重量大。全页紫底会让内容显得轻飘,主色用在按钮、图标与强调块上就够。

紫罗兰和紫色标签不是一批

「紫」是色相大类,紫罗兰只取其中偏蓝的一段。库里带「紫」标签的有 15 套,其中一部分更偏洋红或偏灰,所以不在这 11 套里。这就是这一页按数值选片的原因。

什么时候别用紫罗兰

  • 需要暖调与亲和感的场景。紫自带距离感,做儿童、餐饮、生活服务时容易显冷。
  • 需要「便宜、快速」的促销。紫在中文语境里与高贵、神秘绑定,压价感立不住。
  • 小面积区分紫与灰的界面。两者在低亮度屏幕上容易混,状态不要只靠颜色区分。

常见问题

紫罗兰和薰衣草紫有什么区别?
明度与饱和度。薰衣草是高明度低饱和,接近淡紫灰;紫罗兰明度更低、饱和度更高。库里前者更接近莫兰迪,后者是这一页的区间。
为什么紫罗兰的主色都偏深?
因为要压得住白字。浅紫做主色时白字过不了 4.5:1,压深之后才是这些颜色。这是对比度门槛的结果,不是审美偏好。
紫罗兰适合做深色模式吗?
很适合,紫在深底上仍保持饱和,但深底上的紫往往要提亮一档,否则与背景分不开。用深色模式转换器跑一遍看实测值。

相关工具