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

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

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

但是，您最終發(fā)現(xiàn)的是網(wǎng)絡(luò)上的顏色是一場硬件與人類感知之戰(zhàn)。

是什么使顏色圖有用

您可能熟悉樣式表中聲明顏色的方式，例如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

這些值給出了有關(guān)如何呈現(xiàn)顏色的設(shè)備說明。顏色的更深層屬性可以通過編程性地暴露并利用以了解顏色與更廣泛的調(diào)色板的關(guān)系。

圖形顏色屬性的價值在于，我們可以更完整地了解顏色之間的關(guān)系。這揭示了為什么顏色的集合可能會或可能不會在一起。繪制多種顏色屬性有助于暗示可以進行哪些調(diào)整以創(chuàng)建更和諧的調(diào)色板。我們將研究如何確定以后部分的更改的示例。

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

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

 $顏色：rebeccapurple;

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

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

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

此外，顏色對比對于可訪問性非常重要，尤其是在可讀性和區(qū)分UI元素方面，可以通過程序進行計算。這很重要，這意味著工具可以測試通過值。這也意味著算法可以在背景顏色中傳遞時返回適當(dāng)?shù)奈谋绢伾?。因此，我們的工具將包含對比度檢查，作為評估如何調(diào)整調(diào)色板的另一種方法。

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

Sass作為調(diào)色板建筑工具

Sass提供了幾種傳統(tǒng)的編程功能，使其非常適合我們的需求，例如通過陣列創(chuàng)建和迭代，并通過自定義功能來操縱值。當(dāng)與具有實時處理的Codepen這樣的在線IDE加上時，我們可以從本質(zhì)上創(chuàng)建一個Web應(yīng)用程序來解決特定的問題，例如構(gòu)建調(diào)色板。

這是我們將要使用的工具的預(yù)覽：

Sass Paletter Builder的功能

• 它輸出縱橫比控制的響應(yīng)圖，以進行準(zhǔn)確的繪圖點位置和值比較。
• 它利用SASS顏色函數(shù)和數(shù)學(xué)計算的結(jié)果以0–100％的比例正確繪制點。
• 它產(chǎn)生了一個提供更傳統(tǒng)的“色板”視圖的梯度。
• 它使用內(nèi)置的SASS功能來提取飽和度和亮度值。
• 它創(chuàng)建亮度和對比功能（除了在所需的預(yù)定的線性顏色通道值中鏈接外，還從材料Web組件分叉）。
• 它為給定背景返回適當(dāng)?shù)奈谋绢伾?，設(shè)置變量可更改所使用的比率。
• 它提供了在給定調(diào)色板上均勻縮放飽和度和輕度的功能。

使用調(diào)色板構(gòu)建器

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

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

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

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

解釋圖形并創(chuàng)建平衡，可訪問的調(diào)色板

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

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

一種表現(xiàn)出均衡亮度的調(diào)色板是條紋（$ stripe）的樣本：

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

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

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

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

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

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

當(dāng)考慮如何在UI中使用調(diào)色板顏色時，對比就會發(fā)揮作用。該工具默認為AA對比度最適合所有文本：4.5。如果您要為輕型UI構(gòu)建，則考慮到文本上使用的任何顏色都應(yīng)在適應(yīng)亮度時與白色進行適當(dāng)?shù)膶Ρ榷?，這是由情節(jié)點的中心顏色指示的。

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

進一步閱讀

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

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

以上是一個方便的武力工具，用于制作平衡調(diào)色板的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！