设计师的色彩理论,第1部分:色彩的意义

关于作者

卡梅隆·查普曼(Cameron Chapman)是一位拥有6年以上经验的专业网页和平面设计师。她为许多博客撰稿,是《粉碎……》的作者…更多关于Cameron↬

电邮通讯

关于前端和用户体验的每周提示.
受到20多万人的信任。

让我们深入研究色彩理论。我们将讨论不同颜色族背后的含义,并给出一些如何使用这些颜色的示例。

在设计中,没有什么东西比色彩的使用更主观或更重要。一种颜色可以引起一个人的一种反应,但由于文化、先前的联想,甚至仅仅是个人偏好,可能会引起另一个人的相反反应。获取有关下一篇文章的电子邮件更新.

色彩理论本身就是一门科学和艺术,有些人以色彩顾问或有时是品牌顾问的身份建立整个职业生涯。了解色彩对大多数人的影响是设计师能够掌握并提供给客户的一项极其宝贵的专业知识。

不过,这其中有很多内容。像改变颜色的色调或饱和度这样简单的事情可以唤起一种完全不同的感觉。文化差异会加剧这些影响,一个国家的快乐和振奋的色调在另一个国家变得令人沮丧。

彩色星形

这是关于色彩理论的三部分系列中的第一部分。在这里,我们将讨论不同颜色族背后的含义,并给出一些如何使用这些颜色的示例(对每种颜色都进行了一些分析)。第2部分我们将讨论色调、色度、值、饱和度、色调、色调和阴影如何影响我们感知颜色的方式。而且在第3部分我们将讨论如何创建有效的调色板为您自己的设计。

暖色

暖色

暖色包括红色、橙色和黄色,以及这三种颜色的变化。这些是火的颜色、落叶的颜色、日落和日出的颜色,通常充满活力、热情和积极。

红色和黄色都是原色,橙色位于中间(使其成为第二颜色),这意味着暖色都是真正的暖色,而不是暖色和冷色的结合。在设计中使用暖色来体现激情、幸福、热情和活力。

红色(原色)

红色

红色是一种很辣的颜色。它与火灾、暴力和战争有关。它也与爱和激情联系在一起。在历史上,它与魔鬼和丘比特都有联系。红色实际上会对人的身体产生影响,提高血压和呼吸频率。研究表明,它也能促进人体新陈代谢。

红色可以与愤怒联系在一起,但也与重要性联系在一起(想想颁奖典礼和名人活动上的红地毯)。红色也表示危险(停车灯和标志是红色的原因,警告标签通常是红色的)。

在西方世界之外,红色有不同的联想。例如,在中国,红色是繁荣和幸福的颜色。它也可以用来吸引好运。在其他东方文化中,新娘在结婚当天穿红色衣服。然而,在南非,红色是哀悼的颜色。红色也与共产主义联系在一起。

由于Red运动的流行,红色已经成为非洲艾滋病意识的相关颜色。

在设计中,红色可以是一种强烈的强调色。如果在设计中使用过多,尤其是在最纯粹的形式中,它可能会产生压倒性的效果。当设计中需要展现力量或激情时,它是一种很好的颜色。然而,红色可以是多功能的,较亮的版本更具活力,较暗的色调更有力、更优雅。

示例

Nacache设计
主页上插图的鲜红色Nacache设计的网站给这个页面带来了巨大的活力和活力。
Ming实验室
背景的鲜粉红色Ming实验室的网站充满了热情和吸引力。(2010)
创业企业实验室
上的静音红色创业企业实验室网站充满活力,但不咄咄逼人。(2010)
大声音嗡嗡声
大声音嗡嗡声的网站使用了各种深浅色调的红色单色设计,在这个例子中,这给人一种罂粟般的复古气息。(2010)
在阿姆斯特丹建造
在阿姆斯特丹建造的网站使用了鲜艳的红色强调色,可以立即将注意力吸引到页面中间。(2010)

橙色(次色)

橙色

橙色是一种充满活力的颜色。它以无声的形式与大地和秋天联系在一起。由于橙色与季节的变化有关,所以它通常可以代表变化和运动。橙色也与创造力密切相关。

因为橙色与同名水果有关,所以它可以与健康和活力联系在一起。在设计中,橙色既能引起人们的注意,又不会像红色那样让人难以抗拒。人们通常认为它更友好、更具吸引力,而且不太会出现在你的脸上。

示例

苦涩的租客
比特租房者明亮而大胆的主页充分利用了橙色为设计提供的能量。
我们不是姐妹
我们不是姐妹深橙色超大字体立即产生影响。(2010)
牛奶街
Christopher Kimball的牛奶街橙色作为强调色的微妙运用表明它可以用于更优雅和保守的设计中。(2010)
上海捷运
上海捷运将淡淡的桃色和深橙色混合在一起,打造出更加单色的设计,但仍然充满活力
罗宾·德尼罗
罗宾·德尼罗还使用了非常浅的桃色背景和两种深浅的橙色作为排版,设计更加低调。

黄色(原色)

黄色的

黄色通常被认为是暖色中最明亮、最有活力的颜色。它与幸福和阳光联系在一起。黄色也可以与欺骗和懦弱联系在一起(称某人为黄色就是称他们为懦夫)。

黄色也与希望联系在一起,正如在一些国家,战争中亲人的家人会展示黄丝带一样。黄色也与危险联系在一起,虽然不像红色那么强烈。

在一些国家,黄色具有非常不同的含义。例如,在埃及,黄色代表哀悼。在日本,它代表勇气,在印度,它是商人的颜色。

在你的设计中,明亮的黄色可以给人一种幸福和快乐的感觉。柔和的黄色通常被用作婴儿(而不是蓝色或粉红色)和幼儿的中性色。浅黄色比明亮的黄色更能给人一种平静的幸福感。暗黄色和金黄色有时看起来很古色古香,可以用于需要持久感的设计中。

示例

水壶
水壶“不完全真实的黄色”是活泼而充满活力的,而不是压倒性的。(2010)
桌面通道
桌面通道使用稍暗的黄色,使其看起来引人注目,但略显柔和。(2010)
玩具大战
玩具大战使用明亮的黄花背景,但在其他方面保持其设计简单明了。
米兰合同区
米兰合同区的网站简洁而简约,设计的所有影响都来自明亮的黄色背景。
Susa Ventures公司
Susa Ventures公司在他们的排版中使用黄花色调作为强调色,效果很好。

炫酷的颜色

酷炫色彩

冷色包括绿色、蓝色和紫色,通常比暖色柔和。它们是夜晚、水和大自然的颜色,通常是平静、放松和有点含蓄的。

蓝色是冷光谱中唯一的原色,这意味着其他颜色是通过将蓝色与暖色(黄色代表绿色,红色代表紫色)结合而产生的。

因此,绿色具有黄色的一些属性,紫色具有红色的一些属性。在设计中使用冷色可以给人一种平静或专业的感觉。

绿色(次色)

绿色

绿色是一种非常朴实的颜色。它可以代表新的开始和增长。它也意味着更新和丰富。或者,绿色也可以代表嫉妒或嫉妒,以及缺乏经验。

绿色与蓝色有许多相同的镇静特性,但它也融合了黄色的一些能量。在设计中,绿色可以起到平衡和协调的作用,并且非常稳定。

它适用于与财富、稳定性、更新和自然相关的设计。明亮的绿色更有活力,而橄榄绿更能代表自然界。深绿是最稳定、最富有的代表。

示例

记忆是我们的家园
的网站记忆是我们的家园使用蓝色-绿色色调,黄色字体使其充满活力,但不会太亮。
食物的节奏
这个食物的节奏的网站使用明亮的方绿色,非常适合将食物和信息联系在一起的网站。
勒法法尔·奥斯特里亚
丰富的猎人绿在优雅的餐厅网站上成为一种很好的强调色,比如勒法法尔·奥斯特里亚的。(2010)
安娜·罗莎·克劳
安娜·罗莎·克劳的网站有着柔和的鼠尾草绿背景,对这个投资组合来说几乎是中性的。
HelloMind你好
HelloMind你好明亮的绿色背景是年轻的,给人一种成长的感觉(与他们改善大脑功能的产品一致)。
法夸尔工作室
法夸尔工作室的灰绿色口音充满活力和现代感,在极简主义布局中脱颖而出。

蓝色(原色)

蓝色

在英语中,蓝色常与悲伤联系在一起。蓝色也被广泛用于表示冷静和责任感。淡蓝色可以让人耳目一新,也很友好。深蓝色更坚固可靠。蓝色也与和平有关,在许多文化和传统中具有精神和宗教内涵(例如,圣母玛利亚通常穿着蓝色长袍)。

蓝色的含义受到广泛影响,这取决于确切的色调和色调。在设计中,你所选择的蓝色的确切色调将对你的设计产生巨大影响。淡蓝色通常是放松和平静的。明亮的蓝色可以使人精力充沛,精神振奋。深蓝色和海军色一样,非常适合强度和可靠性很重要的公司网站或设计。

示例

设计的未来
的亮蓝色背景设计的未来调查结果网站主页脱颖而出,然后被用作整个网站的强调色。(2010)
Versett公司
Versett公司在他们的网站上使用明亮的蓝色作为主色,以及其他一些明亮的色调来区分不同的部分。(2010)
心灵深处
心灵深处的网站使用不同深浅的蓝色作为背景,给人一种可信、权威的感觉。(2010年)

紫色(次要颜色)

紫色

在古代,用于制造紫色色调的染料是从蜗牛中提取的,价格非常昂贵,因此只有皇室成员和非常富有的人才能买得起。

紫色是红色和蓝色的组合,具有两者的某些属性。它也与创造力和想象力联系在一起。

在泰国,紫色是丧偶的颜色。深紫色传统上与财富和皇室有关,而浅紫色(如薰衣草)则被认为更浪漫。

在设计上,深紫色可以给人财富和奢侈的感觉。浅紫色较柔和,与春天和浪漫有关。

示例

菲利波·贝洛
年的第一个项目Filippo Bello的投资组合使用紫色配色方案,增加创意感。(2010)
一栋共享房屋
网站一栋共享房屋这部纪录片使用了鲜明的紫色和热粉红色色调,给人以活力、创造力和想象力的感觉。
内容堆栈
打开内容堆栈,红紫色作为中性背景下的强调色效果很好,可以吸引人们注意重要的页面元素,如按钮。
动态观察
深紫色的色调动态观察的网站为他们的AI提供了一种成熟感。
KIKK节
紫色是创意的完美色调,比如2016年KIKK音乐节.

中性

中性色

中性色通常作为设计的背景。它们通常与较亮的强调色相结合。但它们也可以在设计中单独使用,并可以创建非常复杂的布局。中性色的含义和印象比暖色和冷色更受周围颜色的影响。

黑色

黑色

黑色是中性色中最强的。从积极的方面来说,它通常与权力、优雅和拘谨联系在一起。从负面来看,它可能与邪恶、死亡和神秘联系在一起。在许多西方国家,黑色是哀悼的传统颜色。在某些文化中,它还与反叛联系在一起,与万圣节和神秘主义联系在一起。

当黑色不仅仅用作强调符号或文字时,通常用于前卫的设计以及非常优雅的设计。它可以是保守的或现代的,传统的或非传统的,这取决于它结合的颜色。在设计中,黑色通常用于排版和其他功能部件,因为它是中性的。黑色可以更容易地在设计中传达出复杂和神秘的感觉。

示例

DUA公司
褪色的黑色(技术上为深灰色,但接近黑色,因此有必要对其进行分类)DUA公司这个网站在这样一个极简主义的设计中工作得很好。(2010)
匿名汉堡协会
匿名汉堡协会(Anonymous Hamburger Society)的黑色背景是网站上令人惊叹的食物照片的完美画布。匿名汉堡
蒂莫西·萨切蒂的投资组合
上的许多图像蒂莫西·萨克森的投资组合以黑色为主,这也是透明菜单的颜色,给整个网站一种前卫、现代的感觉。(2010)
赫科
黑色作为强调色的简约设计赫科的网站给人一种超现代的感觉。
Hyperverve公司
这个此处使用的黑色色调伴随着动画,它给人一种前卫、近乎毛骨悚然的感觉。

白色

白色

白色与黑色在光谱的另一端,但与黑色一样,它可以很好地与任何其他颜色搭配。白色通常与纯洁、清洁和美德联系在一起。在西方,新娘在婚礼当天通常穿白色。它还与医疗保健行业相关,尤其是医生、护士和牙医。白色与善良联系在一起,天使通常被描绘成白色。

然而,在东部大部分地区,白人与死亡和哀悼联系在一起。在印度,这是传统上唯一允许寡妇穿的颜色。

在设计中,白色通常被认为是一种中性背景,让设计中的其他颜色具有更大的声音。不过,它有助于传达清洁和简单,在极简主义设计中很受欢迎。设计中的白色也可以描绘冬天或夏天,这取决于围绕它的其他设计主题和颜色。

示例

黑色和木质
黑色和木质使用白色作为背景和强调色(例如在排版中),给网站一种非常干净的感觉。(2010)
努诺·科埃略·桑托斯
背景大多为白色努诺·科埃霍·桑托斯的网站为现代美学做出了贡献。
云雀
Skylark的网站使用了白色字体,使网站在设计上更简洁。(2010)
花费
花了大量时间使用白色字体,为网站增添了现代而柔和的外观。(2010)
驻留
住宅在他们的主页上使用白色作为强调色,这是一个非常独特但有效的选择,包括CTA。(2010)

灰色

灰色

灰色是一种中性色,通常被认为是光谱的冷端。它有时被认为是喜怒无常或令人沮丧的。在一些设计中,浅灰色可以代替白色,深灰色可以代替黑色。

格雷通常是保守和正式的,但也可以是现代的。它有时被认为是哀悼的颜色。它通常用于公司设计,其中正式和专业性是关键。它可以是一种非常复杂的颜色。纯灰色是黑色的阴影,尽管其他灰色可能混合了蓝色或棕色色调。在设计中,灰色背景非常常见,就像灰色字体一样。

示例

圆形
这个圆形该网站非常现代,用各种深浅的灰色来描绘网站的不同部分。(2010)
仅供办公室使用
上的灰色背景仅供办公室使用网站非常精致,几乎看起来是白色的,给人一种非常现代的感觉。(2010)
希诺拉
格雷在希诺拉网站。(2010)
萨姆·达尔林
当与现代字体混合时,灰色呈现现代感. (2010)
英俊的弗兰克
灰色是一种完美的背景色插图集. (2010)

棕色

棕色的

棕色与土、木、石联系在一起。这是一种完全自然的颜色和温暖的中性。棕色可以与可靠性、坚定性和朴实性联系在一起。它也可以被视为枯燥乏味。

在设计中,棕色通常用作背景色。它也见于木材纹理,有时见于石头纹理。它有助于给设计带来温暖和健康的感觉。它有时以最深色的形式被用来代替黑色,无论是在背景还是在排版上。

示例

特雷菲塔
特雷菲塔使用暖棕色作为按钮和CTA的强调色,考虑到其他设计的现代性,这是一个意想不到的选择。(2010年)
横田康弘
米色背景和棕色字体横田康弘的作品集网站既温暖又朴实,同时还是设计作品的良好背景,如灰色阴影。
关闭和打开
Off&On Barber Shop在其网站的大部分内容中使用了各种棕色元素,给人一种老式的感觉。(2010)
乌姆贝特·塞萨里
Umbert Cessari的网站使用各种深浅的棕色作为强调色,给人一种朴实的感觉。(2010)
绿色叛军
绿色叛军的网站在大部分排版和图形以及一些纹理中都使用了棕色,给人一种有机的感觉。(2010)

米色和棕色

棕褐色的

米色在色谱中有点独特,因为它可以根据周围的颜色来选择冷色或暖色。它有棕色的暖色和白色的冷色,就像棕色一样,有时被视为暗色。在大多数情况下,它是一种保守的颜色,通常用于背景。它也可以象征虔诚。

设计中的米色通常用于背景,并且通常出现在具有纸张纹理的背景中。它将呈现出周围颜色的特征,这意味着当与其他颜色一起使用时,它本身对设计给人的最终印象几乎没有影响。

示例

人员地图
人员地图的网站使用了更为金色的棕褐色,给网站带来了高档感,尤其是与网站的排版相结合时。
平面场地
平面场地温暖的棕褐色背景色让人感觉现代,却没有极简主义的感觉。(2010)
拉皮埃尔·奎·图恩
拉皮埃尔·奎·图恩的网站使用了多种色调的棕褐色作为其主色调,同时还使用了一些明亮的色调,以营造一种非常有趣的感觉。
Mile Inn酒店
Mile Inn网站将现代字体与米色和黑色调色板相结合,打造复古时尚的网站。(2010)
背景是工作的一半
用于这个网站完全出乎意料,给人一种世纪中期的现代感。

奶油和象牙

象牙

象牙色和奶油色是复杂的颜色,带有棕色的温暖和白色的凉爽。它们通常很安静,常常能唤起人们的历史感。象牙色是一种平静的颜色,虽然有点暖和,但也有一些纯洁的白色。

在设计中,象牙可以给网站带来优雅和平静的感觉。当与桃色或棕色等泥土色结合时,它可以呈现出泥土色。它也可以用来点亮较深的颜色,而不需要使用白色的鲜明对比。

示例

斯蒂芬妮·布鲁克勒
几乎没有象牙色背景的Stefanie Bruckler的投资组合该网站是一个受欢迎的速度变化,从典型的中性灰色,给它一个永恒的外观。(2010)
圣派克斯
丰富的奶油感觉非常现代,甚至前卫的强调色与黑色背景一起使用时。
Techies项目
对于专注于科技行业的网站,但给它一种温暖、人性化的感觉。
龙虾
考虑到电影《龙虾》(the Lobster)有多奇怪,他们在网站上使用浅灰白色的背景是一个出乎意料的低调选择,感觉非常现代。(2010)
甜木兰凝胶
甜木兰凝胶浓郁的奶油色背景是一个温暖而诱人的设计的完美中性色。

简言之

虽然这里包含的信息可能看起来有点压倒性,但色彩理论与任何其他东西相比,都是关于特定色调所唤起的感觉。但这里有一个快速参考指南,用于了解上述颜色的常见含义:

  • 红色:激情、爱、愤怒
  • 橙色:能量、幸福、活力
  • 黄色的:幸福、希望、欺骗
  • 绿色:新的开始、丰富、自然
  • 蓝色:冷静、负责、悲伤
  • 紫色:创造力、版税、财富
  • 黑色:神秘、优雅、邪恶
  • 灰色:穆迪、保守、正式
  • 白色:纯净、清洁、美德
  • 棕色:自然、健康、可靠
  • 棕褐色或米色:保守、虔诚、沉闷
  • 乳白色或象牙色:冷静、优雅、纯净

整个系列

更多资源

粉碎社论 (卢,伊)