什麼是HSL以及為什麼設計師應該掌握它

顏色是設計師工具包中最強大的工具之一，但是使用Hex和RGB等傳統系統有時會感到有限。這些格式可行，但它們並不能反映我們實際看到或思考顏色的方式。需要較淺的陰影或想搭配不同色調的飽和度？你猜你還不是。

這就是色調，飽和度和輕度（HSL）的來源。它使顏色調整更具視覺和可預測性，而Divi 5現在由於其相對顏色和HSL功能發布而在本地支持它。讓我們探索它的工作原理以及為什麼要掌握它。

為什麼大多數設計師都在努力選擇顏色選擇

彩色工具通常與我們自然如何看待顏色不符。您會看到自己喜歡的藍色陰影，但是捕獲它的唯一方法是通過＃4A90E2之類的十六進制代碼。這些字母和數字對您的大腦無關。

十六進制顏色是通過混合紅色，綠色和藍色值製成的。每對（例如4A，90，E2）顯示了每種顏色的使用，從0到255。一起創建了最終顏色＃4A90E2。

當您需要較輕的品牌藍色版本時，您可能難以弄清楚要更改哪些數字。您是否應該平均增加所有RGB值？還是只調整一個RGB通道（紅色，綠色或藍色）？這些數字與您的眼睛期望不符，因此您調整併預覽直到感覺正確。

傳統的顏色系統在您跨不同情況下工作時會產生更大的問題。創建顏色變化成為純粹的猜測。您需要五種共同使用的陰影，但是沒有系統。閃電＃4A90E2至＃6ba3e8看起來正確，或者看起來可能被洗淨。直到看到它，您才知道。

通過更改十六進制代碼獲得陰影並不簡單。新的十六進制值（＃6BA3E8）在左側仔細選擇，以創建＃4A90E2的較淺陰影。在右邊，僅進行名義更改（＃3B99E5）不會減輕顏色，而是完全改變了顏色。

這個緩慢的手動工作流程需要幾個小時才能完成。您調整值，檢查預覽，然後再次調整，與工具進行戰鬥而不是設計。當您應該關注顏色如何使人們的感覺時，您的注意力就會吸引到技術細節中。

許多設計師最終避免了顏色實驗，因為該過程感覺如此笨拙。您堅持安全的選擇或從其他站點複製調色板。應幫助您探索顏色創造力的工具實際上限制了它。

靜態RGB值的問題

RGB值並不總是表現出您的期望。在同一設置下，綠色比藍色顯著，但是系統同樣對待它們。 RGB（128，128，128）是一種理想的中等灰色，但其外觀可能會因屏幕，照明或所使用的顏色配置文件而異。

想要更輕的品牌顏色嗎？您可以嘗試提高RGB值，有時，您會得到您的預期。其他時候，您會得到一些看起來被洗淨而怪異的東西。沒有辦法事先告訴。

RGB值的品牌藍色同等增加+50，從而導致掉落的陰影，這不是預期的平滑淺色。這表明，在每個RGB通道中添加相同的數量並不總是會產生可預測或平衡的色調。

RGB顏色在不同程序之間也會改變。這是由於顏色配置文件，渲染引擎以及瀏覽器如何解釋這些值的差異而發生的。在Photoshop中選擇一個完美的陰影，將十六進制代碼複製到您的網站，並且看起來仍然略有不同。當相同的顏色代碼在瀏覽器和設計工具之間看起來略有不同時，品牌準則就變得更加難以執行。

當您嘗試減輕或變暗時，每種顏色都會以自己的方式變化。由於RGB不會均勻調整顏色，因此某些色調更快地淡入或以意想不到的方式轉移。隨著輕度的增加，有些色調比其他色調更快。當紅色保持生機勃勃的同時，您的藍色變灰色。當橙色保持乾淨時，您的紫色會變得泥濘。

顏色工作變成反複試驗，而不是故意的設計。

什麼是色調，飽和度和輕度（HSL）系統？

色相，飽和度和輕度（HSL）將顏色分為三個部分，使您的大腦實際對顏色的看法相匹配。色調從360個選件的輪子中挑選基本顏色。飽和控制該顏色的充滿活力或灰色。輕度決定是黑暗，明亮還是之間的某個地方。

當您認為“我想要一個深綠色”時，您已經在考慮HSL術語。您知道您想要綠色（色調），可能相當豐富（飽和），並且在較暗的一面（輕度）。

三個組件如何一起工作

色相就像從可見光光譜中切出的色輪一樣工作。末端將紅色連接到洋紅色，從而形成每種可能顏色的平滑環路。想要完美的橙色嗎？從紅色（0度）開始，然後向黃色移動約30度。

飽和度將顏色純度視為百分比。零百分比去除所有顏色，留下灰色。百分之一百給了最生動的版本。將飽和度視為霓虹燈標誌和柔和的水彩之間的差異。

HSL顏色的工作方式，靈感來自Wikipedia上有關同一主題的圖形

輕度範圍從0％（純黑）到50％（中性）到100％（純白色）。大多數可用的顏色的亮度在20％至80％之間。這與您自然考慮使顏色更淺或更暗的方式相匹配。

為什麼頁面構建者通常避免HSL

大多數頁面構建者出於實際原因堅持使用十六進制代碼和RGB，而不是因為這些系統效果更好。建築商開發人員面臨著真正的技術障礙。用戶已經知道Photoshop和其他設計工具的HEX代碼。在顏色系統之間轉換需要額外的處理。

支持HSL意味著建立新的接口，並教育用戶有關陌生概念的知識，除非將HSL彩色選擇器完美地釘住。從業務角度來看，這種保守的方法也有意義，即使它限制了創造性的可能性。

使用Divi 5的新HSL控件創建完美的色彩變化

HSL從理論上講聽起來很棒，但是理論不能建立網站。您需要支持這種方法的工具。大多數頁面構建者都會迫使您回到十六進制代碼和RGB猜測中。 Divi 5改變了有關您如何使用顏色的一切。但首先：

什麼是Divi？

Divi是一個頁面構建器，其工作原理與其他WordPress頁面構建器不同。您將獲得視覺設計工具與嚴重的排版控件混合在一起。實時編輯器立即顯示您的更改。調整字體尺寸，調整線間距，然後在此處觀看頁面更新。

您可以在任何地方丟棄200多個模塊。文本塊，標題和特殊內容作品都可以很好地播放。

這是使Divi與眾不同的原因：為真實企業建造的2000多個現成的佈局。我們正在談論實際設計，而不是基本的入門模板。需要您的餐廳嗎？有一個佈局。經營攝影工作室？我們已經覆蓋了你。顧問和科技初​​創公司也擁有自己的設計。

每個佈局都知道您的行業。顏色，間距和內容流都可以對客戶的思考和瀏覽方式有意義。

全場控制

主題構建器將您網站的每一部分都放在您的手中。構建可以說您品牌語言的自定義標題。設計博客頁面，使長篇文章易於閱讀。您的404錯誤頁面可以保留與網站其餘部分相同的字體和样式。

Divi AI將人工智能直接帶入您的工作流程中。產生的頭條聽起來像您寫的。創建一個與您的品牌聲音完全匹配的產品副本。

它構建了了解您業務的整個頁面。

在需要時寫代碼片段。

Divi AI也可以與您的圖像一起在構建器內部使用。描述任何圖像中的需求解決方案以及如何進行這些更改。

甚至按需生成全新的圖片。

跳過Divi快速站點的空白頁問題

Divi快速站點修復了空白頁問題，該問題會在啟動之前停止許多項目。專業入門網站附帶已經設置的排版。我們的設計團隊通過獨特的圖像和藝術品來構建這些模板，您將在其他任何地方看到。

Divi快速站點帶有Divi AI也可以根據您的業務描述構建自定義佈局。告訴它有關您的諮詢業務或餐廳的信息，它可以為您的行業創建相關頁面。

這不僅僅是線框。您會獲得對您業務有意義的真實頭條，身體副本和圖像。您可以預先設置品牌字體和顏色，也可以讓AI為您選擇。

之後，一切都可以完全編輯，因此您可以完善排版以匹配您的視野。

Divi 5中有什麼新功能？

Divi 5是Page Builder的下一個版本，目前正在Alpha測試中，並準備用於新的網站項目。我們專注於實踐改進，以加快您的日常工作，並使建築工地更加愉快。

當前Divi的最佳零件在我們重建其他所有內容時都保持不變。新鮮的界面設計符合引擎蓋下的性能。現代編碼實踐現在為整個系統提供動力。
頁面的加載速度比以前快。單擊它們時，控制響應更快。在沒有額外的手動工作的情況下，排版在整個網站上保持一致。

以下是一些亮點：

• 完整的框架重建轉儲舊的短碼系統。一切都在現代基於塊的體系結構上運行，該體系結構的處理能力更好。
• Divi 5的Flexbox系統可直接控制建立現代響應式佈局，輕鬆管理對齊，間距和包裝，而無需自定義代碼。
• HSL顏色系統帶來了與設計師思維方式相匹配的顏色控制。調整色調，飽和度和輕度，而不是使用十六進制代碼進行猜測。
• 七個自定義斷點取代了舊的三尺度限制。您的版式在訪問者使用的每個設備上看起來都很完美。
• CSS函數內置表示Calc（），clamp（），min（）和max（）在視覺編輯器中工作。構建響應迅速的文本，該文本自然而然地縮放了沒有代碼。
• 全球設計變量將字體，顏色和間距存儲在一個地方。更改您的主字體一次。網站上的每個H1都會自動更新。
• 基於預設的設計系統包括單個模塊的元素預設以及用於完整版式樣式的選項組預設。為了保持一致，請在不同的模塊中使用它們。
• 一個新的Visual Builder界面可以使用可停靠面板，標籤窗口，鍵盤快捷鍵以及帶有麵包屑的更好的圖層視圖。導航變得容易得多。
• 嵌套行將行放入其他行內，以進行複雜的佈局。建立高級佈局安排，而沒有特殊的部分類型。
• 模塊組將不同的元素組合為單個單元。這使得管理複雜的文本佈局更加容易，您還可以構建自定義模塊。
• 多面板工作區將面板移動到最佳的位置。在調整其他設計內容的同時保持排版控件的打開狀態。
• 屬性管理副本，粘貼和重置元素之間的排版樣式。選擇特定的屬性進行傳輸而不是複制所有內容。
• 長/深色界面模式在長時間的設計過程中減少了眼睛勞損。
• 畫布縮放顯示了在不同屏幕尺寸上的版式在不留下編輯器的情況下看起來如何。

發現所有Divi 5功能版本

如何使用Divi 5創建HSL顏色

如前所述，Divi 5從頭開始重建彩色選擇器。新界面刪除了HSL控件的十六進制代碼，這些控制能像大腦對顏色一樣工作。三個滑塊處理工作：

• 色相接受0–360度，負值圍繞（例如-60變為300）。色輪兩端連接。零，360和負360都給您相同的紅色。需要互補的顏色嗎？將色調從您的起點設置為180度。
• 飽和度從0％到100％，並控制您的顏色看起來多么生動。零百分比剝離所有顏色強度，留下灰色。百分之一百給出了全面的顏色。
• 輕度在相同的百分比範圍內工作。零使黑色，100％創造白色，50％顯示您選擇的任何色調的純形式。

拖動時控件更新現場。應用按鈕或刷新延遲不會中斷您的工作流程。

1。從全球顏色中構建相對顏色

相對顏色可讓您通過調整單個HSL組件來基於現有的全球顏色創建新顏色。通過添加新顏色開始在設計變量管理器中開始。

使用顏色選擇器，將基本顏色（可能是品牌顏色）設置為匹配現有的主要全局顏色。

讓我們使用您的主要色調轉移來創建互補的顏色來設置次要顏色。採用您的原色，輕度設置為25％。

您甚至可以使用色調或飽和度來創建新的顏色作為輔助顏色。

顏色色板一目了然地向您顯示重要的信息。您可以判斷某些東西是否使用設計變量，並查看HSL過濾器如何修改基本顏色。這種視覺反饋可以幫助您了解顏色關係發生了什麼。

同樣，使用主顏色作為基礎，為標題文本顏色和字體顏色全局顏色創建深色陰影。

當然，您可以在這裡創建更多的裝飾色，並且仍然可以輸入十六進制，RGB或手動命名顏色值。

2。管理多層設計變量關係

設計變量可以彼此堆疊以進行複雜的顏色系統。根據您的初級，您可以創建其他裝飾顏色，例如Burnt Moss。然後，減少燃燒的苔蘚的不透明性建立陰影顏色。

這些嵌套的關係顯示了Divi 5如何處理複雜的顏色層次結構。調整主顏色時，燒毀的苔蘚顏色會首先更新，從而觸發陰影顏色進行更新。整個鏈保持連接。

這種方法將顏色管理從隨機猜測變成可預測的系統。您網站的調色板保持和諧，而無需在每個元素上進行手動調整。

3。將HSL顏色應用於您的網站

點擊任何文本模塊，然後打開彩色選擇器。您保存的變量帶有指示器。單擊“輔助顏色”，它將填寫部分的背景。相同的顏色適合按鈕，背景和邊界。

當您堅持一種色調時，排版起作用，但會改變輕巧。頭條新聞可以使用-25％的輕度使用原色。正文文字以-15％的比例更輕。鏈接位於-45％。一切都相關，但保持清晰。

背景需要您的品牌色彩調低。將輕度提高到95％。將飽和度降至15％。現在，您擁有不打擊內容的品牌背景。按鈕可充分飽和。懸停的聲明輕度降低了一個凹口。相同的顏色，強度不同。

輕型文字需要黑暗的背景。輕度數字告訴您什麼有效。在50％的亮度配對上發短信，背景低於-30％的亮度。

在光背景上帶有深色文本的部分反轉了值。相同的色調，相同的飽和度。交換輕度值，您就完成了。當然，所有這些顏色即使在應用後仍保持其鏈接。更改一個變量，所有內容都適應。那樣容易！

4。將HSL顏色保存為可重複使用的預設

創建模塊並應用了顏色設計變量後，將這些顏色預設為可重複使用的樣式。 Divi 5提供兩種共同工作的預設類型：

選項組預設控制所有模塊的特定設計方面。使用標題文本顏色設計變量為您的標題設計。使用Burnt Moss和50％的不透明度添加陰影。懸停在任何模塊中的選項組模塊圖標上，適當標記並保存。

背景，間距，動畫和文本相同的作品。通過數字設計變量添加邊框半徑，並設置引用此數字變量的預設。每個選項組都處理自己的設計區域，並且可以進行交叉應用，即，可以將列的邊框半徑應用於您的呼聲。

要申請，請轉到適當的選項並選擇預設。

元素預設保存完整的模塊樣式。風格A按鈕模塊，其輔助顏色在80％的輕度上。單擊模塊設置右上角的預設選擇器。創建一個稱為“品牌顏色按鈕”的新預設。這樣可以節省所有按鈕的設置，包括您的HSL顏色。

現在，當您添加一個新按鈕時，應用此預設並繼承了整個樣式。要為您削減工作，請使用您創建的任何自定義預設（選項組或元素），然後單擊其旁邊的星圖。該預設成為該元素或選項組的所有新實例的默認值。

您的HSL關係在預設中保持完整。當您更新顏色時，每個模塊也會使用該顏色更新。建立預設圖書館，用於光線，黑暗部分和特殊品牌時刻。 HSL值與每個預設一起傳播，使您的顏色系統在項目中保持一致。

使用Divi 5為您的網站構建顏色系統

顏色工作過去需要幾天。您會使用十六進制代碼，在程序之間複製價值，祈禱某些東西看起來不錯。

HSL使顏色工作再次變得有趣。您會看到自己喜歡的陰影，並確切地知道如何重新創建它。色調選擇顏色，飽和度控制它的生動程度，輕度使其更亮或更暗。現在，品牌刷新需要幾分鐘而不是數小時。

這是真正的設計控制。 Divi 5使它今天發生。