比較Divi 4和Divi 5的彩色選擇器

顏色會在讀取單個單詞之前設定音調，但是傳統的彩色選擇器使得很難實現真正的品牌一致性。您通常會獲得猜測和近似近似值，而不是精度。

這就是為什麼Divi 5完全重新構想其顏色系統的原因。在這篇文章中，我們將將其直接與Divi 4的彩色拾取器進行比較，並展示它變得更強大和靈活。

彩色選擇器比較

將它們並排放置，您會立即看到新界面的功能。 Divi 4的彩色選擇器以其熟悉的彩虹頻譜和拖放方式的方法為我們提供了很好的服務。

您會拖動白色圓圈來挑選顏色，使用十六進制代碼，並通過保存，全球和最近的標籤來組織物品。那些彩色色板上的白色三角形告訴您哪些是全球顏色。

除了外觀外，Divi 4的彩色選擇器還有一個良好的基礎。 Magic Color Tool非常聰明，從您的頁面顏色和最近的選擇中提取，以提出真正合作的調色板。這種節拍每次都會從頭開始。

Divi 4受到限制

但是，並非所有人都是完美的。一切都使用HEX或RGBA代碼。獲得藍色的更輕版本意味著猜測或使用另一個應用程序來弄清楚它。如果您的品牌通常比主要品牌顏色要深20％或40％的顏色，那麼Divi 4就無法為您做到這一點。

每種顏色都活著。您無法構建智能色彩系統，其中顏色在Divi本身內相互關聯。建立適當的對比度比Divi以外的手動工作。

Divi的5個視覺更改是什麼

Divi 5保留了視覺彩色選擇器，但增加了精確的滑塊，並提供了更多選項（我們將進一步討論）。全局選項卡演變為一個動態變量圖標，該圖標直接連接到Divi的變量系統，該系統包括顏色。

色板本身變得更聰明。它們實際上向您展示了您正在使用的顏色類型以及它如何連接到系統。

您看到的是Divi從單個顏色挑選到顏色系統。 Divi 4是為“我需要這種特定藍色的”而建造的。 Divi 5是為“我需要比原色輕20％的藍色，並且完全改變品牌顏色時會自動更新。”

界面必須更改，因為它的作用更改。

Divi 5的新彩色選擇器

我們的團隊重建了顏色系統，因為舊方法無法處理現代設計工作流程。這個新的採摘器圍繞色調，飽和度和輕度（HSL），相對顏色關係以及與Divi 5的可變系統的深入集成。

現在，您可以建立一個連接的顏色系列，而不是使用隔離的十六進制代碼，而改變一種顏色會自動更新所有相關的變體。有用於色調，飽和度，輕巧和不透明度的單獨滑塊，可讓您進行精確的調整。該界面通過視覺指示器準確顯示您正在使用的顏色類型。

顏色色板現在顯示有關自己的信息。您可以查看顏色是靜態值，變量還是具有HSL修改的相對顏色。該系統顯示您需要知道的所有顏色細節。

新系統如何工作

相對顏色從基本色變量開始，允許您應用變體。選擇主要的藍色變量，將輕度降低20％，然後將其作為“皇家深藍色”變量。

Divi 5的HSL彩色選擇器與Divi 4的彩色選擇器

這兩個系統都可以幫助您在網站上管理顏色，但以完全不同的方式工作。理解此差異解釋了為什麼界面必須如此巨大的變化以及為什麼新方法加快建築物的速度。

Divi 4的全球色彩如何工作

Divi 4的全球顏色像基本的調色板系統一樣工作。節省您的品牌一次，然後在需要確切的陰影時單擊它。後來，將那個藍色的藍色換成不同的藍色，並在整個網站上觀看每個按鈕，標題和背景更新。

大多數人以這種方式建立了三到四個主要品牌顏色。它可以通過十六進制代碼來狩獵或試圖記住您是否使用＃2E86C1或＃3498DB進行鏈接。

當您有八種全球顏色時，問題出現在後來，不記得為什麼您保存了特定的灰色陰影。是文字嗎？邊界？背景疊加？全球顏色沒有標籤或描述可以慢跑您的內存。

為什麼Divi 5移至設計變量

現在，設計變量不僅可以處理顏色。字體，間距，圖像和文本字符串都可以得到相同的處理。一切都生活在一個變量管理器中，而不是在不同的面板周圍漂浮。

每個變量都有專有名稱和描述。您可以稱其為“全球顏色3”，而是稱其為“標題文本灰色”或“微妙的背景覆蓋”。六個月後，您將確切知道它的用途。

但這是事情變得有趣的地方。變量可以互相引用並形成關係。將您的主要綠色作為基礎。創建一個“燃燒的苔蘚”，以綠色並降低其亮度。然後，建立一個“陰影（燒成苔蘚）”，將這種燃燒的苔蘚顏色帶入，並將不透明度降至15％。

而且，當然，如果將主要綠色更改為橙色，則所有三個變體都會自動更新。燃燒版本比您選擇的任何顏色都沒有明亮，陰影會相應地適應。關係堅持。

實踐的關鍵區別

全球顏色意味著在多個斑點中具有相同的顏色。變量意味著具有適應顏色關係的變量。懸停狀態保持與基本顏色的連接。陰影顏色與您的品牌調色板有關，而不是作為隨機灰色生活。該系統可以維護這些連接，而無需您進行額外的工作。

在Divi 4與Divi 5中設置您的顏色系統

創建適當的顏色系統可以確定您的網站看起來是專業的還是隨機選擇的拼布。這兩個Divi版本都提供了組織您的顏色的方法，但是它們的方法並沒有什麼不同。這是在每個版本中構建顏色系統的方法，以及為什麼該過程對您的設計工作流很重要：

在Divi 4中設置顏色

您的顏色選擇塑造了訪問者如何體驗您的網站。看看顏色管理分區4的方法：

1。添加您的全球顏色

Divi 4的顏色設置依賴於全球顏色系統和手動組織。您將首先導航到任何元素的顏色選項，然後通過導航到“全局”選項卡，單擊“顏色選擇器”旁邊的Plus圖標，或通過單擊它來編輯現有的全局顏色來創建全局顏色。該界面使您可以直接輸入十六進制代碼或使用Visual Picker選擇顏色。

您是否已經使用了要轉換的顏色？右鍵單擊它，然後選擇“轉換為全球”。這為您的全局調色板添加了精確的顏色，並切換模塊以使用全局版本。當您意識到應該從一開始就做一些全球性的事情時，這將非常有幫助。

魔術顏色建議

Divi 4的Magic Color功能從您現有的設計選擇中構建了協調的調色板。該工具沒有猜測哪種顏色共同起作用，而是根據您已經使用的內容創建建議。

在您的活躍顏色的眼培中尋找三個點（橢圓）。單擊這些點以獲取一堆調色板建議。 Divi查看了您在頁面上和最近項目中已經使用的顏色，並顯示了應該共同起作用的組合。

2。應用您的全球顏色

一旦設置了一些全球顏色，使用它們就非常簡單。單擊您要應用顏色的任何模塊。然後，前往“設計”選項卡並找到要更改的顏色設置。

單擊全局以查看您的全局調色板。單擊任何全局顏色色板，它立即適用於您的模塊。

3。修改您的全球顏色

這是事情變得有趣的地方。當您想更改全球顏色時，您無需瀏覽每個使用它的模塊。只需轉到任何顏色設置，單擊“全局”選項卡，然後找到要編輯的顏色。

在Divi 5中設置您的顏色

在Divi 5中構建適當的顏色系統需要四個步驟。按照這種方法，每當您需要稍微不同的陰影時，都會猜測顏色代碼的舊方法：

1。創建您的基本顏色變量

打開設計變量管理器，並將您的主要品牌顏色添加為現有的主要和次要顏色變量。您還可以添加更多顏色，例如第三紀或口音顏色。這些成為您的基礎顏色。您的基本顏色應代表您的主要品牌調色板，該品牌定義您的視覺標識。

2。從您的基礎建立相對顏色

現在，您可以創建鏈接到基本顏色的顏色變化。在設計變量管理器中添加新顏色，然後選擇您的基本顏色。

使用HSL滑塊對其進行調整：標題文本降低輕度25％，體文文本為20％；對於懸停狀態，將輕度提高20％，或改變靜態背景的飽和度。給出這些變化的清晰名稱，例如“深橙色”和“明亮的深紅色”，或“懸停狀態（原色）”，“靜音背景（次要顏色）”。

所有設計變量都可以堆疊，因此您可以從創建的變量中構建更多顏色。它們都與系統保持聯繫。

如果以後更改基本顏色，這些相關顏色會自動更新，以保持關係完整。

3。將變量應用於您的元素

使用任何顏色字段中的動態內容圖標來訪問您的變量。該界面顯示每種顏色是靜態的，變量還是具有HSL修飾的相對顏色。

從您有組織的顏色系統中挑選，而不是創建破壞一致性的隨機一次性顏色。

當您更改任何基本或構造顏色的屬性時，從這些顏色中繼承的一切都會自動適應新的更改。當您決定品牌刷新時，無需手動擦洗和更換顏色。

4。構建預設，參考HSL顏色變量

使用選項組預設為特定設計零件製定策略。這些預設與元素預設不同。選項組使用您的變量預設目標樣式組，例如背景，邊框或文本顏色。

使用基於主顏色的陰影顏色變量將陰影作為選項組預設。

在列，部分，行和模塊上使用此預設。

為不同的顏色創建單獨的選項組預設：一種帶有重音顏色的邊界，另一個用於輔助顏色的文本等。將這些預設跨元素混合而不更改其他樣式。

元素預設保存完整的模塊設置，包括內容和所有樣式。在選項組預設和所使用的顏色變量中製作元素預設。立即應用它可以給您完全相同的按鈕。

5。在您的網站上推出顏色

擴展屬性功能通過讓您在元素之間複製設計屬性來進一步。當您使用變量完善圖標的配色方案時，可以將這些屬性擴展到行，頁面或整個站點之間的其他圖標。

這可以保持您的顏色關係，同時在沒有手動工作的情況下散佈一致的樣式。

Divi 5的查找和替換功能速度加快了帶有靜態顏色的現有站點的轉換過程。右鍵單擊任何顏色字段，然後選擇“查找和替換”。

將範圍設置為針對特定元素，整個部分或整個頁面。在“替換為”下，從“全局”選項卡中選擇新變量。檢查“替換所有找到的值”，以將該顏色的每個實例與您的變量交換。

當將較舊的設計遷移到新的顏色系統時，這可以很好地工作。您可以用一個一致的變量在幾秒鐘內替換數十個相似但不相同的橙色。

所有方面都可以一起工作：建立您的顏色變量，使用查找並替換以清理現有的不一致之處，然後在構建新部分時使用擴展屬性來維護設計標準。然後，正常構建頁面，因為可以使用選項組和元素預設輕鬆應用樣式。

新的彩色選擇器將適合您的工作流程

Divi 5的顏色系統解決了多年來項目減慢項目的工作流問題。您不再需要使用外部工具來找到正確的陰影。 HSL滑塊可以為您提供精確的控制，而不會離開建造者。

您的顏色決策通過設計變量保持聯繫。當您更改主要品牌顏色時，相關顏色在保持關係的同時會自動更新。這可以手動追捕您創建的所有藍色變化。

立即在Divi 5中嘗試新的顏色系統！