一個方便的武力工具，用於製作平衡調色板

對於那些可能不是來自設計背景的人，選擇調色板通常是基於個人喜好。選擇顏色可以通過在線彩色工具，從圖像中取樣，從最喜歡的品牌中藉來的“借用”，或者只是從色輪隨機挑選，直到調色板“ Just See Fight感到正確”。

我們的目標是通過探索具有SASS顏色功能的關鍵顏色屬性來更好地了解使調色板“感覺正確”的原因。最後，您將變得更加熟悉：

• 繪製調色板的亮度，輕巧和飽和度以幫助建立平衡調色板的價值
• 構建可訪問對比度檢查到工具中的重要性
• 高級SASS功能以擴展您自己的探索，包括可以操縱和分叉的代碼epen

但是，您最終發現的是網絡上的顏色是一場硬件與人類感知之戰。

是什麼使顏色圖有用

您可能熟悉樣式表中聲明顏色的方式，例如RGB和RGBA值，HSL和HSLA值以及十六進制代碼。

 RBG（102,51,153）
RBGA（102,51,153，0.6）
HSL（270，50％，40％）
HSLA（270、50％，40％，0.6）
＃663399

這些值給出了有關如何呈現顏色的設備說明。顏色的更深層屬性可以通過編程性地暴露並利用以了解顏色與更廣泛的調色板的關係。

圖形顏色屬性的價值在於，我們可以更完整地了解顏色之間的關係。這揭示了為什麼顏色的集合可能會或可能不會在一起。繪製多種顏色屬性有助於暗示可以進行哪些調整以創建更和諧的調色板。我們將研究如何確定以後部分的更改的示例。

我們可以使用內置的Sass顏色功能很容易獲得兩個有用的測量值是輕度和飽和。

• 輕度是指白色或黑色與顏色的混合物。
• 飽和度是指顏色的強度，100％飽和度導致最純淨的顏色（不存在灰色）。

 $顏色：rebeccapurple;

@debug Lightness（$ color）;
// 40％

@debug飽和（$ color）;
// 50％;

但是，亮度可以說是最有用的顏色屬性。如我們工具中所示，亮度是使用假定SRGB顏色空間的WCAG公式計算得出的。亮度用於對比計算，作為一個更宏偉的概念，還旨在越來越近地量化人類對相對亮度的看法以評估顏色關係。這意味著調色板之間的亮度值範圍更緊密，可能會被認為是對人眼的平衡。但是機器是容易造成的，並且在操縱調色板值時可能會遇到此規則的例外。有關亮度的更廣泛的信息，以及一個名為Cielab的獨特色彩空間，旨在更準確地代表人類對顏色均勻性的看法，請參見本文末尾的鏈接。

此外，顏色對比對於可訪問性非常重要，尤其是在可讀性和區分UI元素方面，可以通過程序進行計算。這很重要，這意味著工具可以測試通過值。這也意味著算法可以在背景顏色中傳遞時返回適當的文本顏色。因此，我們的工具將包含對比度檢查，作為評估如何調整調色板的另一種方法。

可以提取該項目中所示的功能，以幫助計劃對比度安全設計系統調色板，或者在允許定義自定義主題的SASS框架中烘烤。

Sass作為調色板建築工具

Sass提供了幾種傳統的編程功能，使其非常適合我們的需求，例如通過陣列創建和迭代，並通過自定義功能來操縱值。當與具有實時處理的Codepen這樣的在線IDE加上時，我們可以從本質上創建一個Web應用程序來解決特定的問題，例如構建調色板。

這是我們將要使用的工具的預覽：

Sass Paletter Builder的功能

• 它輸出縱橫比控制的響應圖，以進行準確的繪圖點位置和值比較。
• 它利用SASS顏色函數和數學計算的結果以0–100％的比例正確繪製點。
• 它產生了一個提供更傳統的“色板”視圖的梯度。
• 它使用內置的SASS功能來提取飽和度和亮度值。
• 它創建亮度和對比功能（除了在所需的預定的線性顏色通道值中鏈接外，還從材料Web組件分叉）。
• 它為給定背景返回適當的文本顏色，設置變量可更改所使用的比率。
• 它提供了在給定調色板上均勻縮放飽和度和輕度的功能。

使用調色板構建器

首先，您可能希望從提供的示例調色板中交換，以感覺到圖形值如何改變不同類型的顏色範圍。只需複制一個調色板變量名稱，然後將其交換為$默認值，為$調色板變量的值，可以在評論交換調色板變量下找到。

接下來，嘗試在預定義比率之間切換$對比度的變量值，尤其是如果您不熟悉確保對比度通過WCAG指南時。

然後嘗試調整$調色板尺度的光度或$調色板規模的飽和值。這些饋送到調色板功能中，並均勻地擴展這些測量在整個調色板上（直至單個顏色的極限）。

最後，要添加自己的調色板，或在示例中交換一些顏色。該工具是探索SASS顏色功能以調整顏色的特定屬性的好方法，其中一些在$默認調色板中進行了證明。

解釋圖形並創建平衡，可訪問的調色板

正如我們之前討論的那樣，由於它是平衡調色板的最可靠指標，因此顯示亮度的圖形工具默認值。根據您的需求，飽和度和輕度可以單獨是有用的指標，但是大多數是信號器，可以幫助指出需要調整的內容以使調色板的亮度更加對齊。一個例外可能是根據您已建立的調色板中的每個值創建輕度量表。您可以將其交換為$ StripeBlue示例。

$默認調色板實際上需要調整以使其接近均衡亮度：

一種表現出均衡亮度的調色板是條紋（$ stripe）的樣本：

這是該工具邀請思想轉移的地方。它沒有操縱色輪，而是利用SASS功能來編程調整顏色屬性。

檢查飽和圖，以查看您是否有顏色強度播放的空間。我建議的調整是通過比例色功能將您的顏色值包裹起來，並傳遞調整後的$飽和值，例如：比例色（＃41B880，$飽和：60％）。比例色的優點在於，它基於給定百分比會流體調整值。

輕度可以幫助解釋為什麼兩種顏色通過為它們的亮度分配一個值，而不是將它們與白色或黑色混合在一起，從而有所不同。在$默認調色板中，使用更改顏色函數用於紫色將其相對$ lightness值與紅色使用值的計算輕度（）對齊。

比例顏色功能還允許捆綁調整後的$飽和度和$ Lightness值，這通常是最有用的。請注意，提供的percents可能為負。

通過利用SASS功能並檢查飽和度和輕度圖，$ defaultbalencenceLuminance可以達到平衡的亮度。該調色板還使用MAP-GET函數從$默認調色板複製值，並應用進一步的調整而不是覆蓋它們，這很方便測試多種變化，例如可能在調色板上進行色相移動。

花一分鐘來探索其他可用的顏色功能。

當考慮如何在UI中使用調色板顏色時，對比就會發揮作用。該工具默認為AA對比度最適合所有文本：4.5。如果您要為輕型UI構建，則考慮到文本上使用的任何顏色都應在適應亮度時與白色進行適當的對比度，這是由情節點的中心顏色指示的。

提示：該圖設置為具有透明背景，因此，如果您要為深色UI開發，則可以在身體上添加背景規則。

進一步閱讀

顏色是一個廣泛的主題，本文只能達到與SASS功能相關的方面。但是，為了真正了解如何創建和諧的色彩系統，我建議使用以下資源：

• 顏色空間 - 是一種超級令人印象深刻的深度，具有各種顏色空間的交互模型以及如何計算它們。
• 了解顏色和亮度 - 從MDN概述的顏色和亮度及其與可訪問性的關係。
• 永久均勻的顏色空間 - 有關感知均勻顏色系統的更多信息，並帶有一個介紹的工具HSLUV，該工具將值從更熟悉的HSL色彩空間轉換為亮度調節的Cieluv Color Space。
• 可訪問的顏色系統 - 從Stripe中進行的案例研究，講述他們的經驗通過創建自定義工具來構建可訪問的顏色系統（這啟發了此探索和文章）。
• 網絡上的書呆子指南 - 這是對網絡上有色機制的絕妙探索，可在CSS-Tricks上提供。
• Tanaguru對比Finder - 如果您正在努力調整顏色以實現可訪問的對比度，則可以幫助您提供幫助。
• Colorbox - Lyft的Web應用程序，通過圖形進一步探討了顏色尺度。
• 設計系統的顏色 - 描述了礦物UI的傑出努力，以創建顏色坡道，以通過亮度調色板來支持一致的主題。
• 我們如何在Tableau 10 - Tableau裸露的定制工具的Tableau Pableaut功能中設計新的調色板，該功能幫助他們創建了基於Cielab的刷新調色板，包括對該顏色空間的平易近人概述。

以上是一個方便的武力工具，用於製作平衡調色板的詳細內容。更多資訊請關注PHP中文網其他相關文章！