Date 2026-04-20 15:11:20
@学习设K先生 ：我相信大多数人都使用过在线颜色匹配工具或在线颜色匹配网站，所以使用这些工具或网站来匹配颜色，你真的能得到正确和美丽的效果吗？当然不是。原因很简单，如果这些工具可以很容易地完成颜色匹配工作，那么你就不需要设计师，任何不理解颜色的人都可以取代我们。
因此，本教程将讨论如何正确使用在线配色工具。首先，我向您推荐几个在线配色网站。
△ brandcolors.net
该网站是世界知名品牌、企业公司和知名网站的配色方案，并提供快速下载选项。您可以单独单击颜色完成复制。
△ webdesignrankings.com
据说这个网站是一个设计师在24小时内独立开发的，上面有一些漂亮的颜色组合。当我们把鼠标移到不同的水滴上时，颜色的颜色值就会显示出来。
△ coolors.co
本网站只需按下空格键即可快速生成配色，每次都会出现由五种颜色组成的色卡。这里不仅会显示颜色代码，而且当我们点击某种颜色时，也会有不同纯度和亮度的选项，颜色也可以通过滑块进行调整。
△ colordrop.io
该网站还为我们提供了很多颜色组合，每个组合都有四种颜色，当我们点击某种颜色时，会弹出相应的颜色参数，使用方便，非常方便。
有很多类似的配色网站。虽然这四个网站不一定是最好的，但配色网站是相似的。重要的不是你知道多少网站，而是你是否真的能使用它们。
我相信现在一定有一些人在想「有了这些网站还能配色吗？」让我们用事实来谈谈。
这个界面的布局已经安排好了。在这里，我们将尝试从我们提供的网站中选择一组颜色来填充尝试。
我们从这个网站上寻找，在这里我们选择了这组纯度高、非常漂亮的颜色组合。
看看这组颜色很漂亮，然后我们随意填充左边的界面，我们看看最终的效果，不好，可以说颜色匹配破坏了界面。
如果你仍然拒绝接受，我们再试一次也没关系。
我们之前说过，这个网站是知名品牌的颜色，颜色搭配应该没有问题，这里我们选择更熟悉的500px颜色搭配。
填充界面后你感觉如何？如果我说这很糟糕，那应该不算太多。因此，我们得出结论，直接使用在线配色网站的颜色是不可行的。让我们看看如何使用它。
首先是构建布局。如果你想做好配色布局，你不能太坏。如果布局一团糟，无论配色有多好，都无济于事。
布局完成后，需要确定颜色的附着载体。说白了就是使用颜色的地方。例如，在这个界面中，我们可以填充的第一件事就是背景。
第二种是图片的颜色。当然，图片本身也有颜色。为了方便理解，我在这里做了去色处理。平时不需要这样做，但必须提前考虑图片的颜色。
然后是布局中的色块。
最后是文字部分。虽然文字可以是彩色的，也可以是无色的，但无论如何，我们都应该知道。
在确定了颜色的附着载体之后，接下来需要考虑的是图片通过颜色传达出什么样的气质或风格。
由于这里提供了品牌和相关图片，案例的风格定位相对简单。例如，具体的有：水、游泳、女性、性感、护肤产品。抽象的，如凉爽、活力、简单、优雅、清新、文学艺术等。
根据这些信息，我们确定了图片的主色调，这里我们选择蓝色，可以说没有问题。
同时，也可以为图片确定主色调。在这里，我们将暂时确定明色或浅色。
前期准备工作已经完成，下一步就是根据我们的设计需要选择合适的网站。
什么是合适的网站？例如，我们之前已经分析过这个界面。可以填充颜色的部分包括背景、色块和文本，因此我们可以得出三到四种颜色是最合适的。
因此，我们应该根据颜色的数量来筛选网站。例如，在这个网站上，它提供的颜色搭配只有十几个。如果我们从这里选择，我们会浪费很多不必要的时间，所以我们可以先通过。
而且这个网站有五种颜色，不适合我们使用的颜色数量，所以也可以PASS。
剩下的两个网站都是四种颜色，所以可以从中选择。那么如何选择呢？首先，我们可以找到蓝色的色卡。
以这个网站为例。
我们从这个网站上提取了十张色卡，然后开始筛选，因为我们不能全部使用它们。我们之前已经确定图片的主色调是明色或浅色，所以我们首先将颜色不一致的组合放在PASS上。
接下来，我们将根据颜色关系进一步筛选，例如使用类似的颜色或对比色。这应该根据风格定位来选择，因为我们不希望图片是单调的风格，所以我们在这里删除类似颜色的组合。
现在只剩下四张色卡了，再往下筛选就没那么容易了，所以要结合风格定位来分析。
首先，除了蓝色和无色，这组颜色是浅棕色，所以这种颜色会对图片产生非常重要的影响，但这种颜色不符合我们的风格定位，所以它也可以被删除。
理论上，剩下的三组颜色符合我们的风格定位，如蓝色凉爽、绿色健康、粉色女性、黄色活力、白色纯洁等，所以此时选择哪组颜色取决于你想突出哪种风格。
所以在这里我要突出清凉、干净、有些活力这种感觉，所以我选择了这组配色方案。
接下来是后期部分，即操作部分。选择好色卡后，我们应该首先分析它们之间的关系。例如，这组颜色可以分为蓝色和黄色，蓝色可以分为深蓝色和浅蓝色，其余的是白色。
经过分析，我们需要确定颜色的位置。我们已经确定了蓝色作为主要颜色，图片中的主要颜色是面积最大的背景颜色，但这里应该选择哪两种蓝色？在这里，我们仍然需要根据风格进行定位。例如，清凉、清新、优雅等印象必须反映在浅蓝色中。深蓝色不好，浅蓝色接近图片的颜色，可以很好地融合在一起。因此，我们使用浅蓝色来填充背景。
然后从深蓝色、黄色和白色中选择一个填充文本和两个更重要的色块。因为背景是浅蓝色，如果文本填充黄色或白色，识别性会很差，所以我们填充深蓝色。
所以主色是浅蓝色，副色是深蓝色，黄色可以作为装饰色，所以我们用黄色填充文本下面的色块和一些需要装饰的地方。
剩下的三个色块可以保留白色，白色的和谐会让画面看起来透气，否则整个画面都是彩色的，会显得有点闷。
在这里，我们已经在这个布局中填充了所有提取的颜色，可以说比之前随机填充的颜色要好得多。但这里仍然存在一些问题，因此需要进一步微调细节。
现在这张照片的颜色匹配有什么问题？最明显的是黄色的纯度有点高，在这张照片中有点引人注目，我们知道黄色是作为装饰的，所以我们应该降低黄色的纯度，提高亮度。
调整完黄色后，我们发现文字的深蓝色在黄色的衬托下有点强烈，所以我们也应该对深蓝色做一些适当的调整。
然后这个配色就完成了，可以说和我们预期的风格定位是一致的，也很漂亮。现在我们可以换一组颜色试试。
我们之前说过这三组色卡都可以，那我们就换个用。
同样，让我们先分析一下这组颜色之间的关系，大致可以分为蓝色、绿色和粉色，绿色可以分为深绿色和浅绿色。
首先恢复图片的颜色，然后确定主要颜色，因为我想在这里呈现一种不同于以前案例的感觉，所以我们选择粉色作为主要颜色来填充背景，而不是蓝色，这样图片的感觉更女性化。
然后是文本。虽然我们不使用蓝色作为主色，但根据我们的风格定位，这幅画也需要蓝色，所以我们使用蓝色来填充文本。
最后还剩下两个绿色，这里我们用浅绿色来填充色块，为什么是浅绿色？因为我们必须考虑文本的识别，深绿色和蓝色的纯度和亮度相似，所以它们的对比效果会相对较弱。
白色作为一种很好的调和色，不需要调整。最终效果如何？这里也有调整空间。
首先，背景颜色有点深，所以我们减少背景颜色，颜色调整有点紫色，这种颜色的选择是指左下角的图片颜色，而不是无缘无故的。
然后看看这里的绿色，看起来有点脏，也就是灰色，所以我们也可以调整绿色，使它更亮，这不仅提高了文本的识别，而且更漂亮。
虽然文字的识别性有所提高，但也可以更好，所以加深蓝色，那么这个案例就在这里。
最后，让我们来看看这两个方案，无论是色调、气质、风格，还是美都符合我们的早期定位。但我相信有些人会有问题，不是教如何使用在线颜色匹配工具，如何最终成为人工调整？当然，这里不是为了让每个人都玩，因为颜色匹配确实是一个如此复杂的思考，反复调整过程，而不是简单的吸收，填充两个步骤，所以无论是颜色匹配工具，还是提供颜色匹配网站，最多只能作为我们的颜色匹配的参考，而不是作为我们所有的颜色匹配。
微信微信官方账号欢迎关注研究:「Yanxishe2017年」
