改变我们设计方式的网站配色方案
作者：JESS THOMS
杰斯是一位作家和品牌战略家，专注于支持技术，设计和营销方面的创新理念。她是对话设计工作室Xandra，Inc
Website设计已经看到了无尽的趋势，从第一次的网站文字在白色背景上，以单色模板网站主题-我们发展到看到各种各样的网站设计方案。特别是网站配色方案。
我们来看看：
色彩理论如何用于网页设计
色轮在网站配色方案中的应用
色彩心理
什么是色彩理论？
色彩理论一直追溯到艾萨克·牛顿（Isaac Newton），他在1665年用棱镜进行的实验确定了彩虹中的七种颜色。现在，我们使用色彩理论作为现代指南集合，如何创建最佳视觉吸引力的配色方案，甚至利用心理学进行最有效的沟通。
首先，我们需要一种颜色术语和定义的共享语言。这个方便的列表来自我们的选择调色板的指南。
颜色的词汇
Hue：有什么颜色，比如蓝色或红色
色度：颜色有多纯净; 缺少白色，黑色或灰色
饱和度：颜色的强弱
价值：颜色的亮度或暗度
音调：通过将灰色添加到纯色调来创建
阴影：通过将黑色添加到纯色调来创建
色调：通过在色调中添加白色来创建
色轮如何工作
基本色轮（如下图所示）包含用于创建配色方案的十二种颜色。它包括原色（红色，黄色，蓝色），次要颜色（紫色，橙色，绿色），以及混合相邻颜色（例如，黄色和橙色）制成的组合颜色。
通过采用技术为您的调色板选择完美的颜色混合，可以从色轮中获得良好的配色方案。
色轮，Webflow友情提供
色彩和谐是以美学上令人愉悦的方式配对色彩的理论 - 在开发色彩方案时应引导网页设计师。例如，补色对文本不利，但矩形颜色技术可以帮助您以丰富多样的方式使用颜色。有几种颜色组合技术; 然而，与网站配色方案最相关的两个是互补和类似的。
互补色
相互补充的颜色很容易在色轮上相互对立，如蓝色和橙色，红色和绿色，紫色和黄色。
例如，在WeWork的网站上，整个网站都使用了亮蓝色和橙色的互补色，包括按钮和链接上的重音，以及所选图像中的颜色。
WeWork的网站使用蓝色和橙色的互补色
类似的颜色
该配色方案由色轮上彼此相邻的颜色组成。这种配色方案令用户眼前一亮，因为类似的颜色经常出现在自然界中，如橙色，粉红色和紫色色调的夕阳。
Dropbox最近的重新设计是一个完美的例子，采用大胆的色块设计，采用紫色，蓝色和粉红色的类似配色方案。
Dropbox使用大胆的颜色，感觉他们不应该一起工作 - 但他们这样做！
色彩心理
另一个网站设计趋势是使用单一颜色来控制设计 - 我们不是说黑色或白色！
设计师越来越冒险并使用单一的大胆色彩来传达他们的网页设计。无论您需要使用何种颜色来创建良好的配色方案，都可以在网络上找到最佳实践示例。此外，在色彩心理学的基础上，设计师可以为他们的色彩方案做出最佳决策，从而产生情感影响。
色彩心理学就是大脑如何看待它的可视化。虽然主观，每个人都有自己喜欢的颜色，颜色如何让我们感觉有点普遍。使用色彩心理学，设计师（和营销人员）可以利用色彩更有效地传达他们的设计。
红色
红色需要关注，与爱，能量，战争，力量，力量和激情相关联。这是一个强大的网站选择，但如果它代表强大的东西，它可以非常有效。
苹果
黄色
黄色是色轮上最亮的颜色，通常与快乐和快乐有关。作为一种容光焕发的颜色，它意味着象征着希望和信心。富有想象力的设计和使用黄色的品牌可以传达欢乐和乐观。
Headery
橙子
橙色是冒险和复兴的颜色。红色和黄色的混合物，它比红色具有更多的平衡能量，但仍然充满生机。这是一种非常善于交际的颜色，受到外向者的青睐。
阿罗哈
蓝色
蓝色是平静，值得信赖和可靠的 - 尽管科技巨头Facebook只是蓝色，因为马克扎克伯格是红色/绿色色盲。但是，你可以看到银行，保险公司和其他软件巨头使用蓝色作为他们的品牌颜色，因为它促进了信任和忠诚度。
永远永远
绿色
绿色还活着！绿色心理意味着更新和成长。自然是绿色行动中最简单的例子。因此，我们将绿色与和谐和内心平静联系在一起。
无边界
粉
粉红色可能是一种棘手的颜色，取决于它所处的背景和文化。一旦被认为是西方文化中的女性化，我们正在看到色彩被消除的性别偏见的转变。除了性别，粉红色的心理学包括天真，乐观和和平。它可能唤起一种敏感，培养和感情。
太面对了
紫色
紫色有多种形式：丁香，紫罗兰和薰衣草，所有这些都有明显的心理反应。但紫色，蓝色和红色的混合，唤起了财富，皇室和智慧的感觉。这是一种高度创造性的颜色，品牌使用紫色来传达他们的创造性成就并不是错误的。
煎蛋卷
制定调色板
调色板是数字设计中使用的所选颜色范围。通过创建调色板并从项目一开始就确定颜色方案，设计师的心理负荷立即得到缓解，用于项目的其余部分，为想象力和创造力留下空间。这些选定的颜色是任何设计的边界，并分为主色，次色和强调色。
https://giant.gfycat.com/QuarrelsomeRealisticKookaburra.webm
主导色彩
首先，您需要决定您的网站将显示和关联的主色。这通常是您正在设计的公司的主要品牌颜色。主色调可用于单色调色板，使用一种颜色作为英雄，或作为具有周围互补色的第一选择。
二次色
次要颜色只是你第二次使用的颜色选择。这种选择通常是设计师面临的最重要的决定，因为这是色彩理论发挥作用的地方。二次颜色选择是您决定颜色组合技术（互补，类似，三元组）和相应设计的地方。从本质上讲，你决定采用明亮大胆的设计，在色轮上颜色相互对立，或采用更柔和的方法，颜色相近，更容易在眼睛上使用。
强调色
当谈到强调色时，我们谈论的是背景，白色空间（或不是），链接，按钮和图标。例如，如果使用单色调色板，则可以在中性设计中使用亮色调。品牌通常只在口音中使用其主要品牌颜色，留下白色背景。
用于创建调色板的免费工具
如果您需要免费的视觉辅助来进行颜色组合，请查看以下免费资源：
Muzli颜色：使用此工具可以快速创建和编辑调色板，颜色匹配，甚至可以根据您自己的颜色选择预览和下载自定义UI工具包。
Coolors.co：使用此工具只需单击即可生成颜色方案，并探索数千个用户生成的调色板。
Canva色板生成器：使用Canva的免费工具从您喜欢的照片生成配色方案。非常适合创建与您需要在网页设计中使用的图像完美匹配的配色方案。
Colormind.io：Colormind还允许您生成免费的配色方案，但也可以将它们实时应用到模拟着陆页，这样您就可以从一开始就可视化您的网站设计。
现代网站调色板
在设计网站时，我们提供了大量的设计和颜色决策，我们将一些现代调色板结合在一起，激发您的灵感。
类似的配色方案
与Dropbox的设计类似，Useless London使用醒目的蓝色和绿色类似调色板，令人赏心悦目，并很好地传达他们的想法。
无用的伦敦
补充配色方案
色轮上彼此相对的颜色是互补色，如紫色和橙色。
Kin Europhorics的网站使用其主要品牌颜色橙色作为重点，并将其与大胆的紫色图像配对，以产生戏剧性（和欧洲）效果。
Kin Euphorics
渐变色方案
渐变是指一种颜色无缝地进入另一种颜色。将蓝色和绿色等类似颜色合并，以及网站背景的优秀配色方案，将设计从一种平面颜色中提升，这是一个好主意。做得最好的公司可能是Spotify，在整个产品生态系统中使用渐变。
Spotify的
现代配色方案
电子商务品牌喜欢这种配色方案。使用一种品牌颜色，并将其与清晰的产品图像和白色空间配对。想想：他，户外之声和卡斯帕。
卡斯帕
单色配色方案
单色配色方案包括单色调的所有颜色（色调，色调和阴影）。这种色调可以是任何颜色 - 但颜色方案仅适用于该颜色及其色调，色调和色调的变化。
这个来自Axiology Beauty的例子使用柔和的红色作为主色调，并使用各种浅色调来补充。
价值学
柔和的色调调色板
柔和的色调调色板使用与黑色混合的色调来降低其值并消除颜色的亮度。想想秋天的色调，比如Stumptown Coffee网站，它使用棕色，红色和蓝色的柔和色调来营造一种反映其品牌的舒适调色板。
Stumptown咖啡烘焙师
主要配色方案
原色是色轮的父母：红色，蓝色和黄色。二次色的基础，仅使用主要颜色调色板是一个大胆的设计选择，可以提升网页设计。
Bumble在其网站调色板中使用相同尺寸的原色。
弄糟
复古配色方案
在您的网站配色方案中使用复古色彩对于具有实际复古性质的产品（想想宝丽来）来说是个好主意，也是一个很好的美学选择。代理商五/四使用红色和棕色色调来创建复古调色板，并与谷物和棕褐色编辑的照片配对以获得完整效果。
五类/ 4
