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

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

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

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

是什么使顏色圖有用

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

 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è)備說(shuō)明。顏色的更深層屬性可以通過(guò)編程性地暴露并利用以了解顏色與更廣泛的調(diào)色板的關(guān)系。

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

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

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

 $顏色：rebeccapurple;

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

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

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

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

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

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

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

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

Sass Paletter Builder的功能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

花一分鐘來(lái)探索其他可用的顏色功能。

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

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

進(jìn)一步閱讀

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

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

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