為網(wǎng)站設(shè)計(jì)找到一套完美的色彩組合是一項(xiàng)具有挑戰(zhàn)性的任務(wù)，尤其是當(dāng)你試圖使某個(gè)特定的設(shè)計(jì)符合客戶的要求時(shí)。今天，我們挑選和整理了一些很棒的配色方案生成工具，希望可以幫助你輕松地創(chuàng)建完美的調(diào)色板！

如果你想為一個(gè)網(wǎng)站設(shè)計(jì)找到完美的配色方案，不要感覺無所適從，就算你并不是一個(gè)專業(yè)的配色專家，借助合適的工具，你同樣也可以完美的完成你的工作。

但是，在你使用顏色工具之前，讓我們弄清楚在設(shè)計(jì)中使用合適的顏色組合時(shí)需要考慮的一些事情。

1.選擇配色方案的重要性

為網(wǎng)站設(shè)計(jì)或其他任何類型的設(shè)計(jì)選擇顏色方案決不應(yīng)隨意進(jìn)行，你應(yīng)該密切注意找到適合行業(yè)、文化、品牌和企業(yè)或其代表的想法的合適的顏色。

無論如何，我都認(rèn)為你一定不希望自己的網(wǎng)站時(shí)這樣的：



你能相信以上的這個(gè)案例實(shí)際上是一個(gè)防自殺熱線的網(wǎng)站嗎？顯然，任何訪問這樣一個(gè)網(wǎng)站的人，只要看一下這個(gè)設(shè)計(jì)，可能會感到更加沮喪。

即便你的設(shè)計(jì)并沒有那么糟糕，你也需要一個(gè)外部的視角來真正地了解你在網(wǎng)站設(shè)計(jì)選擇顏色時(shí)所犯的錯(cuò)誤。

例如，你知道顏色對人的情感有很強(qiáng)的影響嗎？

2.色彩心理學(xué)

色彩心理學(xué)是解釋某些顏色如何影響我們的情緒或說服人們采取行動的理論。

根據(jù)研究，人們在看產(chǎn)品的頭90秒鐘內(nèi)會對產(chǎn)品做出下意識的決定，其中90%的判斷是基于顏色的。

你是否有注意到為什么那些“待售”或“促銷”的標(biāo)志在商店里總是紅色的？這是因?yàn)榧t色是少數(shù)能立即引起人們注意的顏色之一。

為什么與環(huán)境有關(guān)的組織和房地產(chǎn)企業(yè)在他們的品牌中使用綠色？當(dāng)然，這并不是因?yàn)榍嗖莺蜆淠镜念伾＿@是因?yàn)榫G色代表著成長、財(cái)富、和平和健康。

了解色彩心理學(xué)將對你網(wǎng)站設(shè)計(jì)的成功起到重要作用。因此，在選擇配色方案時(shí)，學(xué)習(xí)如何使用它。

3.選擇完美配色方案的秘訣

在為設(shè)計(jì)選擇合適的顏色組合時(shí)，還有許多其他的事情需要記住。就像選擇一種持久的配色方案，而不是盲目地追隨潮流。

在選擇配色方案時(shí)，要記住以下幾點(diǎn)：

· 考慮到色盲，使設(shè)計(jì)更加友好

在設(shè)計(jì)中使用顏色時(shí)，設(shè)計(jì)師幾乎總是忘記考慮現(xiàn)實(shí)中存在色盲這一情況，而且常常忽略了它對企業(yè)概念的影響。

當(dāng)馬克·扎克伯格設(shè)計(jì)FaceBook時(shí)，他選擇使用藍(lán)色作為用戶界面的主要顏色，因?yàn)檫@是他眼睛所能看到的最豐富的顏色，馬克·扎克伯格是色盲。

不要因?yàn)槎鄶?shù)人就忽略了那些少數(shù)，你要讓你的設(shè)計(jì)適合所有人。

· 想想你的受眾

一個(gè)很受歡迎的網(wǎng)站使用了一個(gè)足夠吸引人的色彩組合并不意味著你就可以直接使用它在你的設(shè)計(jì)中，你需要考慮你的受眾。

如果你的網(wǎng)站目標(biāo)偏向于國際群體，你應(yīng)該試著去適應(yīng)代表不同的文化和種族的顏色。例如，在西方國家，黑色代表奢華和大膽。在印度文化中，同樣的顏色代表邪惡、消極和缺乏活力。

· 尋找代表品牌的顏色

最后，設(shè)計(jì)的主要目標(biāo)應(yīng)該是將你的品牌或商業(yè)信息傳達(dá)給訪問者。所以，選擇你的顏色來幫助達(dá)到這個(gè)目標(biāo)，使用品牌色和色彩心理學(xué)來達(dá)到這一目的。

現(xiàn)在，正如上面說提到的，這里有一些很好的工具可以用來為你的網(wǎng)站設(shè)計(jì)選擇合適的配色方案。

1.）Adobe Color CC



適用于：更專業(yè)的用戶

這是許多專業(yè)人員使用的工具。自從Adobe公司開發(fā)完成這一軟件后，Color CC就配備了高品質(zhì)的選項(xiàng)和功能，可以使用其來生成一個(gè)合適的色彩方案。

而且，它還涉及到很多更高級的定制和顏色選擇，如單色，混合色等，這使得它更適合于更專業(yè)的設(shè)計(jì)師。

2.）Coolors




適用于：初學(xué)者

Coolors是一個(gè)可以快速生成調(diào)色板的應(yīng)用，你可以使用它來即時(shí)創(chuàng)建一個(gè)你想要的配色方案為你的網(wǎng)頁設(shè)計(jì)。

你可以使用該工具輕松的創(chuàng)建漂亮的顏色組合，而無需任何經(jīng)驗(yàn)。或者你可以探索和借鑒其他設(shè)計(jì)師創(chuàng)建的配色方案，為自己的項(xiàng)目“復(fù)制”他們的調(diào)色板。

3.）Colormind




適用于：網(wǎng)站以及UI設(shè)計(jì)師

Colormind可以從普通的配色方案中，“提煉”出更高層次的超越基礎(chǔ)調(diào)色板顏色的配色方案。

在隨機(jī)或手動生成顏色方案之后，該工具可以幫助你了解調(diào)色板中的每個(gè)顏色，同時(shí)建議在陰影、高光和背景中使用哪種顏色。它還將讓你看到顏色如何與某些UI組件匹配，如按鈕和選項(xiàng)卡。

對于網(wǎng)站設(shè)計(jì)者和用戶界面設(shè)計(jì)者來說，這是一個(gè)很好的工具。

4.）Material Color Tool




適用于：UI設(shè)計(jì)師

這是一個(gè)專門為用戶界面設(shè)計(jì)者尋找配色方案的工具。但是你也可以用它來為你的網(wǎng)站應(yīng)用程序或者網(wǎng)頁設(shè)計(jì)創(chuàng)建一個(gè)材質(zhì)類的調(diào)色板。

這個(gè)配色方案生成器有一個(gè)很直觀的預(yù)覽模式，可以讓你直接看看你選擇的顏色在實(shí)際設(shè)計(jì)中會是什么樣子。這將節(jié)省你的時(shí)間。

5.）Color Safe




適用于：初學(xué)者

Color Safe是一個(gè)有趣的工具，可以幫助你創(chuàng)建一個(gè)與符合WCAG指導(dǎo)色的配色方案。

這是可以生成設(shè)計(jì)師要遵循的保持前景色和背景色在4.5:1對比度規(guī)則的配色方案的一個(gè)重要工具（AA級）。生成器將幫助你找到滿足這些指導(dǎo)方針的完美顏色。

6.）Paletton




適用于：更專業(yè)的用戶

paletton是一個(gè)高級的顏色調(diào)色板，配有一套定制化的功能選項(xiàng)，是富有經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)師最理想的工具之一。

該工具可以定制和查看單色，相鄰色等等。一旦你選擇了一個(gè)配色方案，你也可以運(yùn)行一個(gè)模擬，看看顏色如何在不同的屏幕環(huán)境下以及不同的屏幕條件下看起來的實(shí)際效果。

7.）Colordot




適用于：初學(xué)者

這個(gè)簡單易用的配色方案生成器可以完美的幫助網(wǎng)頁設(shè)計(jì)師立即生成一個(gè)他們需要的配色方案而不需要太多的技巧。

在最開始，你所要做的只是在屏幕上移動你的鼠標(biāo)，找到你喜歡的顏色，然后左鍵單擊選擇那個(gè)顏色。你可以一直點(diǎn)擊，直到你選擇你想要的顏色。

8.）Colourcode




適用于：初學(xué)者

Colourcode是另一個(gè)快速選擇配色方案的簡單工具。它可以像Colordot一樣進(jìn)行簡單的操作。

然而，Colourcode的定制功能更加高級一些，它允許設(shè)計(jì)人員嘗試不同的組合。

一旦你選擇你的配色方案，你還可以下載配色板以.scss或.less的格式，甚至是一個(gè)PNG文件。

9.）Palettr




適用于：初學(xué)者

Palettr不同于其他配色方案生成器。這個(gè)工具不是手動拾取顏色，而是根據(jù)主題或地點(diǎn)生成顏色方案，如紐約、巴黎、羅馬或冬季和夏季。

10.）Material Design Palette




適用于：初學(xué)者

如果你打算制作一個(gè)網(wǎng)站或一個(gè)基于Material Design的應(yīng)用程序設(shè)計(jì)，這個(gè)調(diào)色板生成器將很方便。

一旦你選擇了兩種顏色作為主要的和次要的色調(diào)，Material Design將給你一個(gè)真實(shí)的顏色效果以現(xiàn)實(shí)生活中的外觀預(yù)覽。然后，你可以下載調(diào)色板以CSS, SVG, SASS, LESS, PNG或更多的格式文件。