將客戶的品牌顏色變成Divi 5顏色系統

品牌顏色通常始於跨標題，按鈕和背景的十六進制代碼。最初，它足夠簡單，但是隨著佈局的增長，您通常需要較淺的顏色變化，懸停狀態或互補的口音。手動管理這可能會變得凌亂。

Divi 5中的新顏色系統通過讓您一次定義一個調色板並從初始調色板構建連接的陰影來更容易。即使設計演變，每種顏色都保持同步。在本指南中，您將學習如何創建靈活的可擴展顏色系統，以使客戶網站上的所有內容保持一致。

了解Divi 5的顏色系統

如果您在Divi 4中使用了全球顏色，那麼您已經知道定義一次顏色並在您的網站上應用它有多麼有用。 Divi 5建立在相同的想法上，但是這次，它將顏色變成了與您縮放的完整系統。

訂閱我們的YouTube頻道

這是三個主要升級：

它從設計變量開始。您在變量管理器中的“顏色”選項卡中定義了品牌調色板，這些值將成為您的基礎。定義後，它們可以在任何模塊或部分中使用。而且，當品牌向下發展時，您只需要在一個地方更新變量即可。與它們相關的一切都可以自行調整。

第二個升級是HSL顏色過濾器。滑塊允許您調整色調，飽和度和輕度，從而在使用音調和對比度時可以控制更多。

如果您的主要綠色對背景來說太苛刻了，則可以稍微軟化它，調整亮度，並將該版本保存為其變量。這將是一種全新的顏色，但仍然與原始顏色相關。

這也打開了在關係中思考的空間，而不是孤立的價值觀。您可以將變量鏈接在一起，以便一個人始終保持與另一個距離的一定距離，例如較暗，更輕，稍溫暖或更柔和。這些稱為相對顏色，這是第三個改進。

例如，懸停的顏色可以定義為比初級顏色要暗20％。如果主要顏色發生變化，則懸停狀態會保持其關係而無需手動調整。

這個三部分的系統創建了一個靈活且紮根的顏色系統。您不僅一次應用一個模塊；您正在建造一個調色板，可以根據需要進行移動，同時保持設計一致和清潔。

了解有關Divi新顏色系統的所有信息

如果您一直依靠十六進制代碼，那麼這就是工作流程開始受到限制的地步。這就是您轉移到未來準備就緒的顏色系統的提示。

將客戶的品牌顏色變成Divi 5顏色系統

現在您知道了Divi 5的顏色系統的工作原理，讓我們瀏覽一個真實項目中的外觀。在此示例中，我們從Divi庫中導入了增強現實主頁佈局。

讓我們構建一個場景。假設客戶想添加互補的顏色，以平衡整個網站中使用的大膽綠色。與其在幾個斑點中手動添加它，而是將其作為將佈局轉移到Divi 5的顏色系統的機會，因此如果再次詢問，我們將來不必在將來進行手動更改。

如果您瀏覽佈局，您會注意到在幾個地方出現相同的綠色，例如標題，按鈕和口音元素。每個都使用固定的十六進制代碼。我們的目標是用顏色變量替換那些，並構建一個調色板，以稍後可以適應更改。

通常，更新這樣的佈局將意味著手工編輯每個模塊。但是在接下來的幾個步驟中，我們將使用顏色變量，HSL過濾器和連接的顏色邏輯來構建更穩定的東西。您可以遵循相同的佈局或將項目用作基礎。

1。保存客戶的主要顏色作為設計變量

如果您的客戶已經共享了新的十六進制代碼，或者您堅持使用現有的品牌顏色，則第一步是將其添加到Design變量管理器中。這將成為您的基本顏色，並將成為您周圍構建的顏色變化的基礎。

添加原色

首先，打開變量管理器，然後切換到顏色選項卡。

該面板可能已經包括主要，次要，標題和正文文本的默認值。在主要顏色字段中，輸入主要品牌顏色的十六進制代碼，然後單擊“保存變量”。

添加次要顏色

接下來，我們將使用主要的基礎創建此輔助顏色的相對版本。這樣，基本顏色的任何未來變化都會自動延續。

在此示例中，由於我們正在添加互補的顏色來平衡現有的綠色，因此我們將其分配為輔助顏色。佈局的背景是黑色的，因此此配對清晰脫穎而出。

如果您目前僅使用一種顏色，請隨時將輔助插槽設置為黑色。

單擊輔助色板打開顏色窗口。您所有保存的值將在全球顏色下列出，首先列出了主要顏色。

選擇它。這將基本顏色作為您的起點。

現在，再次單擊“色板”以重新打開窗口，然後打開顏色過濾器下拉菜單。這揭示了HSL滑塊，您可以在其中調整色調，飽和度和輕度。

使用這些滑塊來塑造新顏色。一旦您滿意，請保存。就像這樣，您有一個輔助顏色連接到初級顏色。

如果您想將次要顏色保持黑色，但仍將其鏈接到主顏色，請將輕度和飽和度均勻滑動至-100。

要創建一個較暗的陰影，請將色調和飽和度保持原樣，並僅降低輕度。

在這一點上，您可以自由實驗。調整值，直到音調適合您的設計。無論是新顏色與品牌調色板柔和融合還是作為對比的脫穎而出，它都將與初級鏈接並隨之發展。

2。使用HSL調整構建支持顏色

有了您的主要和次要顏色，下一步是擴展調色板。這些輔助顏色為您的設計空間提供了呼吸的空間。在整個佈局中，它們增加了靈活性，微妙的對比度和視覺節奏。

要創建這些變化，請打開HSL面板並調整滑塊：

• 為需要對比的部分或背景創建較淺的陰影，而不會引起人們的注意。
• 在需要脫穎而出的按鈕，懸停狀態或大膽的頭條新聞中，使用稍微暗的音調。
• 將色調或飽和度稍微移動以形成重音顏色。這種顏色非常適合分隔線，圖標或其他小型視覺亮點。

我們將向您展示如何做一次，您可以遵循相同的方法來定義所需的所有新顏色。假設我們想製作懸停版本的次要顏色。我們將創建一個新的顏色變量，給它一個清晰的名稱，調整滑塊以使音調正確並保存。

現在保存了變量，我們可以像其他任何顏色一樣將其應用於按鈕的懸停狀態。

當您添加支持顏色時，嘗試將它們視為品牌的音調表達，反映了不同級別的重點，對比度或情緒的變化。例如，柔和的音調適合背景，大膽的聲音引起人們對呼喚的注意，而柔和的音調對於疊加或次要文本很有用。

從技術上講，您可以使用十六進制代碼手動創建所有這些。而且，如果您只是建立一個一頁的網站，那就可以了。但是，當您的客戶想改變核心顏色時，每個快捷方式都會開始顯示其限制。我們的意思是，您不會跟踪網站上使用背景陰影的地方。在這種情況下，將這些變體構建為連接變量需要更多的時間，但是一旦它們到位，無論發生多久的情況，它們都會保持您的設計一致。

3。用變量替換現有的靜態顏色

保存了新的顏色變量，是時候替換整個佈局中使用的硬編碼的十六進制值了。在這裡，從靜態到動態的移動開始產生真正的差異，不僅是一致性，而且在隨著時間的推移保持設計變得多麼容易。

首先，掃描了仍使用固定顏色值的任何元素的佈局。這可能包括按鈕，標題，背景，圖標或部分分隔線。現在，手動應用品牌顏色的任何地方都是將其連接到新系統的機會。

為此，Divi為您提供了兩個選擇：擴展屬性並查找和替換。兩者都讓您快速更新多個元素，但是每個元素都在略有不同的情況下發光。

• 當您已經將正確的變量應用於一個元素並希望匹配其餘部分時，請使用擴展屬性。
• 當您想在出現的任何位置交換特定的十六進制值時，即使在不同元素上應用，都可以使用查找並替換。

讓我們從擴展屬性開始。

使用擴展屬性

在此示例中，我們希望將新的輔助顏色分配給佈局中的所有H2S。我們將首先將其應用於其中之一。

完成此操作後，我們將右鍵單擊元素並選擇擴展屬性。在出現的面板中，我們將將範圍設置為整個頁面，將元素類型設置為文本。

一鍵單擊，頁面上的每個H2都會採用相同的輔助顏色，這將保持同步，因為如果該基本顏色變化，則與您的主顏色綁定。

使用查找並替換

現在，讓我們嘗試查找和替換，當您想在整個網站上交換特定的顏色值時，它特別有效。

在這種情況下，我們想更新身體文本顏色。為此，我們將轉到“設置”>“設計”>“身體文本顏色” ，右鍵單擊，然後選擇查找和替換。然後，我們將懸停在替換值字段上，然後選擇我們的新變量。

這就是全部。現在，使用您的新變量更新該舊顏色的每個實例。

您無需在這裡遵循單一的方法。擴展屬性是您已經手動更新一個模塊的速度更快的方法。如果您仍在使用靜態十六進制代碼並想批量更改它們，請查找和更換將有助於您快速移動。

選擇哪種方法使清理更容易。完成此操作後，您將看到該系統的真正好處：當您只需更改一種顏色時，設計的響應方式。

測試您的新配色方案

您所做的一切都與設置有關。現在是整個設置開始顯示其值的時候。

使用您的系統，請嘗試更改主要顏色。整個佈局將在幾秒鐘內做出響應 - 背景，按鈕，懸停效果，任何其他連接的元素都會立即更新。

未來的更新也比以往任何時候都容易。假設您的客戶想從霓虹燈綠色轉移到較溫暖的黃色，這意味著要更新整個網站，每個頁面以及每個模塊。

聽起來很痛苦，但不適合您。您只需更新主顏色，然後即將進行網站的其餘部分。

也許是黑色星期五，他們要求採用紅色 - 黑色配色方案。您可以將初選更新為金色，然後將次級調整為更深的紅色。佈局立即適應了最後一個細節。

在某些情況下，品牌顏色可能保持不變，但是次要需要刷新。這只是調整HSL滑塊的問題。無需單獨觸摸每個按鈕或背景。

這麼多的色彩工作是維持平衡。即使核心顏色變化，您也可以保持變化對齊。該系統為您提供了一種控制音調，對比度和重點的方法，而無需追溯您的步驟。

請記住，我們在這裡所做的只是一頁。由於設計變量是全局的，因此此設置擴展到您的整個網站，包括標題，頁腳，博客文章，著陸頁以及與您的調色板連接的任何其他內容。

這意味著將來的每個更新，無論是季節性活動，品牌刷新還是新的色彩方向，都從一個地方開始。您可以更新一些變量，並觀看所有內容與您的新配色方案匹配。

Divi使您的顏色工作流程未來

選擇藍色陰影並不難。很難使藍色在數十個模塊，佈局，頁面和廣告系列中保持一致，並以後對其進行更新，而不會在此過程中破壞某些內容。

Divi 5完全簡化了這一點。借助新顏色系統，HSL過濾器和設計變量之類的工具，您可以從一個地方管理整個視覺標識。 Divi 5的承諾知道，知道每種顏色都將保持一致且易於更新。

這只是我們過去幾個月來製作的眾多產品之一，包括循環構建器，Flexbox佈局以及現代網絡設計師的完全重新構想的界面。如果您還沒有探索它們，那麼現在是完美的時光。