配色黑名单!有哪些配色方案是一定要小心规避的?

Date 2025-04-06 14:36:59

当我们讨论颜色匹配时,我们通常谈论颜色匹配趋势、颜色匹配规则和颜色匹配方法,但同时,我也应该合理地避免一些典型的错误的颜色匹配方法。这个颜色匹配黑名单并不长,但它涵盖了多种颜色匹配问题,不妨仔细看看~

网络是一个丰富多彩的世界,颜色也是网络吸引用户注意力的主要手段之一。它让人们感兴趣,影响人们,并通过比较和衬托带来愉快的浏览体验。同时,无论是扁平设计还是material,色彩都是设计趋势中不可忽视的重要组成部分 Design,色彩的运用是最重要的。

然而,使用错误的颜色也是一种常见的现象。网页设计中是否有特定的配色禁忌?是的!一定有一些,而且还有很多。这些颜色组合会给你的网页带来各种各样的问题。为颜色匹配制定黑名单势在必行。在今天的文章中,让我们谈谈颜色匹配的“黑名单”。

霓虹色太亮了

neons

闪亮的霓虹灯看起来很有趣,似乎让页面看起来很时尚,很受欢迎。但他们不会让眼睛感到舒服,经常给人一种“盲”的不适。

霓虹灯的主要问题是使用这种颜色的文本内容难以阅读,难以识别,与深色背景搭配,这种耀眼的感觉尤为明显。如果以霓虹灯为背景,这个页面几乎看不见,除了霓虹灯几乎看不清楚。

如果你想解决这个问题,你可以试着降低霓虹灯的亮度,让它看起来更暗,让它看起来更微妙,并匹配屏幕显示。

oglad

Orange You Glad的页面很好地解决了这个问题。他们使用非常接近霓虹灯的颜色匹配,并通过渐变颜色来增加页面的丰富度。颜色的亮度和对比度相当微妙,不会让游客感到不舒服。

“震颤”颜色

vibrating

当高饱和度的颜色搭配在一起时,它们会产生“震颤效应”, 会让你觉得两种颜色之间会产生模糊、震颤或光晕的视觉效果。毫无疑问,这是不舒服的。

Josef Albers 经典作品《色彩交互》描述了色彩的“震颤效应”是如何给人们带来不安的:“这种颜色匹配最初可能会给人们带来惊喜的效果,而这种侵略性会让人们感到不舒服,尤其是眼睛。你会发现这种颜色匹配很少出现在广告中,因为它会让人们感到不快乐和不舒服。”

但即使不尝试搭配,也可以通过其基本特征合理避免“震颤”配色:

·它们都是高饱和度的颜色。两种颜色是色轮上的互补颜色。它们在色轮上相隔180度,处于对称位置。将两种颜色转化为灰度后,灰度非常接近

最典型的案例是明亮的红色和绿色。这是一种流行的“圣诞节”配色方案,也是最受批评的配色方案之一。它的主要可访问性问题是色盲用户根本无法区分

假如说你必须使用“震颤”配色,这种矛盾也不是不可调和的:加入中性颜色将两者分开就好。

浅色+浅色

light-1

浅色+浅色的搭配也是最常见的错误之一。也许你在平面设计或印刷相关项目中的颜色匹配最终不会对可读性产生影响,这可能是由设置问题或色差引起的,但在绝大多数情况下是错误的。

不管你怎么设计,这样的配色一定很难阅读内容,每次都是这样。

这种错误在网站的横幅图中最常见:帅气的大图片与精心设计的白色字体相匹配,字体与最浅的颜色部分叠加在一起,这非常尴尬。浅色+浅色的组合使内容根本无法阅读,而横幅的作用几乎被削弱为0。

事实上,修复这个问题很简单:

leatherm

·选择颜色均匀统一的背景,文本部分可以形成对比

stikw

·若背景无法修改,可在背景与文字之间增加一层,增加对比度

vrge

·试着调整背景图片的色调、明暗、饱和度等,以提高对比度

彩虹式配色

rainbow

当一个网站变成彩虹时,设计师一定是无可爱的。想想看。当许多颜色成为系统颜色匹配的一部分时,我不知道有多少颜色匹配规则被各种颜色之间的干扰打破了。虽然这种设计一开始可能会吸引用户的注意力,但随后给用户带来的恶心和不适肯定会远远超出设计师的预期。即使网站的内容很好,也无法识别。

shapechristmas

如果你真的想让页面更“丰富多彩”,那么不要让颜色混合在一起,试着使用卡片设计来承载不同的颜色,合理的布局,不仅可以使颜色更灵活,而且可以确保组织和流动性。

亮色+亮色+深色+深色

bright

就像浅色+浅色的搭配一样,亮色+亮色和深色+深色的搭配都是饱和度接近造成的识别问题。毫无疑问,这也是一个需要避免的问题。

你真的认为这个问题不会发生在你身上吗?所以在制定单色配色方案时要小心。即使是有经验的设计师也可能在这个时候掉进坑里。

tolia

总之,一定要注意配色的对比度。如果必须使用这些颜色,不妨将页面设计成滚动变色,这样既能保证对比度和可读性,又能使用颜色。

“K”黑

pure-black

CMYK中的K是黑色的。很多设计师的设计作品会跨越网页版和印刷品,有时候在设计印刷品的时候会误用网页配色中的黑色。其实网页中的纯黑(#万万)和印刷中的黑色有很大的区别,早在PS上 在7.0中,黑色CMYK色标实际上是C75 M68 Y67 K90,通常被称为系统黑K100 在更广泛的RGB配色中,只是深灰色!

印刷品,包括我们日常生活中的许多黑色,实际上有很多种,它们通常是某种颜色叠加了很多效果,比如乌鸦的羽毛是黑色的,但你仔细看它会有点蓝色。

wonderland-1

因此,在设计这种黑色时,最好选择一种带有您品牌色调的黑色(而非#00000)。这使得印刷时更容易协调。(例如,让黑色带一点蓝色调,以抵消文本内容中的黄色色调)例如,在Wonderland的页面上,黑色实际上是#0a0a0b。

结语

事实上,今天提到的几乎所有配色问题都是关于对比度和可读性的。事实上,几乎所有的颜色都可以使用,只要颜色和内容的对比度和配色美感得到保证。

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计

Floating Image