了解網絡設計中的相對顏色

在Web設計中，即使最簡單的決策也可以乘。從單個設計選擇開始的開始，很快就會擴展到數十種視覺變化，以進行交互，背景，邊界等。您的構建可能會被不匹配的值和手動調整而沒有一致的系統變得混亂。

CSS中的相對顏色語法提供了更智能，更可擴展的方法。它使您可以根據單個源來定義視覺變化，從而保持設計具有凝聚力和易於管理的視覺變化。通常，這需要編寫自定義代碼。但是使用Divi 5，您可以從一開始就可以在視覺上使用這些現代技術。讓我們仔細看一下。

常見的顏色管理問題

您選擇的一種完美的品牌顏色可以迅速繁殖到散佈在您網站上的數十種變體。以下是一些促成此問題的問題：

管理一種顏色的變化

您從一個基本藍色開始，很快需要數十種變體。您的頁面構建器的顏色拾取器變成一團糟。淺藍色，淺藍色，深藍色，深藍色，褪色的藍色 - 每種都被保存為單獨的顏色。

您的藍色品牌在您的網站上跨越了二十種不同的陰影。一些部分使用原始藍色，另一些則使用您三週前製作的更輕版本，並且您的按鈕使用您製作的較深的陰影以更好地對比。

這些顏色都沒有連接到其他顏色。當您的客戶想要紫色而不是藍色時，您將面對手動更新每種顏色。您將花費數小時點擊模塊。您追捕每個陰影。您希望您不要錯過任何人。

左側許多類似的藍色陰影的集合變成了右側的零星，無關的紫色，因為一個一個一個一個一個一個乏味的，需要持續的一致性。更重要的是，這些顏色變化通常是盯著的，並且沒有任何連接。

不透明度問題

許多頁面構建器都包括透明度控件，這可能是顏色一致性的噩夢。您可以創建一個完美的藍色覆蓋層，具有60％的不透明度，但是以後，您需要與其他部分相同的透明紅色。

您的頁面構建器不記得確切的混合物，因此您將不透明的滑塊射擊，並試圖匹配您以前的作品。

嘗試1、2和3的陰影和透明度各不相同，因為即使有精確的控件，眼球也不會提供精確的結果。

一些頁面構建器可讓您保存透明的顏色。其他人沒有。您最終會得到一堆外觀相似的透明藍色。

它們都略有不同。您的設計失去了一致性。您無法在各種模塊上可靠地重新創建相同的透明顏色。每次需要透明度時，您都會從頭開始。您猜測不透明度值。您希望它們與您現有的設計相匹配。

手動創建變量

大多數頁面構建者都提供某種形式的彩色節省，但是它很快變得難以管理。您可以保存帶有“黃色1”，“黃色2”和“黃光”的通用名稱的顏色。

六個月後，您不知道哪個黃色可以做什麼。您保存的調色板變成了一堆相似的顏色，名稱毫無意義。您的顏色庫在沒有任何組織系統的情況下增長。您有三個不同的橙色看起來幾乎相同，但它們具有各種目的。

許多顏色色板的網格，帶有重疊的陰影和不一致的名稱不一致的網格有助於混亂，令人困惑的調色板，難以組織或有效地組織或使用。

團隊成員添加其顏色變化，創建具有不同名稱的重複陰影。您的品牌橙色以“橙色”，“品牌橙色”，“主要橙色”和“橙色主”存在。沒有人知道要使用哪一個。

一些開發人員試圖通過編寫自定義CSS變量來解決此問題。這使他們可以更好地控制顏色關係。

但是現在您已經創建了一個技術障礙。您的非技術團隊成員無法再更新顏色，並且您的客戶無法自行更改簡單的顏色。您將對每種較小的顏色調整負責。

CSS中有什麼相對顏色（以及為什麼需要它們）

相對顏色解決了您的顏色問題。您選擇一種品牌顏色。 CSS製作您需要的所有版本。背景的輕度。黑暗的邊界。清晰的覆蓋層。全部來自一種起始顏色。

CSS充當動態顏色工具。您告訴它，“使這個黃色的打火機。” CSS完成了工作。盤旋時，您的紅色按鈕需要褪色。 CSS增加了透明度。您的藍色標頭需要一個較暗的邊界。 CSS立即創建它。

傳統的工作流程需要更多的手動努力。設計師在Photoshop中製作了顏色套裝。編碼器使用了Sass等工具。網站建築商不得不猜測匹配的顏色。 CSS現在自動處理此操作。

CSS如何從顏色創建顏色

“來自”一詞告訴CSS將現有顏色用作其起點。您給CSS顏色，它可以將其變成可以使用的碎片。

您的起始顏色成為基礎。 CSS將其分為部分。紅色數量，綠色量，藍色量。或色相，亮度和飽和度，如果您喜歡這些控件。

您可以從任何顏色格式開始。使用＃E91E63之類的十六進制顏色。告訴CSS作為HSL使用它，以便於亮度更改。如果您的代碼需要，將其輸出為RGB。 CSS自動轉換所有內容。

該代碼遵循一個簡單的模式。首先，您說要從哪裡獲得顏色，然後說出對它的改變。您可以保持所有相同的內容，但可以增加透明度，或更改色調，但要保持亮度。兩者都以相同的方式工作。

將顏色分為部分

不同的顏色格式為您提供不同的工具。 RGB可讓您分別更換紅色，綠色和藍色。 HSL為您提供色調，飽和度和輕度控制。

這是它的工作方式。您編寫RGB（來自＃FF4081 RGB）。 CSS採用了粉紅色的十六進制代碼，並將其分成紅色，綠色和藍色數字。然後，您可以根據需要使用這些數字。該圖案保持不變：顏色功能（來自您的彩色通道1 Channel2 Channel3）。

因此，您沒有從頭開始編寫顏色，而是建立在現有顏色上，而僅更改要更改的零件。

每個部分都會轉換以匹配您選擇的內容。轉換粉紅色的六角形給您r = 255，g = 64，b = 129。將它們按原樣使用或使用calc（）更改它們。

您也可以混合併匹配頻道。想要所有紅色像素一樣嗎？使用RGB（來自VAR（–Color）GGG）。這將採用綠色值並將其用於紅色，綠色和藍色，從而從原始顏色產生了灰色音調。

瀏覽器支持和其他注意事項

大型網站不能忽略訪客，因為他們需要容納所有人。野生動物園的舊版本的工作方式不同。 Chrome版本以自己的方式處理一些事情。 Firefox，它是自己的。您最終將編寫三個不同的代碼版本，以實現一種顏色效果。

所有這些額外的工作要花時間遠離更好的事情。您可以提高網站的功能並添加人們想要的功能。

許多開發人員選擇性地使用相對顏色。由於您控制瀏覽器，因此內部工具和個人項目運行良好。營銷網站和客戶工作需要更仔細的計劃。

該技術在支持的地方效果很好。問題是額外的複雜性是否適合您的項目時間表和團隊或客戶的技術能力。但是在大多數情況下，對於大多數團隊成員來說，這將是過度殺傷和開銷。

這就是Divi團隊介入的原因。我們看到Web設計師在瀏覽器兼容性方面掙扎，同時錯過了強大的色彩工具。我們在Divi 5中的解決方案採用了相對顏色的最佳部分，並將它們包裹在各處可用且不需要編碼的系統中。

Divi 5如何使相對顏色變得容易

現在，您知道相對色彩的力量；但是，您可能已經意識到它並不容易實施。 Divi 5採用了不同的方法，並將其構建在其視覺界面中。但是，讓我們找出哪個Divi是什麼。

什麼是Divi？

Divi是最受歡迎的WordPress頁面構建器。它優先考慮視覺設計，並使您完全控制設計。

您可以觀察更改現場，調整字體大小或線間距，並立即在頁面上查看結果。您可以訪問200多個您想要的模塊。文本塊，標題和內容作品作為團隊工作。沒有將您的想法擠入尷尬形狀的剛性模板。

這是使Divi與眾不同的原因：在2000年為真實企業建立的現成佈局。這些不是基本的入門模板。每個設計都針對特定行業。您會發現講述聽眾語言並符合您業務需求的佈局。

使用Divi快速站點跳過空白頁藍調

Divi快速站點修復了使空的畫布嚇倒在項目開始之前殺死項目的空白。您將獲得具有紮實設計的專業入門網站，我們的設計團隊使用您在其他任何地方找不到的原始圖像和藝術品來構建。

如果您想要更個性化的東西，Divi快速站點與Divi AI合作，根據您的業務詳細信息構建自定義佈局。描述您的諮詢公司或餐廳，並生產具有特定於行業內容的相關頁面。

這些不是基本的線框：您會收到適合您業務類型的實際標題，書面內容和圖像。它甚至為您設計了標題和頁腳，產品頁面和博客文章模板。

您可以從一開始就設置品牌字體和顏色，也可以讓AI為您選擇它們。 AI在這些準則中起作用。之後，所有內容都保持完全可編輯，因此您可以調整排版，直到它符合您的確切需求為止。

現在可以完全控製網站的設計

主題構建器使您在整個網站上負責設計。創建自定義標題以反映您的品牌個性。構建博客佈局，使讀者涉及長篇文章。您的404頁可以與匹配的字體和样式保持在品牌上。

如前所述，Divi AI將AI放在您的設計工作流程中。創建聽起來像您寫的頭條新聞和捕捉您品牌聲音的產品描述。

可以在構建器內完成照片編輯。告訴AI您在圖像中需要什麼變化，並處理編輯。

需要新的圖像嗎？它也創造了這些。

完整的頁面部分非常適合您的業務。

加上代碼片段時，您需要它們。

Divi 5：下一個進化

Divi 5以明確的任務進入Alpha測試：提高網頁設計過程的性能。我們聽了真正的反饋，內容涉及什麼讓您放慢腳步以及什麼對您有所幫助。

您喜歡當前的Divi持續的所有內容。我們只是使它工作得更好。該界面看起來更乾淨。頁面的加載速度比以前快。單擊它們時，控件響應正確。

我們使用當今的網絡標準重建了基金會。這意味著更少的怪異錯誤，整體上的性能更平滑。

您花更少的時間與建造者戰鬥和更多的時間設計。您的網站看起來更專業，因為一致性會自動發生。客戶獲得更好的網站，因為您可以專注於他們的需求而不是技術問題。

Alpha版本可以在新網站上使用，儘管我們不建議將您現有的Divi 4網站轉換為Divi 5。

Divi 5中的新功能

Divi 5為您構建網站的方式帶來了重大更改。公共Alpha版本現在非常適合新項目。我們的開發團隊每兩週運送新功能，自Alpha開始以來已經發布了幾次重大更新。

這是一些關鍵更新：

• 現代代碼庫通過僅加載您實際需要的模塊來加快速度，從而刪除了減慢Divi 4的代碼膨脹。
• 現在，一個完整的Flexbox佈局系統包括新的行模板，自動垂直中心，內容包裝和通過視覺控制的間距分佈。
• 一個嶄新的循環構建器，可重複具有動態內容的模塊，組或部分，並支持用於復雜數據結構的嵌套循環。
• 帶有HSL的相對顏色基於色調，飽和度和輕度值提供動態色彩控制。
• 基於HTML-5的系統完全替代了短代碼，這意味著更少的錯誤和更好的WordPress兼容性。
• Visual Builder接口進行了完整的改頭換面，帶有淺色和深色模式，可停靠面板，標籤窗戶，鍵盤快捷鍵以及帶有麵包屑的改進圖層。
• 可自定義的響應式斷點替換了Divi 4的三個固定的斷點，從而為您提供了帆布縮放的更多控制權，以確切地查看設計如何查看不同的屏幕尺寸。
• 模塊組的工作方式就像將相關元素捆綁在一起的多功能容器，因此您可以將它們作為單位進行樣式或移動它們而不會失去關係。
• 設計變量可讓您在整個網站上設置全球範圍的顏色，字體，數字，圖像，文本和URL。
• 選項組預設保存特定的設計屬性，例如排版或在不同模塊類型上工作的陰影。
• 現在，高級CSS單元支持Clamp（），calc（），min（）和max（）通過視覺界面函數而無需編寫代碼。
• 交互系統會創建彈出窗口，切換，滾動效果和鼠標移動效果，而無需外部插件。

要發生什麼...

• WooCommerce模塊使用具有完整預設和可變兼容性的Divi 5體系結構從頭開始重建。
• 元素檢查員將為高級用戶提供新的調試和開發工具。
• 同樣，組旋轉木馬模塊可以幫助您創建由組組成的旋轉木馬，然後通過利用Divi的完整元素來設計您想要的任何型號的旋轉木馬，從而為每張幻燈片組成。

建立通過Divi 5擴展自己的調色板

當您需要數十種品牌顏色變化時，您的顏色拾取器就會變得一團糟。 Divi 5通過將每個陰影連接到一種基本顏色來解決此問題。下面的步驟向您展示瞭如何構建可擴展且可維護的顏色系統。

1。設置您的主要顏色基礎

打開視覺構建器，並在左側欄中找到變量管理器圖標。單擊它以查看您網站的顏色基礎。 Divi 5帶有已經等待您的預設顏色變量：主要，次要，標題和身體顏色。

您無法刪除這些預設變量，但是可以更改其值。這是完美的選擇，因為這四種顏色處理大多數網站。單擊主要顏色變量並輸入品牌的主要顏色。這成為您網站上其他所有顏色變化的基礎。

您的主要顏色變量應反映品牌顏色的最飽和版本。在創建較輕的背景或添加透明效果之前，將其視為純，未稀釋的版本。稍後建立變化時，這為您提供最大的範圍。

次要顏色非常適合需要在主要品牌顏色中脫穎而出的重音，按鈕或亮點。將標題顏色設置為在您的背景上讀取良好的東西。身體顏色通常保持深灰色或黑色，以獲得可讀性。

這四個預設變量連接到Divi的整個系統。當您構建模塊時，這些顏色將顯示為快速選項。在此處更改您的主要變量更新的每個模塊在此處更改為藍色，並在您的網站上立即更新。

避免在早期創建過多的自定義變量。相反，以這四個預設開始。大多數網站可能只需要這些基本顏色，並通過Divi 5的相對顏色控件創建了變化。但是，當然，如果需要的話，可以添加盡可能多的變量。

2。使用HSL控件創建顏色陰影

現在，添加另一個顏色變量。這次，您將從主顏色建立陰影，而不是設置新的基本顏色。在顏色選擇器中，從列表中選擇您的主要顏色變量。

現在，您看到了三個滑塊：色調，飽和度和輕巧。這些控制您的基本顏色如何變化。

色相從0度移動到360度。在製作相同顏色的陰影時，請不要獨自留下。飽和度從0％到100％，並控制您的顏色看起來多么生動。在0％時，任何顏色變為灰色。以100％的速度，您會獲得全強度。

輕度從0％到100％。此滑塊會創建您的實際陰影。在0，您會得到顏色的純形式。將其移動到50％以獲得較淺的陰影。將其降低到-20％，以使陰影較深。

您可以將這些HSL顏色混合併匹配，以根據需要構建新的顏色和變化。

讓我們創建兩種主顏色的變體。添加一個變量，並將您的新陰影命名，例如“主燈”或“主要黑暗”。重複此過程以創建多種陰影。典型的設置將您的基本主要光在30％的光線下用於背景之類的，並以-15％的輕度為黑暗。

您也可以為次要顏色添加如此淺和深色的陰影。

3。建造嵌套的顏色變量

您在步驟2中製作了一級光線和初級深色。現在，您可以從這些陰影中構建更多顏色。

製作一個稱為“卡背景陰影”的新變量。從列表中選擇您的主要光。將不透明度降至50％。這給您帶來了卡片背景的幾乎沒有色彩。接下來，創建“按鈕懸停”。選擇主要黑暗。降低亮度又使其變得更黑。現在，當人們懸停在鈕扣上時，您的按鈕可能會變成深色。

您也可以從陰影中構建自定義顏色。通過選擇按鈕懸停來製作“文本陰影”。將不透明度設置為15％。現在，您的文本陰影連接到懸停的按鈕懸停，後者連接到主要黑暗，後者連接到主。

嘗試使用原發光的“邊框口音”。顛簸飽和至100％，以使其更加流行。這為您提供了與您的品牌相匹配的明亮邊界。每個鏈都會更長。所有五種顏色都追溯到一個主要選擇。

為您的次要顏色添加類似的陰影，以選擇各種顏色。

4。將相對顏色應用於您的網站

您建立了顏色粉底並創建了所有這些陰影。現在是實際的部分：在您的網站上實施它們。

打開視覺構建器中的任何模塊。單擊背景，文本或邊框的顏色選項。您保存的顏色變量出現在顏色選擇器內。您不需要記住名稱或十六進制代碼。

選擇主按鈕的主要顏色。選擇部分背景的主燈。使用主要的黑暗進行邊界和CTA按鈕等微妙的口音。每個選擇都可以回到您的基本色系統。

您的顏色變量到處都是：標題，頁腳，博客佈局和產品頁面。您的團隊成員和客戶可以在不猜測的情況下選擇顏色。他們在選擇器中看到“主燈”，而不是隨機的十六進制代碼。清晰的名字意味著更少的錯誤和更快的設計工作。每個人都知道哪種顏色有其目的。

這種基於變量的系統可防止視覺上的不一致。您不必節省數十個類似的藍色，也不需要想知道要用於懸停效果的哪種陰影。您的變量為您提供了結構，同時保持設計靈活性。

5。在需要時更新顏色

您的客戶決定他們想要午夜藍色，而不是藍色。借助傳統的顏色管理，這意味著要篩選模塊並手動更新每個陰影或一次更新一堆全球顏色的數小時。有了Divi 5的相對顏色，您可以更改一個變量，並且其他所有內容都隨之而來。

您的主要光背景變為淺綠色。主要的黑暗邊界轉向深綠色。按鈕懸停的顏色可以調整為深藍色。您建立的所有嵌套關係保持完整。

您的卡背景陰影具有15％的原發光性。它變成了新的綠色主要光的15％不透明度，而無需觸摸它。您的文本陰影連接到懸停的按鈕，該按鈕連接到主要黑暗，後者連接到主。

舊的方式意味著每次都從頭開始重新創建色彩和諧。您可以在改變基礎的同時保留關係，並且您的設計保持平衡。

您的顏色，規則

不一致的顏色使用破壞了良好的設計。您一直在保存毫無意義的名稱，通過模塊進行更新的隨機陰影，並每次客戶改變主意時從頭開始重建調色板。

Divi 5的相對顏色結束了這場工作流的噩夢。從基本顏色構建一次，並自動觀看網站上的每個變化更新。該系統處理瀏覽器的兼容性，保持關係並保持顏色拾取器的井井有條，因此您無需使用CSS。

您的下一個項目應該得到更好的顏色管理。下載Divi 5，看看有組織的設計的感覺。