颜色对设计影响很大 。 但是,颜色过多的设计很容易使观看者不知所措。 有时,极简主义方法可以帮助吸引访问者注意特定内容-正确的内容。
在此网站集合中,我们重点介绍了使用三种颜色作为其主要设计元素的设计。 但是,这些站点中的一些站点的确包含3种主要颜色以外的一种或两种突出显示颜色。 尽管如此,这些网站做得太好了,并且接近3种颜色标准,我们不得不将它们包含在此系列中。
请注意颜色如何帮助您将注意力集中在需要的地方。 您能看到品牌与每种设计的联系方式吗? 您还可以看到如何在不超出极简主义设计路线的前提下,将全彩图形与有限的调色板一起使用仍然很有用。 以下示例将向您显示最多使用3种颜色的网站仍然可以有效。
一个很好的极简主义设计,它使用足够的颜色来吸引人们关注网站上的重要内容。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/ce89173e47dd683718870f8edf043792.png)
大型的蓝色摄影背景与白色的主要文字和绿色的品牌名称形成了鲜明的对比,后者首先引起了读者的注意。 浅蓝色的文字吸引了人们的眼球,简要介绍了公司及其令人印象深刻的客户。 很好地使用颜色来创建层次结构!
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/13c1f3cc11f1b4b39479bcb519c1d686.png)
阁楼
白色背景上不同的灰色阴影使此网页具有精致的简约外观。 页面菜单中的彩色文本可作为网站导航的指南。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/d59a91148779396690481bc77256e507.png)
胖子集体
就像其品牌外观和基调一样,此网站设计也“简短而甜美”。 保持品牌外观的方式!
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/967a53dd36e2dd47328be79609cf86d9.png)
减去插图,该网站仅在设计中包含了三种颜色:黄色,黑色和白色,当您考虑时,它是对灯泡的很好的参考。 灯泡与公司名称Creative Spark搭配得很好。 有趣。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/64b1f5af4526b20474c01402804d23b8.png)
薄荷味的
可爱的名字和可爱的大多是3种颜色的设计,这既简单又富有创意。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/6098602f2aebd40e48c4caf491162f22.jpeg)
谢尔盖·斯坦切夫(Sergey Stanchev)
深色方案和有限的颜色使用方式使该站点具有精致,专业的外观和感觉。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/1b8039d2e7b53365bed65a6abf260bad.png)
Digimurai
橙色和蓝色的文字颜色与图示的背景和可爱的小吉祥物协调。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/bebb80b6c3766a26de8795c04531b735.png)
白色背景上的灰色,蓝色和粉红色提供了非常“快乐”的色调,对于志愿服务/慈善计划而言,这似乎是一个不错的选择。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/49ecdc011fea6731d1f45d15d91c3b9f.png)
这个聪明的设计使用了毒品的颜色! 白色,灰色和蓝色通常是您在药盒上看到的颜色,因此这些设计师真正想到了“设计就是药物”的想法。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/9a7d48595975842c664c3af33bc4e83e.png)
啊,David Airey,平面设计博客社区中最受欢迎的品牌标识设计师之一。 他的网站极简,在白色背景上仅显示黑色,橙色和灰色文字。 简单而有效!
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/3ffebe7c6118461a8cd134945ade1759.png)
带纹理的背景看起来像某些人用于简历和简历打印的精美纸。 同样有趣的是,当您将鼠标悬停在其上时,粉红红色的文本会逐渐变为浅灰色。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/dbf46db0324b3fea6fc55daffdb21aed.png)
八面
黑色,白色和灰色以及一些橙色文字是此设计中使用的主要颜色。 这些颜色使该网站具有某种“新闻”外观。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/46f875e2dfe4ce93d4c0f63a6d1d0abe.png)
发热
在此设计中,深灰和浅灰与红色可互换使用。 尽管此设计在使用什么颜色方面可以更好地组织起来,但它们确实很好地保留了标题的三种颜色。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/6467f4b21fce79900adc4461bf8e6fe9.jpeg)
斯蒂芬·科森(Stefan Coisson)
该网站在简单的网站布局中非常有效地使用了3种颜色。 尽管可以更好地组织文本,但是绿色突出显示的颜色与黑白文本相比显得非常突出。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/8e638e1fb639527abccbd9c8125d4258.png)
好的,所以这是一个超出了3种配色方案的扩展,但是它是一个非常漂亮的网站,它尖叫着:“看着我!” 黄色突出显示和文本链接(带有少量橙色下划线)与黑色和灰色以及偶尔的白色文本形成了鲜明的对比。 美丽!
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/72edda44c640cb1bb3f0fcfd17b4ee3b.png)
深灰色,黑色和草绿色很好地融合在一起,使该站点具有令人耳目一新的专业外观。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/424460e0848094a894922bd400ab65bc.jpeg)
最少的网站
开始注意到在白色背景上使用黑色,灰色和亮色的图案吗? 也许这种配色方案很受欢迎,因为它创建了具有足够色彩的简约外观,足以引起人们的注意……这个网站也不例外。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/6df9175db33fb6e7b8c222d22fe2e65f.jpeg)
侧面的黑色条带给人以很好的触感,增加了“胶片”的外观和感觉。 灰色和红色文本使此站点保持简单,这对于必须包含的所有图像非常重要。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/cff39cb52f464b653ac3315cda836bcb.png)
蓝色和灰色调使该设计简约而传统。 可以很好地使用3种不同的颜色来吸引对重要文本的注意。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/5717eabb8f8ba9d5e7a198a3b2bbe819.png)
谷物和克
该网站在用深色,男子气概的颜色(与标题保持一致)和白色等男子气概的色彩来营造“绅士风度”方面做得很好。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/00ab108a226afb35c3353e36731aa63c.png)
很棒的字体库
橙色以及黑色和灰色(以及少量白色文本)有助于破坏这个文本繁多的网站并使之有趣。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/5e9bd085b47e3bcebdb393b59b637428.jpeg)
该站点主要使用几何形状的深灰色和浅灰色,但是蓝色也是亮色,还有一点粉红色。 因此,实际上,这是黑色,灰色和高光配色方案的另一种变化。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/57e0c03998ec914d5856197463d19ff2.png)
灰色,一些白色和许多蓝色构成了非常简单的配色方案。 另一方面,蓝色似乎有点不堪重负,并且闪烁的图形没有太大帮助。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/ae9cb39cc64c61fad0471abd67ac8f7e.png)
电台平面设计
从技术上讲,该站点仅使用大约3种颜色:白色框中的黑色和灰色文本,以及粉红色带纹理的背景。 可是等等! 关闭页面,重新打开它,背景现在变成蓝色,不,黄色。 好的,您现在可以退出重新打开页面。 失望的是,只有三种颜色可以玩,不是吗?
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/d299d7ae499bac1e829540a2bd72b6c3.png)
同样,深灰色,浅灰色和突出显示颜色为网页设计提供了一种简单有效的配色方案。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/a6e61505b24b51615271d68a665e478a.png)
当您将鼠标悬停在文本上时,更改文本的颜色可能会很有趣,但是此功能可能会过多地利用此功能。 但是也许他们可以因为简单的三色设计而摆脱它。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/08eafac74aecbc0eaf92709dcbbe55d7.png)
斯蒂芬·Perl森(Stefan Persson)
灰色/黑色和橙色和白色为这款井井有条的设计增色不少。 每种颜色似乎都严格使用,这确实使该站点的导航达到了一个很高的高度。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/8e638e1fb639527abccbd9c8125d4258.png)
浮士德
一个简单的配色方案有助于减轻该站点的繁忙程度; 但是,较少的橙色将对设计有更大的帮助。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/6cb4c50315258cd8493ee68810038040.png)
该站点的导航有些不同,并不总是建议这样做。 但是,深灰色,浅灰色和白色配色方案有助于使站点保持足够简单,以至于可以相当快地学习。
![3色网站设计](https://i-blog.csdnimg.cn/blog_migrate/3ff110b5019093d5cc01faae0d362735.png)
编者注:本文由Tara Hornor为Hongkiat.com撰写。 Tara拥有英语学位,并撰写有关营销,广告,品牌,图形设计和桌面出版的文章。 除了写作生涯,塔拉还喜欢与丈夫和两个孩子在一起。