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

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

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

但是，您最終發(fā)現(xiàn)的是網(wǎng)絡(luò)上的顏色是一場(chǎng)硬件與人類感知之戰(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è)備說明。顏色的更深層屬性可以通過編程性地暴露並利用以了解顏色與更廣泛的調(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)致最純淨(jìng)的顏色（不存在灰色）。

 $顏色：rebeccapurple;

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

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

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

此外，顏色對(duì)比對(duì)於可訪問性非常重要，尤其是在可讀性和區(qū)分UI元素方面，可以通過程序進(jìn)行計(jì)算。這很重要，這意味著工具可以測(cè)試通過值。這也意味著算法可以在背景顏色中傳遞時(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)的編程功能，使其非常適合我們的需求，例如通過陣列創(chuàng)建和迭代，並通過自定義功能來操縱值。當(dāng)與具有實(shí)時(shí)處理的Codepen這樣的在線IDE加上時(shí)，我們可以從本質(zhì)上創(chuàng)建一個(gè)Web應(yīng)用程序來解決特定的問題，例如構(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功能來提取飽和度和亮度值。
• 它創(chuàng)建亮度和對(duì)比功能（除了在所需的預(yù)定的線性顏色通道值中鏈接外，還從材料Web組件分叉）。
• 它為給定背景返回適當(dāng)?shù)奈谋绢伾?，設(shè)置變量可更改所使用的比率。
• 它提供了在給定調(diào)色板上均勻縮放飽和度和輕度的功能。

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

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

接下來，嘗試在預(yù)定義比率之間切換$對(duì)比度的變量值，尤其是如果您不熟悉確保對(duì)比度通過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)建平衡，可訪問的調(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)移的地方。它沒有操縱色輪，而是利用SASS功能來編程調(diào)整顏色屬性。

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

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

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

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

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

當(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開發(fā)，則可以在身體上添加背景規(guī)則。

進(jìn)一步閱讀

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

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