响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

网页设计色彩三要素(必备)2篇

2024年网页设计色彩三要素 篇1

关于色彩找对人了,我最近快要把关于色彩文章都写完了,我的目标就是用最通俗易懂的语言讲明白设计原理。色彩的三要素包括色相,纯度和明度。我有篇原创文章详细解答了这个,包括色相对比,纯度对比,明度对比。开始解答,以下全部来自我的文章,用比喻的方法讲解色彩,浅显易懂,希望对你有帮助。(手机回答,没图,图可以去看原文)

圣经记载:上帝说要有光,于是便有了光。光是领先一切事物而先存在于这个世界上的,没错对于颜色来讲,没有光就没有颜色(你以为我傻啊,黑乎乎的一片看见颜色才怪),光就是颜色的母亲。牛顿说光妈妈能一窝生七仔,分别为红橙黄绿蓝靛紫,其实这并不准确,光妈妈一直很高产,还有红外线,紫外线,X射线等等其他亲儿子,只不过我们的肉眼凡胎只能看到这七个孩子。

其实颜色真正来说不只是只有这7个孩子,要知道两个孩子两两之间繁衍还能诞生另一个孩子。举个栗子:红孩儿跟黄孩儿匹配能生出橙孩儿,橙孩儿跟红孩儿匹配又能生出红橙孩儿,这样两两匹配无穷尽也,所以颜色也是多得让你数不清。那真的要识别某种颜色该怎么记呢,那就记住颜色的某种特征,颜色跟我们人一样,也有标识唯一特性的指纹和DNA,那就是色相、明度和纯度(跟饱和度是一个意思啦),有点晦涩不懂,别急听我慢慢道来。

1.颜色DNA之色相

前面说过了颜色跟我们人一样,我们人分成什么呢,那就是黄黄的黄种人,白白的白种人,黑黑的黑种人,这些人走在路上,我们一眼就开出来了,那就是黄的,白的,黑的,蓝的......而这些黄白黑指的就是色相,色相就是颜色最基本,最突出的特征,那怎么记色相呢,色相色相那就是颜色的相貌,在颜色的大街上,一眼就能识别出来的相貌,那就是黑颜色、黄颜色、蓝颜色、橙颜色、橙偏黄颜色等等。

2.颜色DNA之明度

每种人群都有自己的特性,就拿我们黄种人来说,不是所有人都是一样的黄(啥意思?),举个栗子:现在的女生都想成为白富美,都喜欢使用防晒霜,护手霜什么的,那么会导致这样的黄种女生看起来更亮丽一点,而古天乐把自己晒得黑黑的,看起来很暗,如果在黑夜中那是完全看不到这个人。这种黄种人有的看起来更亮一点,有的看起来更暗一点,说的就是颜色的明度,明度明度就是说的颜色的明亮程度,那你是喜欢亮一点的还是喜欢暗一点的?

3.颜色DNA之纯度(饱和度)

前两个都很好理解,那么对第三个纯度的理解就是判断一个人是否真的把色彩理解透了,有些人人往往把纯度和明度混淆。纯度从字面上的理解就是颜色的纯净程度,想象一下,酒桌上有一杯葡萄酒,颜色是暗紫色的,有的人不胜酒力,往葡萄酒里面兑水,那么原本酒杯里面的葡萄酒被稀释了,就没有原先那么纯,因为夹杂了其他东西,因而暗紫色变成了紫色。所以说纯度纯度就是颜色是否是纯爷们,其夹杂了杂质没(一般颜色的杂质就是黑色,白色、灰色)。当然我们都喜欢纯爷们的颜色,为什么,因为看起来鲜艳呀。

实例分析:

如图,就是传说中的色环,色环的产生就是如前文所说的两两配对生孩子,基本上色环都是由最基本的三个基色互相配对生成的,图所展示的是12色环,也就是说颜色两两重合2次(每一种颜色都是由两边颜色1:1混合而成),生成的色环,重合的次数越多,那么色环的颜色也就越多。但是细心的你肯定会发现,同样是12色的色环,为什么不一样,例如第一个色环,红色对面是蓝色,第二个色环红色对面是绿色。原因就是他们最初始的基色不一样,一个是由红蓝绿混合而成,一个是由红蓝黄混合而成。所以说世上色环千千万,长得也不一样,我们只需要懂得他的最基本原理就行。(小贴士:同理,以后不要问为什么黄色的互补色是蓝色,为什么有的色环上黄色的对面180度不是蓝色,因为最初是的混合方式不一样啊。)

接下来看另一个色环(咦,怎么不一样了),刚才两个色环就是颜色色相上进行1:1混合,还没涉及到明度和纯度,这个色环就是在刚才色相的维度上又加了两个维度。在这里需要了解颜色DNA的表示方式

常见的颜色表示方式就是:色相+明度+纯度(譬如主色是红色,红色的明度上为X%,纯度上为Y%)。听不懂?不懂那就换一个公式。那就是:色相+黑+白,即往一个颜色里面加白色和黑色。为什么是加黑和加白呢,因为白色是最亮的颜色,黑色是最暗的颜色,正好可以表示明度的明亮程度,那你在一个颜色重混合其他颜色,那他原本的纯度不就变了,就像纯爷们穿了个花裙子,想纯也纯不起来啊。所以这个公式依然可以代替表示为色相+明度+纯度。

举个栗子:红色里面不停加黑色,无限大后最后就变成了黑色,如果不停得加白色,那么最后颜色就变成白色,那如果同时加黑色和白色时会是什么情况呢,那就是相当于加灰色,降低了颜色的纯度。所以再来看这个色环就理解了,看红色那块,月往外就越黑(因为加了无限多的黑色),越往里就越白(因为加了无限多的白色)。而最中间的部分就是原来12色环那只有色相的部分,既没有加黑色也没有加白色,他们都是纯爷们,非常纯!

所以说嘛,专业的设计师要读懂一个颜色还是从3个维度进行看的,以后别只知道红的,蓝的,绿的。

2024年网页设计色彩三要素 篇2

 设计中,最重要的就是进行色彩的搭配,如果一幅作品中是红配绿,大红和大绿会很扎眼,但是如果用加深或者加浅来进行搭配,那么呈现出来的又是一种不同的效果,很有可能是一幅优秀的作品。

  一、色相

  众所周知,色相是决定色彩属性的最基本元素,在平面设计中丰富的色相搭配能使画面变得富有活力。不同的色相组合还将影响元素在版面中的位置摆放。

  ①下方。在平面设计中画面的下方总能在视觉上给人带来一种沉重感,当主体元素被调配上冷色调时,通常会将该要素摆放在下方位置,从排列形式上加强对画面的塑造。

  ②上方。将主体元素摆放在画面的上部,以使画面呈现悬浮、上升的视觉效果。在实际的设计过程中我们一般将浅色或明朗色调的视觉要素摆放在画面上方,使画面整体产生向上的视觉牵引力。

  ③中央。一般情况下画面的中央是最容易引起人关注,在平面设计中,将配有高鲜艳度或高明度的物体摆放在画面中央,从侧面促进了主题信息的传播。

  二、明度

  明度即色彩的明暗程度,通过对色彩明度值的调控,可以使画面呈现出不同的表情。根据明度值的变化规律,我们将色彩的明度划分为3个阶级:

  ①高明度。通过使用高明度的色彩组合,不仅可使画面的可见度得到增强,同时还能带给观者一种明亮且充满活力的心理感受。

  ②中明度。指明度值处于均衡状态的一类色彩,将中明度色彩运用在设计中可使画面整体呈现出平缓、淡然的视觉效果,同时带给观者以强烈的宁静感。

  ③低明度。低明度色彩是众多颜色中可见度最低的,在画面中使用大量的低明度配色,会使观者留下沉闷、低沉的心理感受。

  三、纯度

  纯度即色彩的鲜艳度,通常情况下那些能被人们辨认出的有彩色都具有一定的纯度值。与明度一样我们将色彩的纯度值也分为高、中、低3个等级:

  ①高纯度。高纯度色彩是所有颜色中鲜艳度最大的,常见的有红色、橙色和黄色等,可使画面的注目度得到大大提升。

  ②中纯度。在视觉上大多给人留下朴素、平庸、自然的印象,通常运用到次要元素与背景的配色上,可营造出具有舒适感的视觉空间。

  ③低纯度。通常当某个色彩混合了其他色相的色彩时,它的纯度值就会相应地被降低,使画面呈现出简朴、陈旧和沉稳的视觉效果。

  四、同类色搭配

  所谓同类色,是指拥有相同色相的一类色彩,该类色彩在视觉上的差异是极不明显的,我们主要依靠它们在明度或纯度上的变化来识别同类色。通过在画面中使用同类色调配,可打造出具有统一与简明感的色彩印象。

  在实际的设计过程中,通过提高同类色在明度或纯度上的差异,营造出同类色间的对比关系,将此类配色方式应用到平面设计中,可使其整体的配色风格得到统一。

  五、类似色搭配

  在色相环中,我们将夹角在15°~30°之间的两种颜色称为类似色,例如:蓝色与蓝绿色就是一组类似色。类似色在视觉上的差异性比同类色稍强一些,在平面设计中我们可以运用类似色的组合来打造具有协调感的画面效果。

  在画面中使用过多的类似色,容易使整体效果显得缺乏变化,为了去除作品配色在视觉上的乏味感,我们可以利用一些特殊的手段来增强类似色间的对比,比如:利用其他色相的视觉要素将两者进行强制性分开,或者增强它们在纯度或明度上的差异。

  六、邻近色搭配

  我们将色相环中从60°至90°之间的色彩称为邻近色。相较于前面两种色彩类别来讲,邻近色间的对比是比较明显的。在实际的设计过程中,我们通过对调整邻近色间的调和与对比,来打造具有非凡表现力的画面效果。

  七、对比色搭配

  我们将色相环上相互夹角为120°左右的两种色彩称为对比色。对比色在色相上的差异是非常显著的,在实际的设计过程中我们需要配合设计主题的要求,来调节对比色间的差异从而使画面呈现出理想化的视觉状态。

  对比色本身就存在强烈的差异性,因此我们利用简单的编排方式就能进一步增强它们之间的对比效果,在实际的设计过程中通过水平、垂直、斜向等单纯的排列方式将对比色调配在一起,在布局上形成鲜明的对照关系,从而打造出具有视觉感染力的平面作品。

  八、互补色搭配

  在色彩学中,补色是指在色相环上间隔夹角在180°左右的两种色彩,红与绿、黄与紫及蓝与橙这3种色彩组合是我们平时使用频率最多的。补色之间的对比性是所有色彩组合中最强烈的,为了使整体色调符合设计主题的要求,在某些时候需要对补色之间的对比性进行调和或加强。

  九、无彩色搭配

  ①黑色给人带来的视觉感受是最沉稳的,黑色容易使人想起夜晚、太空等事物,通过在画面中使用大量的黑色,以此来削弱整体配色的活跃度,从而给观者留下阴暗、深邃的印象。

  ②白色给人的感觉是非常明亮的,它有非常高的明度,在情感上它代表着光明、希望,可使画面整体的明朗感得到增强,同时给人留下积极的视觉印象。

  ③灰色给人一种朦胧的印象,可使画面呈现出含蓄、柔美的视觉效果。

  不同的色彩搭配会有不一样的效果,你想要更好的学会设计中的核心,那么就从掌握色彩搭配开始吧!(图文来自网络版权归原作者所有如有侵权请联系本站)

猜你喜欢