使您的网站设计和配色更加自由. 另：死活的方法有色阶、曲线、色彩平衡等。

网页的视觉方面主要由形式（或布局）、颜色、图片和文字信息组成，形式需要思考和发明。设计师通常更注重形式感，因为视觉冲击、设计差异或创新大多依赖于形式，而色彩主要影响整体观感、设计质量和受众情感。很多时候我设计了一个很好的表格，但是没能做出这份稿件应有的质量，岂不是很可惜？

图片素材需要学习加工，文字需要整理，但网页的色彩是否一定要有自然的色感、丰富的理论和多年的经验，才能运用自如？

当然不是！

关于网页配色

甚至有些泛滥成灾，网上有很多网页配色的文章。稍有注意的同学应该知道“色轮”、“色卡”等辅助配色工具。比如，你真的会通过色轮来选择网页颜色吗？例如，通过下面提供的颜色组合，你是否可以自如地应对一个又一个类似类型的网页设计需求？

网页上显示的颜色数量要多得多，因为CMYK 和RGB 颜色模式不同。在选择上也应该有更多的自由度，但是在配色上，我们经常会遇到设计作品脏、灰、花哨等重大问题，需要解决。

网页案例分析

网页的配色方案不应超过三种。

没错，真相。但多从色相上看（红橙黄绿蓝蓝紫等不同颜色）

更容易选择主色，色相差异明显。稀有的有对比色、相邻色、冷暖色互补等，可以简单设置，也可以直接借鉴胜利作品中的主辅色比例，如稀有的朱红点缀深蓝，亮黄点缀深绿色等

需要面对的设计要求在颜色分布上会有更多的问题：但通常。

由于本人从事游戏网页视觉设计，所有案例均以游戏网页为例。其他网页类型可扩展思考或仅供参考）

根据网页的信息量，如上图。对颜色区域和文字信息的层次划分会有更多的要求，所以在“不超过三种网页颜色（阶段）”的原则下，我们只能找到更多相同颜色的颜色来改进设计，即，饱和度”和“亮度”做文章。

这就是本文要分享的解决这个问题的“自然”配色技巧：重叠软配色。

以上全是废话）软配色技巧分享（这里是正文。

不用懂三角函数，四个算术运算，这个方法很简单。你不需要了解颜色指数和直方图，甚至不需要了解色阶曲线和亮度等级……甚至，你可以对颜色一无所知。

你只需要了解三个关键词：叠加、柔光和透明度（填充）

如果连这三个关键词都不懂，记住他的位置

填充不影响“混合选项”效果。注意：透明度与填充略有不同。透明度应用于整个图层。

花几分钟时间来理解这个配色技巧是如何工作的：顺便说一下。

即：使用纯白（#ffffff和纯黑（#000000）通过“叠加”和“柔光”混合模式（效果类似于调整饱和度和亮度）在任何颜色上得到最佳匹配颜色（然后通过调整透明度选择最佳颜色合适的二次色）

通过调整overlay/soft模式下黑白块的不同透明度（以10%100%的整数值为例），可以得到40种具有明显差异的配色方案，如上例所示。有了这种技术，理论上每种颜色都可以轻松“零失误”地获得无穷无尽的自然色组合！

所以这种配色方法对于纯黑和纯白是行不通的。由于叠加和柔光模式，图像的最亮和最暗部分没有调整。

设计实战演示：

是不是像上图这么复杂？

你只需要了解上面的方法，没必要。可以忘掉插画，在设计作品中尽情发挥吧！

三个简单的步骤：

或黑白渐变（可以是点、线、面……甚至字体）黑色或白色。

混合模式选择叠加或柔光

省心的方法是直接输入一个整数值，调整透明度（1%-100%随意。比如：质地轻的页面可以选择20%-40%，质地重的页面可以输入60%以上）

无论您的主要颜色是什么，黑白叠加或柔光。您可以轻松获得一整套完美搭配的颜色）

如下图所示：字体颜色、细节线条、按钮渐变、边角高光、描边阴影……都可以在黑白中自由挥洒。这不仅适用于色域划分或几种辅助色的提取。

方法扩展（细节）

如果将此方法应用于按钮.

通常实际使用时可以描述13层）通过混合选项中的shadow、outer glow、stroke（不适用于soft layer方法）、inner shadow、inner glow rdq

这些细节都如影随形、色彩都随变而变~可节省大量重调细节或盲目选取配色的时间且无论形状、色彩如何变化。!

一石三鸟，细节、品质和效率。兼而得之!

假如让细节成为习惯，近期看到设计圈有讨论“网页雕花不可取”课题。让美感成为直觉，雕花也便只是普通设计行为而已。

案例历练：

后记：

科学化进行你设计。叠柔配色法：无招胜有招~把抓不住的感觉交给精密的计算机。

更高的品质，更短的时间。值得拥有~......
本文发布于北京网站制作公司推来客http://www.tlkjt.com/

我们专注高端建站，小程序开发、软件系统定制开发、BUG修复、物联网开发、各类API接口对接开发等。十余年开发经验，每一个项目承诺做到满意为止，多一次对比，一定让您多一份收获！