如何將調色板應用於您的 Divi 網站（20 個示例！）
已發表: 2017-08-10在今天的 Divi 教程中，我們將分享一些令人驚嘆的調色板，您可以在使用 Divi 構建的下一個網站上使用它們。 為您的網站使用正確的顏色是決定您的網站整體外觀和感覺的主要因素之一。
除了與您分享一些令人驚嘆的調色板之外，我們還將向您展示將這些調色板添加到您的網站的可靠方法。 如有疑問，您可以隨時遵循這些基本步驟，以幫助您創造美麗的結果。
一般提示
1.決定使用深色或淺色網站
在您將使用的調色板中，您無疑將擁有淺色和深色。 調色板中的對比度是強制性的，因此書面內容不會丟失。
現在，這讓我們立即想到了在您的網站上應用調色板時必須問自己的第一個問題； 你想創建一個深色或淺色的網站嗎？ 僅僅因為您選擇了一個並不意味著您不能將它們組合起來，但是做出選擇可以幫助您更輕鬆地選擇您的調色板。
2. 顏色選擇
理論上，您可以自行確定您希望調色板具有多少種顏色。 沒有應用或確定調色板的標準方法。 但是，要在 Divi 中創建良好的顏色平衡，我們建議使用五種顏色。
為了幫助您將具有五種顏色的調色板應用於您的網站，我們選擇了一種方法，在展示不同的調色板時，我們將始終將其應用於相同的佈局。 但在我們深入研究之前，如果您想遵循我們的方法，讓我們看看您的調色板中需要具有的不同類型的顏色。
2 種背景顏色
確保您選擇的背景顏色相互匹配。 您將使用這些彼此接近的背景顏色並獲得漂亮的效果； 他們必須有某種和諧。
1 字體顏色
您需要選擇的下一件事是字體顏色。 從邏輯上講，字體顏色取決於您選擇的背景顏色。 如果您選擇了淺色背景顏色，請確保您的字體顏色為深色，反之亦然。
1 超鏈接和 CTA 顏色
您選擇的超鏈接顏色是使您的網站栩栩如生的顏色之一。 確保此顏色與調色板中的其他顏色不同，因為您將使用它來調用您網站上包含的號召性用語。
最後潤色的 1 種顏色
最後但並非最不重要的一點是，您可以選擇另一種開箱即用的顏色，為您的網站帶來色彩。 儘管此顏色不如超鏈接顏色重要，但它會幫助您完成網站上的色彩平衡。
3. 確保有足夠的對比度
正如先前所說; 在您的調色板中提供某些顏色之間的對比是必不可少的。 如果您為網站使用調色板，這種對比將主要幫助您使您共享的書面內容具有可讀性。 因為; 如果您的內容不易閱讀； 它的目的到底是什麼？
4. 找到合適的色彩使用平衡
有多種方法可以確定您希望在調色板中使用特定顏色的頻率。 如果您不想讓他們對您在網站上使用的顏色感到不知所措，那麼創建良好的色彩平衡是必要的。
確保大部分時間在調色板中使用更中性的顏色，並使用其他顏色來突出您提供的內容。
演練：將調色板添加到您的網站
在本文的下一部分中，我們將引導您將調色板應用到您的網站。 我們將處理將顏色添加到網站佈局時所採取的不同步驟。 在本演練之後，您將進入我們共享調色板的部分。 我們不僅共享了顏色，而且還在 Divi 佈局中使用了它們，以將演練付諸實踐。
不用多說，讓我們來看看這個過程的不同步驟。
1. 決定如何添加顏色
您可以通過兩種方式添加調色板：
- 逐節添加所有顏色
- 按顏色完成您的網站顏色
儘管您可能會將這兩種方法相互混合，但我們建議您首先通過顏色來完成您的網站。 這樣，您就不必連續複製和粘貼不同的顏色代碼。 您複製每種顏色一次，然後繼續複製另一種顏色。
2. 添加背景顏色
一旦決定瞭如何插入顏色，就可以從背景顏色開始。 從背景顏色開始是一個好主意的原因之一是因為您會立即看到結果。 您正在為您在網站上使用的顏色奠定基礎。
如果您選擇創建淺色網站； 首先將最亮的顏色添加到第二部分的背景中，然後在第三部分中添加第二亮的顏色。
3. 添加文字顏色
為網站添加背景顏色後，您可以開始向網站添加文本顏色。 您網站上的所有書面內容都需要具有這種顏色（除了超鏈接和號召性用語）。
4. 為您的網站添加超鏈接和 CTA 顏色
接下來，您可以做的是使您網站上的超鏈接和號召性用語脫穎而出。 它們會引起人們的注意，並使他們好奇鏈接或號召性用語是關於什麼的。
確保您網站上所有可點擊的內容都包含這種顏色。 通過保持這種一致性，您的訪問者將輕鬆識別他們可以點擊的位置以繼續留在您的網站上。
5. 添加最終觸感顏色
您需要做的最後一件事是為網站添加最後的觸感顏色。 在我們製作的示例和調色板中，我們在三個地方使用了這種最終觸感顏色：模糊圓圈顏色、人物模塊的標題文本和主菜單欄。
雖然最後的觸感顏色不是您將在網站上使用的主要顏色，但它可以讓您帶來網站所需的額外顏色。 畢竟，您不希望您的網站看起來單調或令人討厭。
調色板
現在我們已經分析了將調色板應用到您的網站所需的步驟，是時候開始探索一些令人驚嘆的調色板了。 除了向您展示我們製作的示例佈局的結果之外，我們還將分享我們用來達到該結果的顏色代碼。
1. 幾天的瓷磚
我們選擇的第一個調色板主要包含較柔和（略帶柔和）的顏色。 由於我們選擇了一個淺色網站，調色板中較淺的顏色佔據了網站的大部分。 但是，我們調色板中較深的顏色可確保網站包含所需的色彩平衡。
本示例中使用的顏色如下（從左到右）：
- #EBE8E2
- #768A95
- #B98077
- #007193
- #E2D7D7
2.沙漠
列表中的下一個調色板稱為沙漠。 此調色板的色彩平衡略微傾向於深色網站。 在這個例子中占主導地位的顏色是藍色。 但是還有一種非常淺的文本顏色，可以確保所需的對比度存在。
此調色板中使用的顏色如下（從左到右）：
- #507782
- #7C8E93
- #D89C79
- #443F3C
- #FFE8D8
3. 節日
下一個調色板不是您經常會看到的調色板。 這些顏色通常不會出現在同一個調色板中，但它們非常有趣。 如果您希望您的網站看起來獨一無二，那麼這個調色板就是您要走的路。
此調色板中使用的顏色是（從左到右）：
- #E6EBD1
- #A59E4C
- #544C4D
- #AF3D4B
- #CED3BC
4. 小指承諾
如果您想製作深色網站，該行中的下一個調色板是一個很好的選擇。 眾所周知，黑色色調和粉紅色色調是一個很好的組合。 它們為網站增添了俏皮的額外觸感，同時又不會顯得過於女性化。 黑色陰影確保您網站的外觀和感覺仍然包含所需的深度。
此調色板中使用的顏色是（從左到右）：
- #33383A
- #ECC9C8
- #E2566D
- #4F575A
- #D3D8DA
5. 聖托里尼
在下一個調色板中，您可以清楚地註意到藍色在其他顏色中占主導地位。 使用此調色板，您會立即獲得輕鬆和積極的感覺。 眾所周知，藍色是人們在建立網站時喜歡的顏色之一。 這是一種體現專業精神的標準顏色。 然而，這個調色板中使用的藍色陰影也顯示出俏皮的一面。
我們在這個例子中使用的調色板是（從左到右）：
- #1198EA
- #0A5785
- #A85A4D
- #F1F5FA
- #C5DFF8
6.紫悅
這個調色板中的主導顏色顯然是紫色。 儘管它通常被認為是一種令人沮喪的顏色，但這種調色板及其在網站上的使用卻有所不同。 當它與更亮的顏色相結合時，紫色可以提供令人驚嘆的效果。
此調色板中使用的顏色如下：
- #D7D7ED
- #52517B
- #737172
- #FCFCFC
- #F0F1A
7. 微妙
我們要分享的下一個調色板非常中性，與節日調色板的風格相同。 你也不會經常看到，但它看起來很乾淨。
本例中使用的顏色是（從左到右）：
- #DAE2D5
- #4B7263
- #A8A461
- #494949
- #中交建
8. 企業
我們要分享的下一個調色板非常適合各種商業網站。 正在使用的顏色反映了一定的積極性和青春。 淺色背景使黃色和綠松石色為網站帶來附加值。
此調色板中使用的顏色是（從左到右）：
- #181242
- #4ABDAC
- #DBDBDB
- #F7B733
- #FCFCFC
9. 玫瑰
誰不喜歡玫瑰色？ 下一個調色板為您的網站帶來了女性化的因素。 淺色在網站上占主導地位，但它們也確保了深色也能被賦予權力。
此調色板中使用的顏色是（從左到右）：
- #152038
- #DDA199
- #FF614C
- #F5F5F5
- #E2E2E2
10. 巧克力
我們要放在聚光燈下的下一個調色板是巧克力色。 這個調色板的好處是背景顏色和文本顏色屬於同一顏色類別。 這為其他兩種顏色提供了與這些顏色區分開來並引起注意的空間。
此調色板中使用的顏色是（從左到右）：
- #FFF4E8
- #FFE2C4
- #822317
- #935B3B
- #346E70
11. 精緻
下一種顏色組合是您一見鍾情的東西。 紫色和黃綠色並不經常一起使用，但正如您在結果中看到的那樣； 他們很匹配。 為了保持對這兩種顏色的關注，背景顏色和文本顏色相當中性。
此調色板中使用的顏色是（從左到右）：
- #88D317
- #4F2649
- #FCFCFC
- #EFEFEF
- #080816
12. 奧利維亞
奧利維亞是一個不需要太多解釋的調色板。 橄欖色和黃色的顏色結合得非常好。 保持較淺的顏色更中性可以讓這些顏色搶占風頭。
此調色板中使用的顏色是（從左到右）：
- #778E3B
- #FFD902
- #132819
- #EFEFEF
- #FCFCFC
13. 金門
柔和的米色可以讓您的網站反映出一種排他性。 雖然調色板看起來很清醒，但這個調色板中的紫色綠松石色設法帶來了網站所需的溫暖。
此調色板中使用的顏色是（從左到右）：
- #373737
- #F3F4E8
- #ADA075
- #EDE4C9
- #A685BC
14.船長
這個調色板可能是列表中最專業的調色板。 這個調色板中的兩種深藍色是主要原因。 然而，紅色在打破僵局和為網站增加一些多樣性方面做得很好。
這篇文章中使用的顏色是（從左到右）：
- #3B578E
- #DB2323
- #D7DEED
- #F7F9FF
- #201C44
15. 環保
我們要分享的下一個調色板是環境。 這個名字表明綠色在這個調色板中占主導地位。 這些柔和的綠色與此調色板中提供的柔和的綠松石色完美契合。
此調色板中的顏色是（從左到右）：
- #C2D3DO
- #56776A
- #42B7A7
- #EDF4
- #26423E
16.軟豐富
在下一個調色板中，我們可以清楚地看到米色和紅色的完美組合。 他們給任何類型的網站一種成熟感。 通過添加另一種引人注目的綠色，您網站的外觀和感覺也會有一些年輕化。
此調色板中的顏色是（從左到右）：
- #984B43
- #233237
- #B7A97C
- #F9F0D4
- #527C40
17. 迷人
行中的下一個調色板是另一個深色網站。 主要顏色是深紫色和灰色。 然而，較淺的顏色設法給網站帶來了一些溫暖。
此調色板中的顏色是（從左到右）：
- #D0B6D6
- #3CC203D
- #898989
- #F2F2F2
- #F9AEBD
18. 薄荷
薄荷色調為您的網站帶來新鮮感。 雖然乍一看非常清醒，但橙色和紫色確實給網站帶來了新鮮和重生的感覺。
此調色板中使用的顏色是（從左到右）：
- #31190A
- #B4BCA7
- #F99A53
- #54468E
- #E3EDE5
19. 柔和的黃色
這種獨特的調色板主要包含暖色。 雖然我們有深色和淺色作為背景色，但整體感覺更傾向於淺色網站。
此調色板中的顏色是（從左到右）：
- #DDCF30
- #437468
- #F1FFD1
- #4A4C49
- #FCFAD9
20. 神秘
該行中的最後一個調色板是另一個可用於您的網站的深色調色板。 這個調色板中使用的背景顏色是清醒的，並允許調色板中的其他更亮的顏色出現。
此調色板中的顏色是：
- #131517
- #13828A
- #35363A
- #EEF5F7
- #AF8300
最後的想法
在這篇文章中，我們分享了一些關於如何將您選擇的調色板應用到您的網站的技巧。 除此之外，我們還向您展示了 20 種漂亮的調色板，可以幫助您為您的網站帶來優雅。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。
當你在那裡時，讓我們知道； 你最喜歡這些調色板中的哪一個？
特色圖片由 EDGOR_21/shutterstock.com 提供